javascript - How to get image from slice image loaded on canvas? -

javascript - How to get image from slice image loaded on canvas? -

i have next code piece image. have 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 = canvas.todataurl('image/jpeg'); console.log( ); });

now when tried sliced part, store on canvas variable when check i black image. can tell me why happened , how solve it? thanks.

you have draw canvas first before can drawing on canvas image, create sure canvas drawn image after canvas drawn to

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

javascript jquery image html5 canvas