js 生成图片

// 使用 HTML5 Canvas 生成图片并导出为图像文件

// 创建一个 canvas 元素
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

// 设置 canvas 的宽度和高度
canvas.width = 200;
canvas.height = 200;

// 在 canvas 上绘制一些内容
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 100); // 绘制一个蓝色的矩形

// 将 canvas 内容转换为 Data URL 格式的图片
const dataURL = canvas.toDataURL('image/png'); // 默认是 PNG 格式，也可以指定其他格式如 'image/jpeg'

// 创建一个 img 元素来显示生成的图片
const img = document.createElement('img');
img.src = dataURL;

// 将 img 元素添加到页面中
document.body.appendChild(img);

// 如果需要下载该图片，可以创建一个链接并触发点击事件
const downloadLink = document.createElement('a');
downloadLink.href = dataURL;
downloadLink.download = 'generated-image.png'; // 设置下载的文件名
downloadLink.click();

解释说明：

1. 创建 Canvas 元素：我们使用 document.createElement('canvas') 创建了一个新的 <canvas> 元素，并通过 getContext('2d') 获取了绘图上下文。
2. 绘制图形：使用 fillRect 方法在画布上绘制了一个蓝色的矩形。
3. 生成图片：调用 canvas.toDataURL() 方法将画布的内容转换为 Base64 编码的 Data URL，这样可以直接作为图片的 src 属性。
4. 显示图片：创建一个 <img> 元素并将生成的 Data URL 赋值给它的 src 属性，然后将其添加到页面中以显示生成的图片。
5. 下载图片：创建一个隐藏的 <a> 链接，设置其 href 属性为 Data URL，并通过 click() 方法触发下载。

如果你只需要生成图片而不显示或下载，可以省略最后几步。