Search code examples
html5-canvasjcrop

How to use jcrop plug-in incase of HTML5 canvas element

I am new to this canvas stuff.recently in my project,when a user uploads an image on the server the image is being previewed dynamically on the canvas element .Now i want to crop some portion of it.I have used jcrop plugin but donot know how to get the cropped area.Any minor help regarding jcrop usage is also appreciated.

Thanks in advance

Solution

  • If you use jcrop you don't have to care about canvas stuff.

    Just create an image like this 

    <img src="myimage.jpg" id="cropbox" />

    and jcrop will do the rest. Use it like this (and add the options you need) :

    $('#cropbox').Jcrop();

    Full list of options and tutorial on the official website : http://deepliquid.com/projects/Jcrop/demos.php

    EDIT :

    If you have a canvas that you want to crop, then you should not use JCrop but this :

    drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

    illustration of the drawImage parameters

    parameter Image can be a canvas object. Then, to extract your canvas to an image, use toDataURL function.

    complete documentation available at mozilla MDN https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images