效果预览：


目的：用户上传一张图片后，可以对自己的大图片进行，选择区域宿略为小图，方法有很多，可以google ： javascript crop image,javascript thumbnail image

步骤：
1，参照
http://www.webmotionuk.co.uk/jquery/image_upload_crop.php
下载后，把php服务器端的代码去掉，只要client端的

2，注意点，原来的上传后，图片太大或者太小，都会以原大小显示，这样不好
（1），修改显示width， 和 height
         <img src="<%= @upload_src %>" style="float: left; margin-right: 10px;" id="thumbnail"  name="thumbnail" width="400" height="400"  alt="Create Thumbnail" />
          <div style="float:left; position:relative; overflow:hidden; width:100px; height:100px;">
            <img src="<%= @upload_src %>" style="position: relative;" width="75" height="100" alt="Thumbnail Preview" />       
          </div>
（2），获得选区的width，height需要改变，不然宿略图和小图不对应
  width: Math.round(scaleX * 400) + 'px', // 400就是我上面的i㎎的width
     height: Math.round(scaleY * 400) + 'px',

（3），可以改变选区的比列，3：4， 1：1 等等
 $('#thumbnail').imgAreaSelect({ aspectRatio: '3:4', onSelectChange: preview });

（4），把小图上传到后台，取得到是x1，y1，width，height等等，这样后台就可以根据参数操作图片了，我做的话，只是取了这四个参数就ok了
          <input type="hidden" name="x1" value="" id="x1" />
          <input type="hidden" name="y1" value="" id="y1" />
          <input type="hidden" name="x2" value="" id="x2" />
          <input type="hidden" name="y2" value="" id="y2" />
          <input type="hidden" name="w" value="" id="w" />
          <input type="hidden" name="h" value="" id="h" />

另外后台可以参考我这里，ruby代码
http://www.blogjava.net/fl1429/archive/2009/06/19/283282.html

显示图片问题可以参考这里：（图片上传到后台后，需要处理为大图片显示的大小，这样小图片才能相对应）
http://www.blogjava.net/fl1429/archive/2009/06/22/283629.html

ref：
http://odyniec.net/projects/imgareaselect/