Question

我正在尝试合并2张图像并下载它们。通过研究，我这样做的方法是将两个图像都绘制在画布上并下载。一个图像是静态文件，另一个图像绘制在画布上。因此，我需要先将此画布转换为图像。

单击带有下载ID的链接时的功能：

代码变量：

 document.getElementById('hack') //This is a img tag which I use to verify if the canvas is converted to an image accurately.

document.getElementById('mainplot') //This is the static image. This gets drawn accurately on the canvas.

canvas2是画布，其中以ctx2作为上下文绘制图像

document.getElementById('download').addEventListener('click', function() {
ctx2.fillRect(one,10,100,100);
// one+=100
merge_ctx.clearRect(0,0,merge_canvas.width,merge_canvas.height); 
document.getElementById('hack').src = canvas2.toDataURL();
merge_ctx.drawImage(document.getElementById('mainplot'),0,0,merge_canvas.width,merge_canvas.height);
merge_ctx.drawImage(document.getElementById('hack'),0,0,merge_canvas.width,merge_canvas.height);
downloadCanvas(this, merge_canvas, 'test.png');}, false);

使用以上代码，canvas2可以准确地转换为图像（我可以看到带有hack id的img并进行验证）。要下载，我需要单击两次，以便第二次准确合并。第一次，canvas2图像在合并中为空。起初，我以为我需要一个onload函数，但是根本没有被触发。

如果我取消注释

 one+=100

canvas2图像始终为空白，因为一遍又一遍地绘制了画布。知道如何解决此问题吗？

Javascript从画布下载图像不起作用

0 个答案: