canvas + drawImage，toDataURL返回空白圖像

Question

當我將圖像添加到畫布（drawImage）時，使用其他畫布方法繪制圖形時的體裁問題沒有問題。

var ready;
ready = function() {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var imageObj = new Image();

imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';

imageObj.onload = function() {
  context.drawImage(imageObj, 69, 50);
};

var pngUrl = canvas.toDataURL();
console.log(pngUrl);
$('#client_avatar').val(pngUrl);

};

Answer 1

在設置源之前，您必須定義onload，否則它將無法調用onload。

$(document).ready(function() {
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    var imageObj = new Image();


    imageObj.onload = function() {
      context.drawImage(imageObj, 69, 50);
    };
    imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';


    var pngUrl = canvas.toDataURL();
    console.log(pngUrl);
//    $('#client_avatar').val(pngUrl);
$("#client_avatar").append("<img src='"+ pngUrl +"'>")

    });

這是工作的jsbin 鏈接

Answer 2

 $(document).ready(function() { var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var imageObj = new Image(); imageObj.onload = function() { context.drawImage(imageObj, 0, 0, 200, 200); var pngUrl = canvas.toDataURL(); console.log(pngUrl); $('#client_avatar').attr('src', pngUrl); }; imageObj.crossOrigin = 'anonymous'; //not necessary, if image hosted on same server imageObj.src = 'https://i.imgur.com/Q6aZlme.jpg'; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <canvas id="canvas" width="200" height="200"></canvas> <img id="client_avatar"> 

^{道歉，沒有給出任何解釋}

ꜰᴜɴ:)