javascript - canvas.todataURL 在第一次尝试时不起作用

Question

我正在尝试从图像源绘制 Canvas 图像。
下面的代码 sinppet 工作正常，但在 IOS 中——iPad-chrome 和 mac-safari 第一次无法工作，下次尝试时工作正常。不知道我哪里错了。请帮助我解决这个问题。

        var canvas = document.getElementById("canvasThumbResult");
        var context = canvas.getContext("2d");    
        var img = document.getElementById("ImagSrc");
        context.drawImage(img, x, y, wi, hi, 0, 0, wi, hi);
        var dataURL = canvas.toDataURL("image/jpeg");
        $("#CanvasImg").attr("src", dataURL);
        $("#CanvasImg").show(); 

Answer 1

您必须等待图像加载:

    var canvas = document.getElementById("canvasThumbResult");
    var context = canvas.getContext("2d");    
    var img = document.getElementById("ImagSrc");
    if (img.complete) {
      draw();
    } else {
      img.onload = function() { draw(); };
    }

    function draw() {
      context.drawImage(img, x, y, wi, hi, 0, 0, wi, hi);
      var dataURL = canvas.toDataURL("image/jpeg");
      $("#CanvasImg").attr("src", dataURL);
      $("#CanvasImg").show(); 
    }