将带有图像的 HTML5 画布保存为图像答案

【问题标题】：Save HTML5 canvas with images as an image将带有图像的 HTML5 画布保存为图像
【发布时间】：2014-05-22 20:23:32
【问题描述】：

我正在尝试将带有图像的画布保存为 PNG，但是当我尝试这样做时：

var myCanvas = document.getElementById("myCanvas");
var img = document.createElement('img');
var ctx = myCanvas.getContext ? myCanvas.getContext('2d') : null;
img.src = 'image.png';

img.onload = function () {  
    ctx.drawImage(img, 0, 0, myCanvas.width, myCanvas.height);
}

var data = myCanvas.toDataURL("image/png");
if (!window.open(data)) {
    document.location.href = data;
}

我只得到一个没有图像的空白透明图像。我做错了什么？

【问题讨论】：

标签： javascript html canvas

【解决方案1】：

您需要将window.open 调用放在负载处理程序中，因为这是异步发生的。

img.onload = function () {  
    ctx.drawImage(img, 0, 0, myCanvas.width, myCanvas.height);

    var data = myCanvas.toDataURL("image/png");
    if (!window.open(data)) {
        document.location.href = data;
    }
}

【讨论】：