How to implement crop tool on the image that is loaded on the canvas using fabric.js ?
I have a image loaded on the canvas .Now i want to implement crop tool where the user is allowed to crop the image and reload it on to the canvas when he is done.
In Summary
el.selectable = falseSorry, let me explain. The ctx.rect will crop the image from the center point of the object. Also the scaleX factor should be taken into account.
x = select_el.left - object.left;
y = select_el.top - object.top;
x *= 1 / scale;
y *= 1 / scale;
width = select_el.width * 1 / scale;
heigh = select_el.height * 1 / scale;
object.clipTo = function (ctx) {
ctx.rect (x, y, width, height);
}
Complete example: http://jsfiddle.net/hellomaya/kNEaX/1/
And check out this http://jsfiddle.net/hellomaya/hzqrM/ for generating the select box.
And a reference for the Fabric events: https://github.com/kangax/fabric.js/wiki/Working-with-events
