基于jQuery HttpHandler实现图片剪辑效果的代码(适用于论坛、SNS)

正文：为了层次清晰易读，整个解决方案如下： 。

其中BitmapCutter。Core是图片的服务器端处理器，类图是： 。

在简单的描述下，可以找到更多的描述。注意：Cutter是一个裁剪对象，用于存储客户端通过AJAX提交的数据。Helper是一个图像处理类，包括图像翻转(RotateImage())和图像裁剪(GenerateBitmap())。回调是服务器端图像处理类。使用Cutter封装客户端AJAX提交的数据，然后调用Helper中的方法完成图片处理。bitmap剪刀是一个HttpHandler，它通过客户端返回的“action”调用Callback中的方法：。

这里注意：反射是根据‘action’的值动态调用Callback中的方法。如果你不习惯或者觉得不合适，请自己改.客户端AJAX提交的Url是‘剪刀. axd’，实际上是bitmap剪刀类(如果修改服务器端处理程序，请在Web.config中根据实际情况配置httpHandler节点)。在这个例子中，它是3360 。

好了，开始介绍重点吧。$ .fn.bitmapcutter插件实现：首先，来到最后的渲染，在bitmapcutter中标记Dom对象。嗯，喜欢刚大木的粉丝很多，来张洛昂的3360 吧。

解释：holder是原始图像承载容器。当原始图像太大时，只能显示一部分，非显示区域的图像可以通过平移来查看。holder是div，位置样式是相对的。因此，当原始图像img(两个img对象)的位置样式是绝对的时，您可以控制其左侧。顶值，注意holder的溢出必须设置为隐藏，这样img会被holder包裹，超出holder边界的img会被隐藏。cutter是裁剪框，可以拖动选择你敢感兴趣的裁剪区域，拖动区域在holder容器中。同时，缩略图。opts-功能区将在缩略图img中生成(原理与holder img相同)，并提供所有可用的功能按钮，包括：放大、缩小、向左移动、向右移动、向上移动、向下移动、恢复、向左旋转和向右旋转。信息图片像素。用于显示当前被截取图片的长宽比。原则：应该很容易看出你是否熟悉css，利用相对定位和js的灵活性来控制css。插件说明：既然插件代码很多，我们就重点介绍：1。全局变量： 。

由于一些数据和jQuery对象在整个裁剪过程中被频繁使用，因此定义了一个全局变量来存储的原始图像的像素。$originalSize:这是第一次加载原始图像时获得的，不能更改。它主要提供一对基础数据(长度和宽度)，用于放大、缩小和恢复。$ zoomValue:当前缩放比例。同步的缩略图的jQuery对象。$ Thumbimg3360剪辑区域在放大或缩小时，将。$img:原始jQuery对象。创建dom时的$切割器3360剪辑区域，并在创建dom时获取它。2.插件：为了方便图像的控制，还编写了几个附加插件。如果学生使用量大，-) $.fn.f:用于获取jQuery对象的样式值，如宽度、高度、左侧。顶部。$.fn.loadBitmap:用于预加载图片以获得正确的像素。$.fn.scaleBitmap:用于缩放图片.缩放比例来自全局变量$zoomValue。$.fn.dragndrop:我上一个插件的定制版，$ . fn . drag .它主要用于在特定元素中拖放dom对象。3.API : $。fn。Bitmap Cutter的API包括： src(String):要裁剪的图片的路径(相对于程序的主目录)，默认为空，必须为。Renderto(字符串(选择器)| jQuery对象): Bitmap Cutter插件容器，jQuery对象或选择器，默认值为$ (document。body)，holders size(object): Holder对象的大小，包括宽度和高度，默认值为{width: 300，height : 400}，cutter size (object) :是cutter对象的大小(生成的头像大小)，包括宽度和高度，默认值为{ width: 70，Height : 70}，缩放步长(float) :每次缩放的比例变化幅度，默认值为0.2RotateAngle(Int):画面翻转角度，可取90、180、-90、-180，默认值为90；movetop (int) :平移像素当原始图片被平移时，默认值为100；on generated(函数):在成功生成头像时触发事件。BitmapCutter将参数“src”传递给此方法，该参数指示新剪辑生成的头像的路径。这个属性的默认值是function (src) {}，lang (object) :函数区每个按钮的工具提示，lang : zoomut(String):的API放大。默认值为“缩小”，zoomin(String):缩小，默认值为“放大”，original(String):为原始大小，默认值为“原始大小”，顺时针(String):为顺时针旋转。默认值为“顺时针旋转({0}度)”，它需要包含{0}，以便在格式化时可以用rotateAngle值填充。逆时针(字符串):逆时针旋转。默认值为“逆时针旋转({0}度)”。{0}需要在格式化时填充rotateAngle值，生成(String):生成头像，默认值为“生成！”。生成头像时process(String):提示。默认值为“请稍候，事务正在处理中.”，左(字符串):左平移，默认值“左”，右(字符串):右平移，默认值“右”。向上(字符串):上移，默认值‘向上’，向下(字符串):下移，默认值‘向下’API原型为： 。

4.开发技巧：为了方便代码管理和功能优化，对功能进行了总结，大致可以分为：缩放):细分为放大和缩小，旋转):细分为顺时针和逆时针。Move):细分为上|右|下|左平移。因此，直接编写了三个“基类”(具体实现参见源代码)。 izoom(zv):提供放大或缩小图片的功能，zv是当前缩放比例，irotate(angle):提供图片旋转的功能，而angle是当前旋转角度。Imove(direction):提供原图平移功能，方向为移动方向，包括‘左’、‘上’、‘右’、‘下’。现在需要的是细分每个函数： 。

在这里，我使用一个对象剪刀来封装这些操作，并调用“inherit”。当然，您也可以使用“模拟”或“原型链”来实现这些操作。这样，当绑定这些方法时，您可以

5.问问自己为什么Q:要在服务器端轮换。A:流行，兼容浏览器，所以我放弃了滤镜和Canvas等其他图像处理软件。Q: Photoshop，都实现了裁切时的反效果。为什么不呢？A:我觉得一个程序在考虑UI的时候也要考虑效率。如果实现了反转，需要在刀具对象中内置一个img来与拇指img同步，所以旋转图像时内存的积累很可怕。Q:与Flash、Siverlight相比，这样的东西有什么优势？A:其实我本来打算用Flash的，但是考虑到普及的问题(多少。Net开发人员将作为？)，jQuery HttpHandler是个不错的选择，开放API，开放源代码，我觉得这远比让大家换个. fla要轻松愉快得多。Q:A:众所周知，浏览器缓存是一把双刃剑，在bitmapCutter中非常烦人。为了在旋转后刷新图像，我们只能在img(随机数？时间？无论什么.)，但这会带来一个不可避免的结果——浏览器内存积累(目前，这种威胁已经被最小化；-))，金额[emailprotected]#$%6。注意gif类型的图片没有经过特殊处理，所以只检索第一帧进行处理，生成的头像格式为Png。如有必要，修改源代码的尾部方法。jquery . bitmapcutor . js模拟c# string.format，必须支持键盘操作。箭头键控制平移，-控制放大。如果您不喜欢，可以从源代码中删除. 7.demo中的简单示例。用C.C .图捕捉头像。设置捕捉框的长宽为1203360120，容器为以id为容器的div，每次旋转角度为90。顺时针旋转功能按钮的提示是“顺时针旋转{0}度”。。

效果：

8.源代码包(很多测试图片):/201109/马援/位图cutter _ jb51.rar。