文章导航PC6首页软件下载单机游戏安卓资源苹果资源

pc软件新闻网络操作系统办公工具编程服务器软件评测

安卓新闻资讯应用教程刷机教程安卓游戏攻略tv资讯深度阅读综合安卓评测

苹果ios资讯苹果手机越狱备份教程美化教程ios软件教程mac教程

单机游戏角色扮演即时战略动作射击棋牌游戏体育竞技模拟经营其它游戏游戏工具

网游cf活动dnf活动lol周免英雄lol礼包

手游最新动态手游评测手游活动新游预告手游问答

您的位置：首页 → 网页设计 → 经验技巧 → 关于jquery的图片裁剪源码

关于jquery的图片裁剪源码

时间：2009/12/18 10:09:00来源：本站整理作者：佚名我要评论(0)

Jquery是继prototype之后又一个优秀的Javascrīpt框架。它是轻量级的js库(压缩后只有21k) ，它兼容CSS3，还兼容各种浏览器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。jQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择

jquery imgAeraSelect插件地址：

软件名称：jQuery图表插件jQchart
软件大小： 311KB
下载地址：http://www.pc6.com/softview/SoftView_51617.html

原理很简单，就是将鼠标框住的区域两个定点坐标值传回服务器端，在服务器端用image magick处理。
由于rmagick存在内存泄露问题。这里选择了mini_magick。mini_magick是一个非常小的库，源代码不过300行。主要是通过调用系统命令行来处理图片。只要系统安装了image magick就可以。

view：主要是加四个隐藏域来传递裁剪区域。在form提交时候一起传递到服务器。

Html代码
  1.         <input id="x1" type="hidden" value="0" name="x1"/>  
  2.         <input id="y1" type="hidden" value="0" name="y1"/>  
  3.         <input id="x2" type="hidden" value="150" name="x2"/>  
  4.         <input id="y2" type="hidden" value="150" name="y2"/>  

初始化裁剪框在待处理图片的中央和一些验证：

Js代码
  1.   
  2.   
  3. <script type="text/javascript">   
  4.     $(document).ready(function(){   
  5.       var pos = initValue();   
  6.   
  7.   
  8.       $('#avatar').imgAreaSelect({aspectRatio: '1:1',   
  9.         x1: pos.x1,   
  10.         y1: pos.y1,   
  11.         x2: pos.x2,   
  12.         y2: pos.y2,   
  13.         handles: true,   
  14.           
  15.         onSelectEnd: function (img, selection) {   
  16.           $('input[name=x1]').val(selection.x1);   
  17.           $('input[name=y1]').val(selection.y1);   
  18.           $('input[name=x2]').val(selection.x2);   
  19.           $('input[name=y2]').val(selection.y2);   
  20.         }   
  21.       });   
  22.     });   
  23.   
  24.     function initValue(){   
  25.       var o    = new Object();   
  26.       var x    = $("#avatar").width();   
  27.       var y    = $("#avatar").height();   
  28.       var size = x >= y ? y : x;   
  29.       size     = size >= 100 ? 100 : size;   
  30.       o.x1 = (x - size) / 2;   
  31.       o.y1 = (y - size) / 2;   
  32.       o.x2 = o.x1 + size;   
  33.       o.y2 = o.y1 + size;   
  34.       return o;   
  35.     }   
  36.   
  37.   
  38.   
  39.     function checkImage(){   
  40.       var image_name = $("#photo").val();   
  41.       var reg = /\.png|jpeg|jpg|bmp|gif$/i   
  42.       if (reg.test(image_name)){   
  43.         return true;   
  44.       }else if(image_name == "") {   
  45.         alert("没有选择图片！");   
  46.         return false;   
  47.       }else{   
  48.         alert("图片格式不正确！");   
  49.         return false;   
  50.       }   
  51.     }   
  52.        
  53.     

后台处理，主要就是做以下几件事情：

1.把上传来的照片压缩到200x200
2.通过content-type判断图片是否合法。以防用户自己改扩展名。
3.把gif和png格式转换成jpg，不然在裁剪时候后出问题。
4.裁剪
5.把裁剪后图片缩放成几种比例 

Ruby代码
  1.   
  2. def upload_avatar   
  3.     if request.post?   
  4.       avatar_200_200 = RAILS_ROOT + "/public/files/avatar/200_200/"  
  5.       photo_name     = "#{current_user.hash_id}.jpg"  
  6.          
  7.       avatar_100_100 = RAILS_ROOT + "/public/files/avatar/100_100/"  
  8.       avatar_64_64   = RAILS_ROOT + "/public/files/avatar/64_64/"  
  9.       avatar_50_50   = RAILS_ROOT + "/public/files/avatar/50_50/"  
  10.       avatar_40_40   = RAILS_ROOT + "/public/files/avatar/40_40/"  
  11.   
  12.   
  13.       if params[:commit] == "上传照片"  
  14.         #TODO Validate Image Size!   
  15.         #TODO 增加白色背景，以防不规则图片!   
  16.            
  17.         photo = params[:photo]   
  18.            
  19.         raise "image type Error!" if photo.content_type !~ /^image\/.*?jpeg|jpg|png|bmp|gif$/i   
  20.         Dir.chdir avatar_200_200   
  21.   
  22.         img  = MiniMagick::Image.from_blob(photo.read)   
  23.         img.format("jpg") if photo.content_type =~ /gif|png$/i   
  24.            
  25.         img.resize "200x200"  
  26.         img.write photo_name   
  27.   
  28.         redirect_to request.referer   
  29.       elsif params[:commit] == "保存设置"  
  30.            
  31.            
  32.         Dir.chdir avatar_200_200   
  33.         if File.exist?(photo_name)   
  34.           width = params[:x2].to_i - params[:x1].to_i   
  35.           height= params[:y2].to_i - params[:y1].to_i   
  36.   
  37.           img = MiniMagick::Image.open(photo_name)   
  38.              
  39.           img.crop "#{width}x#{height}+#{params[:x1]}+#{params[:y1]}"  
  40.            
  41.           img.resize 100 and Dir.chdir avatar_100_100 and img.write photo_name   
  42.           img.resize 64  and Dir.chdir avatar_64_64   and img.write photo_name   
  43.           img.resize 50  and Dir.chdir avatar_50_50   and img.write photo_name   
  44.           img.resize 40  and Dir.chdir avatar_40_40   and img.write photo_name   
  45.         end  
  46.       end  
  47.     end  
  48.   end  

效果预览：

相关视频

    没有数据

相关阅读 jdk不是有效的win32程序怎么办 jdk不是有效的win32程序解决方法java设置cookie教程 java怎么设置cookiejava怎么设置随机数 java设置随机数详细教程java怎么设置光标位置 java设置光标位置教程如何在Mac上清除Java高速缓存?如何在Mac上卸载Java?Mac上怎么卸载Java?OSX 10.11 java 6不兼容问题解决办法如何为Mac更新Java？java mac版更新教程

文章评论
发表评论

热门文章 Wordpress本地安装教程dx1.5如何设置二级域名

最新文章 hbuilder有哪些快捷键Wordpress本地安装教程 Wordpress本地安装教程expression web 4文档乱码解决方法dz 2.5“收藏本版”关闭小对话框无法关闭解在制作安装软件之前,您必须先将易语言存盘,

人气排行 如何使用multipart/form-data格式上传文件Photoshop PS图层混合模式详解(非常详细)ISAPI_Rewrite3使用教程网站里添加收藏和设为首页代码桌面快捷方式图标不见了C#获取执行程序所在的当前路径的方法详解（XMLHttpRequest）进行跨域请求方法如何用远程桌面连接进行传输文件