Javascript 画布&x2B；drawImage，toDataURL返回空白图像

当我将图像添加到画布（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);

---

})

在设置源之前，必须定义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 +"'>")

    });

$（文档）.ready（函数（）{
var canvas=document.getElementById（'canvas'）；
var context=canvas.getContext（'2d'）；
var imageObj=新图像（）；
imageObj.onload=函数（）{
背景。drawImage（imageObj，69,50）；
};
imageObj.src=http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
var pngUrl=canvas.toDataURL（）；
console.log（pngUrl）；
//$（'client#u avatar'）.val（pngUrl）；
$（“#客户端_化身”）。追加（“”）
});

这里是工作jsbin

$（文档）.ready（函数（）{
var canvas=document.getElementById（'canvas'）；
var context=canvas.getContext（'2d'）；
var imageObj=新图像（）；
imageObj.onload=函数（）{
drawImage（imageObj，0，0，200，200）；
var pngUrl=canvas.toDataURL（）；
console.log（pngUrl）；
$（'client_avatar'）.attr（'src'，pngUrl）；
};
imageObj.crossOrigin='anonymous'；//如果映像托管在同一服务器上，则不需要
imageObj.src=https://i.imgur.com/Q6aZlme.jpg';
});

您还应该在问题中添加jQuery标记，因为您在源代码中使用了该库。请使用这一行
imageObj.src=http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
onload callback之后，我移动了行，但仍然显示一个空白图像：/n您必须在图像的
onload
处理程序中调用toDataURL。该处理程序将被异步调用（即在当前js流执行之后），因此在调用
toDataURL
时，画布上还没有绘制任何内容。查看可能重复的“客户端”头像是img标签还是什么？#客户端”头像是一个输入，通过在数据库中保存照片在base64中生成图像，但这仍然是空的，在画布中正确显示它们，但如果您在src中的img标签中意识到，它会显示空图像