序一（08/07/21）
很久之前就在一个网站的截取相片的功能中看到这个效果，也叫图片裁剪、图片剪切（设置一下也可以做出放大镜等类似的效果）。
序二（08/12/06）
自上一个版本的图片切割效果出来后，虽然也经常看到“框架开发这个如何如何容易”之类的评论，但也受到很多人的肯定，小弟在此感谢大家的支持。拖放效果 缩放效果 图片切割系统
先看看效果：
图片地址：
程序说明
这个效果主要分三个部分：层的拖放、层的缩放、图片切割（包括预览）。层的拖放 层的缩放
【图片切割】
关于图片切割的设计，有三个方法：
这里介绍方法4的实现方法，这个方法是从当年“珍藏”的代码中看到的，先说说clip：
div
{
position
:
absolute
;
width
:
60px
;
height
:
60px
;
clip
:
rect(0 20 50 10)
;
}
下面说说具体实现原理：
其中为了底图层和切割层是程序自动创建的图片，控制层是自己定义的层（程序中是一个div）。
this
._layBase.style.top
=
this
._layBase.style.left
=
this
._layCropper.style.top
=
this
._layCropper.style.left
=
0
;
下面说说各部分的作用：
这里要注意的是控制层的_drag拖放效果的Transparent要设为true（详细看拖放效果的透明背景bug部分 详细看拖拉缩放效果
下面说说控制层如何控制切割效果：
var
p
=
this
.GetPos();
this
._layCropper.style.clip
=
"
rect(
"
+
p.Top
+
"
px
"
+
(p.Left
+
p.Width)
+
"
px
"
+
(p.Top
+
p.Height)
+
"
px
"
+
p.Left
+
"
px)
"
;
with
(
this
._layHandle){
return
{ Top: offsetTop, Left: offsetLeft, Width: offsetWidth, Height: offsetHeight }
【切割预览】
预览效果需要设置Preview属性为预览容器对象，程序会自动给容器插入一个预览对象（图片）。
var
p
=
this
.GetPos(), s
=
this
.GetSize(p.Width, p.Height,
this
.viewWidth,
this
.viewHeight), scale
=
s.Height
/
p.Height;
Code
var iWidth = nowWidth, iHeight = nowHeight, scale = iWidth / iHeight; // 按比例设置 if (fixHeight){ iWidth = (iHeight = fixHeight) * scale; } if (fixWidth && ( ! fixHeight || iWidth > fixWidth)){ iHeight = (iWidth = fixWidth) / scale; } // 返回尺寸对象 return { Width: iWidth, Height: iHeight }
然后再按预览图跟控制层的比例设置预览图的样式参数：
var
pHeight
=
this
._layBase.height
*
scale, pWidth
=
this
._layBase.width
*
scale, pTop
=
o.Top
*
scale, pLeft
=
o.Left
*
scale;
Code
with ( this ._view.style){ // 设置样式 width = pWidth + " px " ; height = pHeight + " px " ; top = - pTop + " px " ; left = - pLeft + " px " ; // 切割预览图 clip = " rect( " + pTop + " px " + (pLeft + s.Width) + " px " + (pTop + s.Height) + " px " + pLeft + " px) " ;
【图片大小】
容器的大小一般是固定的，但图片的大小就不是固定的，这里又可以使用SetSize程序用来设置图片大小：
Code
var s = this .GetSize( this ._tempImg.width, this ._tempImg.height, this .Width, this .Height); // 设置底图和切割图 this ._layBase.style.width = this ._layCropper.style.width = s.Width + " px " ; this ._layBase.style.height = this ._layCropper.style.height = s.Height + " px " ;
Code
this._drag.mxRight = s.Width; this ._drag.mxBottom = s.Height; if ( this .Resize){ this ._resize.mxRight = s.Width; this ._resize.mxBottom = s.Height; }
【ie6渲染bug】
在拖放效果 缩放效果
Code
<! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transitional//EN " " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " > < html > < body > < div id = " aa " style = " width:300px;height:100px;border:1px solid; " >< div style = " background:#00f;height:100%; " >< / div>< / div > < script > setTimeout( " aa.style.height=200 " , 0 ) < / script> < / body> < / html>
解决这个bug的关键是使里面的div能再渲染，这里有几个方法可以解决：
if
(isIE6){
with
(
this
._layHandle.style){ zoom
=
.
9
; zoom
=
1
; }; };
使用说明
实例化时有三个必要参数：容器对象、控制层、图片地址：
var
ic
=
new
ImgCropper(
"
bgDiv
"
,
"
dragDiv
"
,
"
1.jpg
"
);
程序代码
Code
// 图片切割 var ImgCropper = Class.create(); = { // 容器对象,控制层,图片地址 initialize: function (container, handle, url, options) { this ._Container = $(container); // 容器对象 this ._layHandle = $(handle); // 控制层 this .Url = url; // 图片地址 this ._layBase = this ._Container.appendChild(document.createElement( " img " )); // 底层 this ._layCropper = this ._Container.appendChild(document.createElement( " img " )); // 切割层 this ._layCropper.onload = Bind( this , this .SetPos); // 用来设置大小 this ._tempImg = document.createElement( " img " ); this ._tempImg.onload = Bind( this , this .SetSize); this .SetOptions(options); this .Opacity = Math.round( this .options.Opacity); this .Color = this .options.Color; this .Scale = !! this .options.Scale; this .Ratio = Math.max( this .options.Ratio, 0 ); this .Width = Math.round( this .options.Width); this .Height = Math.round( this .options.Height); // 设置预览对象 var oPreview = $( this .options.Preview); // 预览对象 if (oPreview){ = " relative " ; = " hidden " ; this .viewWidth = Math.round( this .options.viewWidth); this .viewHeight = Math.round( this .options.viewHeight); // 预览图片对象 this ._view = oPreview.appendChild(document.createElement( " img " )); this ._view.style.position = " absolute " ; this ._view.onload = Bind( this , this .SetPreview); // 设置拖放 this ._drag = new Drag( this ._layHandle, { Limit: true , onMove: Bind( this , this .SetPos), Transparent: true }); // 设置缩放 this .Resize = !! this .options.Resize; if ( this .Resize){ var op = this .options, _resize = new Resize( this ._layHandle, { Max: true , onResize: Bind( this , this .SetPos) }); // 设置缩放触发对象 op.RightDown && (_resize.Set(op.RightDown, " right-down " )); && (_resize.Set(op.LeftDown, " left-down " )); && (_resize.Set(op.RightUp, " right-up " )); && (_resize.Set(op.LeftUp, " left-up " )); && (_resize.Set(op.Right, " right " )); && (_resize.Set(op.Left, " left " )); && (_resize.Set(op.Down, " down " )); && (_resize.Set(op.Up, " up " )); // 最小范围限制 this .Min = !! this .options.Min; this .minWidth = Math.round( this .options.minWidth); this .minHeight = Math.round( this .options.minHeight); // 设置缩放对象 this ._resize = _resize; // 设置样式 this ._Container.style.position = " relative " ; this ._Container.style.overflow = " hidden " ; this ._layHandle.style.zIndex = 200 ; this ._layCropper.style.zIndex = 100 ; this ._layBase.style.position = this ._layCropper.style.position = " absolute " ; this ._layBase.style.top = this ._layBase.style.left = this ._layCropper.style.top = this ._layCropper.style.left = 0 ; // 对齐 // 初始化设置 this .Init(); // 设置默认属性 SetOptions: function (options) { this .options = { // 默认值 Opacity: 50 , // 透明度(0到100) Color: "" , // 背景色 Width: 0 , // 图片高度 Height: 0 , // 图片高度 // 缩放触发对象 Resize: false , // 是否设置缩放 Right: "" , // 右边缩放对象 Left: "" , // 左边缩放对象 Up: "" , // 上边缩放对象 Down: "" , // 下边缩放对象 RightDown: "" , // 右下缩放对象 LeftDown: "" , // 左下缩放对象 RightUp: "" , // 右上缩放对象 LeftUp: "" , // 左上缩放对象 Min: false , // 是否最小宽高限制(为true时下面min参数有用) minWidth: 50 , // 最小宽度 minHeight: 50 , // 最小高度 Scale: false , // 是否按比例缩放 Ratio: 0 , // 缩放比例(宽/高) // 预览对象设置 Preview: "" , // 预览对象 viewWidth: 0 , // 预览宽度 viewHeight: 0 // 预览高度 }; this .options, options || {}); // 初始化对象 Init: function () { // 设置背景色 this .Color && ( this ._Container.style.backgroundColor = this .Color); // 设置图片 this ._tempImg.src = this ._layBase.src = this ._layCropper.src = this .Url; // 设置透明 if (isIE){ this ._layBase.style.filter = " alpha(opacity: " + this .Opacity + " ) " ; else { this ._layBase.style.opacity = this .Opacity / 100 ; // 设置预览对象 this ._view && ( this ._view.src = this .Url); // 设置缩放 if ( this .Resize){ with ( this ._resize){ = this .Scale; Ratio = this .Ratio; Min = this .Min; minWidth = this .minWidth; minHeight = this .minHeight; // 设置切割样式 SetPos: function () { // ie6渲染bug if (isIE6){ with ( this ._layHandle.style){ zoom = . 9 ; zoom = 1 ; }; }; // 获取位置参数 var p = this .GetPos(); // 按拖放对象的参数进行切割 this ._layCropper.style.clip = " rect( " + p.Top + " px " + (p.Left + p.Width) + " px " + (p.Top + p.Height) + " px " + p.Left + " px) " ; // 设置预览 this .SetPreview(); // 设置预览效果 SetPreview: function () { if ( this ._view){ // 预览显示的宽和高 var p = this .GetPos(), s = this .GetSize(p.Width, p.Height, this .viewWidth, this .viewHeight), scale = s.Height / p.Height; // 按比例设置参数 var pHeight = this ._layBase.height * scale, pWidth = this ._layBase.width * scale, pTop = p.Top * scale, pLeft = p.Left * scale; // 设置预览对象 with ( this ._view.style){ // 设置样式 width = pWidth + " px " ; height = pHeight + " px " ; top = - pTop + " px " ; left = - pLeft + " px " ; // 切割预览图 clip = " rect( " + pTop + " px " + (pLeft + s.Width) + " px " + (pTop + s.Height) + " px " + pLeft + " px) " ; // 设置图片大小 SetSize: function () { var s = this .GetSize( this ._tempImg.width, this ._tempImg.height, this .Width, this .Height); // 设置底图和切割图 this ._layBase.style.width = this ._layCropper.style.width = s.Width + " px " ; this ._layBase.style.height = this ._layCropper.style.height = s.Height + " px " ; // 设置拖放范围 this ._drag.mxRight = s.Width; this ._drag.mxBottom = s.Height; // 设置缩放范围 if ( this .Resize){ this ._resize.mxRight = s.Width; this ._resize.mxBottom = s.Height; } // 获取当前样式 GetPos: function () { with ( this ._layHandle){ return { Top: offsetTop, Left: offsetLeft, Width: offsetWidth, Height: offsetHeight } // 获取尺寸 GetSize: function (nowWidth, nowHeight, fixWidth, fixHeight) { var iWidth = nowWidth, iHeight = nowHeight, scale = iWidth / iHeight; // 按比例设置 if (fixHeight){ iWidth = (iHeight = fixHeight) * scale; } if (fixWidth && ( ! fixHeight || iWidth > fixWidth)){ iHeight = (iWidth = fixWidth) / scale; } // 返回尺寸对象 return { Width: iWidth, Height: iHeight }
完整实例下载
文章原地址
http://www.cnblogs.com/cloudgamer/archive/2008/07/21/1247267.html
Code
