js canvas转图片

// HTML部分
<canvas id="myCanvas" width="200" height="200"></canvas>
<img id="canvasImage" alt="Canvas as Image" />

// JavaScript部分
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 在canvas上绘制一些内容
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 150, 150);

// 将canvas转换为图片
function convertCanvasToImage(canvas) {
    const image = new Image();
    // toDataURL返回一个包含canvas图像数据的URL，指定格式为image/png
    image.src = canvas.toDataURL("image/png");
    return image;
}

const img = convertCanvasToImage(canvas);
document.getElementById('canvasImage').src = img.src;

// 解释说明：
// 1. 首先我们获取了canvas元素，并在其上绘制了一个绿色的矩形。
// 2. 然后定义了一个函数convertCanvasToImage，它接受一个canvas元素作为参数，并创建一个新的Image对象。
// 3. 使用canvas的toDataURL方法将canvas的内容转换为一个data URL，该URL可以直接用作img标签的src属性。
// 4. 最后，我们将生成的图像设置为页面上的img元素的src属性，从而显示canvas内容作为图片。