canvas + drawImage, toDataURL 返回空白图片答案

【问题标题】：canvas + drawImage, toDataURL returns blank imagecanvas + drawImage, toDataURL 返回空白图片
【发布时间】：2017-12-16 17:56:17
【问题描述】：

我在画布上添加图像（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);

};

【问题讨论】：

您还应该将 jQuery 标记添加到您的问题中，因为您在源代码中使用了该库。
在加载回调后使用这一行imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
我移动了这条线，但仍然显示空白图像：/
您必须在图像的 onload 处理程序中调用 toDataURL。该处理程序将被异步调用（即在执行当前 js 流之后），因此在您调用 toDataURL 时，画布上还没有绘制任何内容。见stackoverflow.com/questions/14220321/…
How do I return the response from an asynchronous call?的可能重复

标签： javascript html canvas

【解决方案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 link

【讨论】：

什么是#client_avatar是img标签还是什么？
#client_avatar 是输入，将照片保存在数据库中
在base64中生成图片但是还是空的，link
在画布中它会正确显示它们，但是如果您在 src 中的 img 标签中意识到它会显示一个空图像

【解决方案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">

^{抱歉没有给出任何解释}

ʜᴀᴠᴇ ꜰᴜɴ :)

【讨论】：