Canvas DrawImage在IOS Safari上不起作用

Question

我有一個帶有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;
}

Answer 1

您需要等待圖像數據加載才能使用它...

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