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

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

1 个答案: