关于jquery的图片裁剪源码.pdf

《关于jquery的图片裁剪源码.pdf》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、关于jquery的图片裁剪源码Jquery是继prototype之后又一个优秀的Javascrīpt框架。它是轻量级的js库(压缩后只有21k)，它兼容CSS3，还兼容各种浏览器（IE6.0+,FF1.5+,Safari2.0+,Opera9.0+）。jQuery使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择原理很简单，就是将鼠标框住的区域两个定点坐标值传回服务器端，在服务器端用imagemagick处理。由于rmagi

2、ck存在内存泄露问题。这里选择了mini_magick。mini_magick是一个非常小的库，源代码不过300行。主要是通过调用系统命令行来处理图片。只要系统安装了imagemagick就可以。view：主要是加四个隐藏域来传递裁剪区域。在form提交时候一起传递到服务器。Html代码1234

3、2"type="hidden"value="150"name="y2"/>初始化裁剪框在待处理图片的中央和一些验证：Js代码5678$(document).ready(function(){9varpos=initValue();101112$('#avatar').imgAreaSelect({aspectRatio:'1:1',13x1:pos.x1,14y1:pos.y1,15x2:pos.x2,16y2:pos.y2,17handles:true,1819onSelectEnd:function(img,selection)

4、{20$('input[name=x1]').val(selection.x1);21$('input[name=y1]').val(selection.y1);22$('input[name=x2]').val(selection.x2);23$('input[name=y2]').val(selection.y2);24}25});26});2728functioninitValue(){29varo=newObject();30varx=$("#avatar").width();31vary=$("#avatar").height();32varsize=x>=y?y:x;33size

5、=size>=100?100:size;34o.x1=(x-size)/2;35o.y1=(y-size)/2;36o.x2=o.x1+size;37o.y2=o.y1+size;38returno;39}40414243functioncheckImage(){44varimage_name=$("#photo").val();45varreg=/.png

6、jpeg

7、jpg

8、bmp

9、gif$/i46if(reg.test(image_name)){47returntrue;48}elseif(image_name==""){49alert("没有选择图片！");50returnfalse

10、;51}else{52alert("图片格式不正确！");53returnfalse;54}55}5657后台处理，主要就是做以下几件事情：1.把上传来的照片压缩到200x2002.通过content-type判断图片是否合法。以防用户自己改扩展名。3.把gif和png格式转换成jpg，不然在裁剪时候后出问题。4.裁剪5.把裁剪后图片缩放成几种比例Ruby代码5859defupload_avatar60ifrequest.post?61avatar_200_200=RAILS_ROOT+"/public/files/avatar/200_200/"62photo_name="#{curren

11、t_user.hash_id}.jpg"6364avatar_100_100=RAILS_ROOT+"/public/files/avatar/100_100/"65avatar_64_64=RAILS_ROOT+"/public/files/avatar/64_64/"66avatar_50_50=RAILS_ROOT+"/public/files/avatar/50_50/"67avatar_40_40=