Canvas DrawImage 在 IOS Safari 上不起作用答案

【问题标题】：Canvas DrawImage does not work on IOS SafariCanvas DrawImage 在 IOS Safari 上不起作用
【发布时间】：2014-07-17 19:55:35
【问题描述】：

我有一个名为 napkin 的 id 画布。当我调用以下函数时，它应该将图像和餐巾画布绘制到内存中的另一个画布上。它适用于除 IOS Safari 之外的所有浏览器。该操作似乎没有超过画布的 IOS 内存上限。我通过调用 k().toDataURL() 来测试它。有什么想法吗？

function k() {
    var canvas = document.createElement('canvas');
    var napkin = document.getElementById("napkin");
    var img = new Image();
    img.src = picurl;
    var ctx = canvas.getContext("2d");
    var imgdata = new Image();
    imgdata.src = napkin.toDataURL();
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0);
    ctx.globalAlpha = 0.5;
    ctx.drawImage(imgdata, 0, 0);
    return canvas;
}

【问题讨论】：

您确定图像在您尝试将其绘制到画布之前已下载？
是的，因为返回画布的图像只包含图像，而不包含其他画布。
我也遇到了同样的问题，请问如何解决
您确定 k().toDataURL() 没有返回黑色图像吗？这就是内存不足时发生的情况。它返回一个大的黑色图像

标签： javascript ios html canvas safari

【解决方案1】：

使用前需要等待图片数据加载完毕...

var img = new Image();
img.onload = function(){
    // do stuff here with img
};
img.src = picurl;
// not here

【讨论】：