很棒的在线裁图工具jQuery1.4.2 + jquery.bitmapcutter.js + BitmapCutter.Core+的完美配合

做网站应用,特别是与照片相关的应用,经常需要用到图片裁剪,而系统代替客户进行裁剪通常不能完全符客户端的审美要求,由客户端用户DIY的裁剪是大势所趋。

我们一般的流程如下:

很棒的在线裁图工具jQuery1.4.2 + jquery.bitmapcutter.js + BitmapCutter.Core+的完美配合

首先介绍一下 jquery.bitmapcutter该插件由Jericho开发,链接:http://gplv3.fsf.org/,它的主要作用是客户端裁图,效果如下:

很棒的在线裁图工具jQuery1.4.2 + jquery.bitmapcutter.js + BitmapCutter.Core+的完美配合

该图的下半部分是jquery.bitmapcutter效果,上边是另外一个上传插件。到这一步,我们需要做以下这些事情:

1:引入jquery库

<script language="javascript" type="text/javascript" src="/js/jquery1.4.2.min.js"></script>

2:引入jquery.bitmapcutter库及其相关样式

<script type="text/javascript" src="/javascript/jquery.bitmapcutter.js"></script>
<link rel="Stylesheet" type="text/css" href="/css/jquery.bitmapcutter.css" />

3:确保你的网页中有一个装下该插件的容器:

< div  id ="container" ></ div >

 

及一段裁剪的初始化JS代码:(该函数并非裁剪的核心代码,在我的应用中,是点击某个上传好的大图便触发此方法,裁好后,小图便替换大图的位置)

View Code
< script type = " text/javascript " >
// 照片裁剪代码
//src:原始大图的路径
//width:目标宽
//height:目标高
//returnControl裁完以后,用于显示小图片的元素ID 
function  cutter(src,width,height,returnControl){
    $(
" #container " ).html( '' );           
    src
= src.replace( / http\:\/\/([\w\W]*?)\/ / g, "" ); // 去除http://XXXX/               
    $.fn.bitmapCutter({
                    src: src,
                    renderTo: 
' #container ' ,
                    cutterSize: { width: width, height: height },
                    onGenerated: 
function (newSrc) { // 裁完并保存后返回保存后图片地址
                        $( ' # '   +  returnControl)[ 0 ].src = newSrc; 
                    
                           //.......
                        $(
" #container " ).html( '' );
                    },
                    rotateAngle: 
90 ,
                    lang: {clockwise:
' 顺时针旋转{0}度. ' }
                });                
}
< / script>

 注意,在这个插件中点击"开始裁切"后,它会裁切前上传,再返回小图的SRC,这里就涉及了上传插件的对接,这个插件名叫 BitmapCutter.Core,这是由国内一位工程师写的,当然如果你觉得不爽,你也可以定义自己的上传插件,不过我要提醒大家的是重写这些代码的代价是否划算。代码我就不再一一说明了,上传到此,各位自行下载

请注意在jquery.bitmapcutter.js第423行

$.get('scissors.axd',{.....

 这里给出了上传的路径,需要到web.config中做映射处理:

映射处理在Web.config中System.Web节:

<system.web>
   <httpHandlers>
   <add path="scissors.axd" verb="*" type="BitmapCutter.Core.HttpHandler.BitmapScissors,BitmapCutter.Core" validate="false"/>
  </httpHandlers> 

httpHandlers元素说明参见:http://msdn.microsoft.com/zh-cn/library/bya7fh0a(VS.80).aspx

要做到这些,我们需要做以下工作:

1.在你的项目中引用BitmapCutter.Core.dll

2.修改Web.config中的System.Web节

 

好了,所有的工作大概有5步,其中客户端3步,服务器端2步,我们来看一下最后裁剪出来的效果:

很棒的在线裁图工具jQuery1.4.2 + jquery.bitmapcutter.js + BitmapCutter.Core+的完美配合

不要小看这件工作,大图有近2M,而小图只有30多K,用于列表的时候,速度优势还是相当明显的,当然这只是我的测试,不同的文件,不同的裁剪尺寸设置可能结果会有所不同.

JS代码包在此:js.rar

注意事项:

1:缩略图的文件夹必须要有

2:为适应新版jQuery,本JS版本较网上的其它版本有较大修改,使用网上其它的版本,将有可能无法正常使用

应朋友要求发出一个打包的DEMO:CutterDemo.rar

该DEMO已测.

你可能感兴趣的:(jquery)