使用Javascript畫布調整dataURL不起作用

Question

我已經做了大量的研究，並且我完全無法理解這個問題。

代碼應該將dataURL調整爲500x500px。但是，它最終會出現空白圖像。

代碼頂部的原始dataURL變量IS有效。我console.log它，它在瀏覽器中打開它時，它工作。所以我不認爲這是問題。

$('#img-resizer .do-it').bindFirst("click", function() { 
     originalImg = $("#img-resizer img.original").cropper('getCroppedCanvas').toDataURL('image/jpeg'); 

     var img = document.createElement("img"); 
     img.src = originalImg; 

     var canvas = document.createElement("canvas"); 
     canvas.width = 500; 
     canvas.height = 500; 
     var ctx = canvas.getContext("2d"); 
     ctx.width = 500; 
     ctx.height = 500; 
     ctx.drawImage(img, 0, 0, 500, 500); 

     cropImg = canvas.toDataURL("image/png"); 

     $($("#img-resizer").attr("save-to")).attr("src", cropImg); 
    }); 

所以最終發生的是，當我的瀏覽器打開時，cropImg變量只是一個空白圖像。

正如我前面所說，我肯定originalImg變量是有效的，因爲我console.log它，它打開時工作。

謝謝。

Answer 1

add load event。 非常重要

刪除不必要的ctx.width/height

$('#img-resizer .do-it').bindFirst("click", function() { 
    originalImg = $("#img-resizer img.original").cropper('getCroppedCanvas').toDataURL('image/jpeg'); 

    var img = document.createElement("img"); 
    img.onload = function() { 
    var canvas = document.createElement("canvas"); 
    canvas.width = 500; 
    canvas.height = 500; 
    var ctx = canvas.getContext("2d"); 
    ctx.drawImage(img, 0, 0, 500, 500); 
    var cropImg = canvas.toDataURL("image/png"); 
    $($("#img-resizer").attr("save-to")).attr("src", cropImg); 
    } 
    img.src = originalImg; 
});