Crop image on the client side with JCrop and HTML5 canvas element
26 September, 2011
- 2 min read
Suppose you are working on a nice web application where the user can upload images to, for example, a shop catalogue (mmm... that makes me think on something :p ) but wait... you don't the catalogue uses the whole image you upload instead a piece of it. So, we need to crop the image. function updatePreview(c) {
if(parseInt(c.w) > 0) {
// Show image preview
var imageObj = $("#target")[0];
var canvas = $("#preview")[0];
var context = canvas.getContext("2d");
context.drawImage(imageObj, c.x, c.y, c…
