jquery实现图片裁剪思路及实现

思路：JS，jquery不能实现图片的裁剪，只是显示了一个假象我的实现的方式大体如下： 1.将用户选中的图片上传到服务器2.将选中头像的矩形框在图片上的坐标发送到服务器，包括，矩形框的宽，高，左上角的x，y坐标，图片的高，宽等3.在服务器上用获得的各个坐标值，以及原始图片，用爪哇岛进行裁剪jquery。裁剪效果显示，利用选择http://odyniec.net/projects/imgareaselect/http://www.cnblogs.com/mizzle/archive/2011/10/13/2209891.html效果如下

爪哇岛实现裁剪图片http://blog.csdn.net/renfyjava/article/details/9942743我的例子：我的是同时显示四个尺寸的头像，部分代码如下：复制代码代码如下：脚本类型=' text/JavaScript ' var $ thumb _ width=180；//缩略图大小var $ thumb _ height=180函数预览(img，selection){ var Scalex=$ thumb _ width/selection。宽度；var Scaley=$ thumb _ height/selection。身高；var标度x2=100/选择。宽度；var等级2=100/选择。身高；var标度x3=60/选择。宽度；var等级3=60/选择。身高；var标度x4=30/选择。宽度；var等级4=30/选择。身高；$('#avatar180 img ').CSS({ width : Math。圆形(Scalex * 300)' px '，//获取图像的实际宽度身高：数学。圆形(Scaley * 300)“px”，//获取图像的实际高度左边距： '-数学。圆形(scaleX *选择。x1)“px”，边距到p :“-math。圆形(scaleY *选择。y1)' px ' })；$('#avatar100 img ').CSS({ width : math。圆形(比例尺x2 * 300)' px '，//获取图像的实际宽度身高：数学。圆形(比例尺2 * 300)“px”，//获取图像的实际高度边距loft : '-数学。圆形(比例尺x2 *选择。x1)“px”，边距到p :“-math。圆形(比例尺x2 *选择。y1)' px ' })；$('#avatar60 img ').CSS({ width : math。圆形(刻度x3 * 300)' px '，//获取图像的实际宽度身高：数学。圆形(比例尺3 * 300)“px”，//获取图像的实际高度边距loft : '-数学。圆形(比例x3 *选择。x1)' px '，页边距顶部： '-'数学。圆形(比例3 *选择。y1)' px ' })；$('#avatar30 img ').CSS({ width : math。圆形(比例尺x4 * 300)' px '，//获取图像的实际宽度身高：数学。圆形(比例尺4 * 300)' px '，//获取图像的实际高度边距loft : '-数学。圆形(比例尺x4 *选择。x1)' px '，页边距顶部： '-'数学。圆形(比例4 *选择。y1)' px ' })；$('#x1 ').val(选择。x1)；$('#y1 ').val(选择。y1)；$('#x2 ').val(选择。x2)；$('#y2 ').val(选择。y2)；$('#w ').val(选择。宽度)；$('#h ').val(选择。高度)；} $(文档)。ready(function(){ $(' # save _ thumb ')).单击(函数(){ var x1=$('#x1 ')).val()；var y1=$('#y1 ').val()；var x2=$('#x2 ').val()；var y2=$('#y2 ').val()；var w=$('#w ').val()；var h=$('#h ').val()；var jyduploadfile=$(' # jyduploadfile ').val()；if(x1==' ' | | y1==' ' | | x2==' ' | | y2==' ' | | w==' ' | | h==' ' | | jyduploadfile==' '){ alert('请先选择上传图片');返回false } else { return true } })；});$(窗口)。load(function () { $('#picView ')).imgaraeselection({ selectioncolor : ' blue '，x1:60，y1:60，x2: 240，maxWidth:300，minWidth:100，y2:240，min width 3360100，maxHeight:300，selectioncology 3360.2，aspectRatio: ' 1: })/script显示效果