jQuery + HttpHandler 实现图片裁剪(适用于论坛, SNS)

核心提示： info - 图片相素, 用于显示当前待截取图片的宽高比.原理:熟悉css的话应该很容易看出来, 利用相对定位的灵活性和js对css的控制.插件说明:由于插件的代码比较多, 这里就拣重点的讲了:1. 全局变量: 由于在整个裁剪过程中会频繁的使用一些数据和jQuery对象, 所以定义了一个全

info - 图片相素, 用于显示当前待截取图片的宽高比.

原理:

熟悉css的话应该很容易看出来, 利用相对定位的灵活性和js对css的控制.

插件说明:

由于插件的代码比较多, 这里就拣重点的讲了:

1. 全局变量:

由于在整个裁剪过程中会频繁的使用一些数据和jQuery对象, 所以定义了一个全局变量用来存储.

$originalSize: 原图的相素, 在首次加载原图时获取, 不可改变, 主要是为放大, 缩小和还原提供一对基础数据(长,宽).

$zoomValue: 当前缩放比, 在执行放大或缩小时同步.

$thumbimg: 裁剪区域缩略图的jQuery对象, 在该dom被创建时赋值.

$img: 原图jQuery对象, 在该dom被创建时获取.

$cutter: 裁剪区域, 同样在dom被创建时获取.

2. 插件:

为了方便图象的控制, 同样编写了几个附加插件, 如果同学们在使用中有重名的请设法避免 ;-)

$.fn.f: 用于获取jQuery对象的样式值, 例如width, height, left, top等.

$.fn.loadBitmap: 用于预载入图片以获取正确的相素.

$.fn.scaleBitmap: 用于缩放图片..缩放比率来自全局变量$zoomValue.

$.fn.dragndrop: 我的上一个插件$.fn.Drags的定制版, 主要是为了实现某一dom对象在特定元素内的拖拽.

3. API:

$.fn.bitmapCutter的API包括:

src(String): 待裁剪图片的路径(相对于程序主目录), 默认为空, 必须,

renderTo(String(Selector)|jQuery Object): bitmapCutter插件容器, jQuery对象或选择器, 默认为$(document.body),