Question

我正在尝试从图像源绘制画布图像。
这下面的代码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(); 
    }

canvas.todataURL在首次尝试时不起作用

1 个答案: