Question

I have the next code which slice an image. I have the next HTML code

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

jQuery code

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

Now when I tried to get the sliced part, which is store on the canvas variable when I check the i I get an black image.
Someone can tell me why this happened and how to solve it?
Thanks.

Answer 1

You have to draw to the canvas first before you can get the drawing on the canvas as an image, to make sure the canvas is drawn to get the image after the canvas was drawn to

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