JavaScript 图片切割效果(放大镜)第3/4页

图片大小

容器的大小一般是固定的，但图片的大小就不是固定的，这里又可以使用SetSize程序用来设置图片大小：

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; }

ps：程序中的Init程序是用来把个性设置呈现出来，所以一般设置过属性之后（例如图片地址、透明度等）就执行一次Init程序就可以显示效果了。

使用说明

实例化时有三个必要参数：容器对象、控制层、图片地址：
var ic = new ImgCropper("bgDiv", "dragDiv", "1.jpg");

有以下这些可选参数和属性：

属性:默认值//说明
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//预览高度

最新评论