javascript - 如何从画布上加载的切片图像中获取图像？

Question

我有下一个切片图像的代码。我有下一个 HTML 代码

<img id="imagen" src="original.png" >
<canvas id="myCanvas" width="150" height="600"></canvas>

jQuery代码

$(document).ready(function() {
   var image = document.getElementById('imagen');
   var canvas = document.getElementById('myCanvas');
   var ctx = canvas.getContext('2d');

   image.onload = function() {
      ctx.drawImage(image, 0, 0, 50, image.height, 0, 0, 50, image.height);
   };

   var i = canvas.toDataURL('image/jpeg');
   console.log( i );
});

现在，当我尝试获取切片部分时，canvas当我检查时，它存储在变量中，i我得到了一个黑色图像。有人可以告诉我为什么会发生这种情况以及如何解决它？谢谢。

Answer 1

您必须先绘制到画布，然后才能将画布上的绘图作为图像获取，以确保在画布绘制到之后绘制画布以获取图像

image.onload = function() {
   ctx.drawImage(image, 0, 0, 50, image.height, 0, 0, 50, image.height);
   var i = canvas.toDataURL('image/jpeg');
   console.log( i );
};