利用jquery插件的图片剪切上传功能

花了一天多的时间终于搞好了，贴出来，分享一下

 

为了使用户能自定义个人头像，需要提供一个对上传图片的截图功能，当前很多网站特别是SNS类网站都提供这样的功能，非常实用。主要实现的形式有两种，一种是flash截图，另一种就是javascript截图，两种方法各有秋千，关于Flash截图可以参考一下UcHome程序中头像上传功能，但这不是我要讨论的话题，我这里主要是如何实现javascript截图，利用jQuery的imgAreaSelect插件，轻松实现自定义头像[avatar]javascript截图功能

 

首先，利用的是jquery上传剪切插件imgAreaSelect

官方下载地址：http://odyniec.net/projects/imgareaselect/ 

加压后里面有两个js文件

一个是jquery.min.js  另一个是 jquery.imgareaselect.js

将这两个js文件引入到项目中去

 

其次，在文件中要加入javascript代码

 

//预览显示

    function preview(img, selection){ 

   var scaleX = 100 / (selection.width || 1); 

   var scaleY = 100 / (selection.height || 1); 

    

   //动态小头像 获取当前选中框的宽度，高度，左边框，右边框 

   $('#view').css({                          //view是预览图像的id

   width: Math.round(scaleX * 300) + 'px', 

   height: Math.round(scaleY * 220) + 'px', 

   marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px', 

   marginTop: '-' + Math.round(scaleY * selection.y1) + 'px' 

   }); 

    } 

 

    //加载小头像 

    $(document).ready(function () { 

   $('<div><img id="view" src="bee.jpg" style="position: relative;" /></div>') 

   .css({ 

   float: 'left', 

   position: 'relative', 

   overflow: 'hidden', 

   width: '100px', 

   height: '100px' 

   }) 

   .insertAfter('#biuuu'); //把新建元素放到 #biuuu 之后

   //.insertAfter($('#biuuu')); //把新建元素放到 #biuuu 之后

    }); 

 

    //初始化加载 

    $(window).load(function () { 

   $('#biuuu').imgAreaSelect({ 

   aspectRatio: '1:1',  //截取比例

   //show:true,

   //resizable:false, //是否可调整大小

   autoHide: false,//选择框选择完毕是否自己取消 

   key:true, //是否启用键盘，默认为false

   //x1: 75, y1: 30, x2: 225, y2: 180, //需要处理的区域，原始的

   //x1:左上角x轴坐标 y1:左上角y轴坐标 x2:右下角x轴坐标 y2:右下角y轴坐标

   keys: { arrows: 1, ctrl: 5, shift: 'resize' }, //调整像素大小

   

   //onInit: function(img, selection) { ias.setSelection(100, 50, 250, 150, true); ias.update(); }, //设置初始函数 画出选择框 

   onSelectChange: preview , //选框移动时触发的事件

   onSelectEnd: getLocation  //选框结束时触发的事件

   

   });

});

 

上述的详细参数配置在官网上也有，自己去查阅

 

最后，在文件中使用

<div>

    <img id="biuuu" src="bee.jpg" title="biuuu" width="320px" height="220px" style="float: left; margin-right: 10px;"/> 

    <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />

</div>

 

说明：1.利用插件很容易做出来剪切预览效果，可是让我纠结了半天是：生成的预览图如何上传呀，在网上找了一段代码，发现只要是上传图片的大小不同，那么生成的图也不同，后来想想是缩放比例的问题。也就是说要实际图像的大小和在页面显示的大小是不一样的，被缩放了，那么在后台上传剪切图像的时候，我们必须要还原原来图像的大小，并把要剪切的部分也相应的要放大或缩小

代码：

System.Drawing.Image sourceImage = System.Drawing.Image.FromFile(Server.MapPath("bee.jpg"));

        int height = Convert.ToInt32(sourceImage.Height);//获取原始图像的高

        int width = Convert.ToInt32(sourceImage.Width);//获取原始图像的宽度

 

        x1 = x1*(width/320);//根据实际尺寸缩放

        x2 = x2*(width/320);

 

        y1 = y1*(height/240);

        y2 = y2*(height/240);

 

 

未解决动态头像的功能，这是插件本身的问题

 

评论

4 楼 xiaobadi 2012-04-16  

不错~~~~~~~~~~

3 楼 superxielei 2012-04-13  

插件不错。

2 楼 guofc201007 2011-10-13  

同求，我用的java开发，不知道服务端怎么获取到这个文件

1 楼 allstar2012 2011-08-30  

麻烦给说说 裁剪后的图像如何保存为图片呢 小弟我不胜感激