javascript - 将包含图像的HTML5 Canvas 另存为图像

我正在尝试将包含图像的 Canvas 保存到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;
}

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

最佳答案

您需要将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;
    }
}

关于javascript - 将包含图像的HTML5 Canvas 另存为图像，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/12620763/