利用 JCrop 和 HTML5 canvas元素在浏览器端实现图片裁剪

图片裁剪经常用在上传头像裁剪的功能上，如果要在Web应用中实现这个功能有些困难。本文将介绍如何利用Jcrop这个jQuery插件与HTML5技术实现在Web客户端就能裁剪图片不需要与服务端交互。

Jcrop是一个jQuery插件，它能为你的WEB应用程序快速简单地提供图片裁剪的功能。

特点：

• 对所有图片均unobtrusively（无侵入的，保持DOM简洁）
• 支持宽高比例锁定
• 支持 minSize / maxSize设置
• 支持改变选区或移 动选区时的回调（Callback）
• 支持用键盘微调选 区
• 通过API创建互 动，比如动画效果
• 支持CSS样式
  
  

以下英文原文自己看去吧，不会太难。

I won’t go in depth on how to create the whole process, in summary:

1. User choose an images and app upload to server.
2. Wep app shows the images to user and allows him/her to crop the desired piece of image.
3. Crop parameters (x, y, widht, height) are sent to server which responsible to really crop the image.

Here we talk about the step 2: the web page that allows to crop (or choose some image area) and send the parameters to the serve to make the real crop (for example using GD or ImageMagick).

The real magic comes from JCrop, a jQuery plugin to select areas within an image. As I note in the demo, in the JCrop project page there is a demo that makes a preview of the selection using two <img> elements.

Here the we are going to make something very similar but using the HTML5 canvas element (to practice a bit :p).

The first step is to add one img element pointing to the image and one canvas element which will act as the previous:

<img src="./sago.jpg" id="target" alt="Flowers" />  <canvas id="preview" style="width:150px;height:150px;overflow:hidden;"></canvas>

Now the code that preview the selected cropped image every time the user updates the selected area:

$('#target').Jcrop({      onChange : updatePreview,      onSelect : updatePreview,      aspectRatio : 1  });     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.w, c.h, 0, 0, canvas.width, canvas.height);      }  };

As you can see the main parameters are the coordinate fields (variable ‘c’). One way to send it to server is to store in four hidden input filed in a form, and send them on submit. Looking again to the post I think there are too many words to simply show an easy HTML5 canvas example

Source: http://acuriousanimal.com/blog/2011/09/26/crop-image-on-the-client-side-with-jcrop-and-html5-canvas-element/