canvas.todataURL не работает при первой попытке

Question

Я пытаюсь рисовать изображение холста из источника изображения.
Этот код ниже работает, но в 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(); 
    }