JavascriptでデータURLのサイズを変更するキャンバスが動作しない

Question

私は多くの研究を行いましたが、私はこの問題について完全に困惑してしまいました。

コードでは、dataURLのサイズを500x500pxに変更する予定です。しかし、それは空白の画像で終わる。

コードの先頭にある元のdataURL変数が有効です。私は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変数はブラウザで開いたときの空白の画像に過ぎません。

私が前に述べたように、私は元の変数が有効であることを確信しています。私はconsole.logとそれが開いたときに動作します。

ありがとうございました。

Answer 1

loadイベントを追加します。 非常に重要な

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; 
});