JS 滤镜切割图片效果。

请自己找一张图放在同级目录下图名1。JPG 也可以自己改图文件路径~~
次文非原创！而且从一开始就归分在转贴中，留脚印时请直接看清模式。

注：个人收藏只为自己学习用。参观请勿带有色语言。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title> 图片切割效果</title>
</head>
<body>

var $ = function (id) {
return "string" == typeof id ? document.getElementById(id) : id;
};

var isIE = (document.all) ? true : false;

var Class = {
create: function() {
    return function() {
      this.initialize.apply(this, arguments);
    }
}
}

Object.extend = function(destination, source) {
    for (var property in source) {
        destination[property] = source[property];
    }
    return destination;
}

//拖放程序
var Drag = Class.create();
Drag.prototype = {
//拖放对象,触发对象
initialize: function(obj, drag, options) {
    var oThis = this;

   this._obj = $(obj);//拖放对象
   this.Drag = $(drag);//触发对象
   this._x = this._y = 0;//记录鼠标相对拖放对象的位置
   //事件对象(用于移除事件)
   this._fM = function(e){ oThis.Move(window.event || e); }
   this._fS = function(){ oThis.Stop(); }

   this.SetOptions(options);

   this.Limit = !!this.options.Limit;
   this.mxLeft = parseInt(this.options.mxLeft);
   this.mxRight = parseInt(this.options.mxRight);
   this.mxTop = parseInt(this.options.mxTop);
   this.mxBottom = parseInt(this.options.mxBottom);

   this.onMove = this.options.onMove;

   this._obj.style.position = "absolute";
   addEventHandler(this.Drag, "mousedown", function(e){ oThis.Start(window.event || e); });
},
//设置默认属性
SetOptions: function(options) {
    this.options = {//默认值
       Limit:       false,//是否设置限制(为true时下面参数有用,可以是负数)
       mxLeft:       0,//左边限制
       mxRight:   0,//右边限制
       mxTop:       0,//上边限制
       mxBottom:   0,//下边限制
       onMove:       function(){}//移动时执行
    };
    Object.extend(this.options, options || {});
},
//准备拖动
Start: function(oEvent) {
   //记录鼠标相对拖放对象的位置
   this._x = oEvent.clientX - this._obj.offsetLeft;
   this._y = oEvent.clientY - this._obj.offsetTop;
   //mousemove时移动 mouseup时停止
   addEventHandler(document, "mousemove", this._fM);
   addEventHandler(document, "mouseup", this._fS);
   //使鼠标移到窗口外也能释放
   if(isIE){
       addEventHandler(this.Drag, "losecapture", this._fS);
       this.Drag.setCapture();
   }else{
       addEventHandler(window, "blur", this._fS);
   }
},
//拖动
Move: function(oEvent) {
   //清除选择(ie设置捕获后默认带这个)
   window.getSelection && window.getSelection().removeAllRanges();
   //当前鼠标位置减去相对拖放对象的位置得到offset位置
   var iLeft = oEvent.clientX - this._x, iTop = oEvent.clientY - this._y;
   //设置范围限制
   if(this.Limit){
       //获取超出长度
       var iRight = iLeft + this._obj.offsetWidth - this.mxRight, iBottom = iTop + this._obj.offsetHeight - this.mxBottom;
       //这里是先设置右边下边再设置左边上边,可能会不准确
       if(iRight > 0) iLeft -= iRight;
       if(iBottom > 0) iTop -= iBottom;
       if(this.mxLeft > iLeft) iLeft = this.mxLeft;
       if(this.mxTop > iTop) iTop = this.mxTop;
   }
   //设置位置
   this._obj.style.left = iLeft + "px";
   this._obj.style.top = iTop + "px";
   //附加程序
   this.onMove();
},
//停止拖动
Stop: function() {
   //移除事件
   removeEventHandler(document, "mousemove", this._fM);
   removeEventHandler(document, "mouseup", this._fS);
   if(isIE){
       removeEventHandler(this.Drag, "losecapture", this._fS);
       this.Drag.releaseCapture();
   }else{
       removeEventHandler(window, "blur", this._fS);
   }
}
};

//缩放程序
var Resize = Class.create();
Resize.prototype = {
//缩放对象
initialize: function(obj, options) {
    var oThis = this;

   this._obj = $(obj);//缩放对象
   this._right = this._down = this._left = this._up = 0;//坐标参数
   this._scale = 1;//比例参数
   this._touch = null;//当前触发对象

   //用currentStyle（ff用getComputedStyle）取得最终样式
   var _style = this._obj.currentStyle || document.defaultView.getComputedStyle(this._obj, null);
   this._xBorder = parseInt(_style.borderLeftWidth) + parseInt(_style.borderRightWidth);
   this._yBorder = parseInt(_style.borderTopWidth) + parseInt(_style.borderBottomWidth);

   //事件对象(用于移除事件)
   this._fR = function(e){ oThis.Resize(e); }
   this._fS = function(){ oThis.Stop(); }

   this.SetOptions(options);

   this.Limit = !!this.options.Limit;
   this.mxLeft = parseInt(this.options.mxLeft);
   this.mxRight = parseInt(this.options.mxRight);
   this.mxTop = parseInt(this.options.mxTop);
   this.mxBottom = parseInt(this.options.mxBottom);

   this.MinWidth = parseInt(this.options.MinWidth);
   this.MinHeight = parseInt(this.options.MinHeight);
   this.Scale = !!this.options.Scale;
   this.onResize = this.options.onResize;

   this._obj.style.position = "absolute";
},
//设置默认属性
SetOptions: function(options) {
    this.options = {//默认值
       Limit:       false,//是否设置限制(为true时下面mx参数有用)
       mxLeft:       0,//左边限制
       mxRight:   0,//右边限制
       mxTop:       0,//上边限制
       mxBottom:   0,//下边限制
       MinWidth:   50,//最小宽度
       MinHeight:   50,//最小高度
       Scale:       false,//是否按比例缩放
       onResize:   function(){}//缩放时执行
    };
    Object.extend(this.options, options || {});
},
//设置触发对象
Set: function(resize, side) {
   var oThis = this, resize = $(resize), _fun, _cursor;
   if(!resize) return;
   //根据方向设置 _fun是缩放时执行的程序 _cursor是鼠标样式
   switch (side.toLowerCase()) {
   case "up" :
       _fun = function(e){ if(oThis.Scale){ oThis.scaleUpRight(e); }else{ oThis.SetUp(e); } };
       _cursor = "n-resize";
       break;
   case "down" :
       _fun = function(e){ if(oThis.Scale){ oThis.scaleDownRight(e); }else{ oThis.SetDown(e); } };
       _cursor = "n-resize";
       break;
   case "left" :
       _fun = function(e){ if(oThis.Scale){ oThis.scaleLeftUp(e); }else{ oThis.SetLeft(e); } };
       _cursor = "e-resize";
       break;
   case "right" :
       _fun = function(e){ if(oThis.Scale){ oThis.scaleRightDown(e); }else{ oThis.SetRight(e); } };
       _cursor = "e-resize";
       break;
   case "left-up" :
       _fun = function(e){ if(oThis.Scale){ oThis.scaleLeftUp(e); }else{ oThis.SetLeft(e); oThis.SetUp(e); } };
       _cursor = "nw-resize";
       break;
   case "right-up" :
       _fun = function(e){ if(oThis.Scale){ oThis.scaleRightUp(e); }else{ oThis.SetRight(e); oThis.SetUp(e); } };
       _cursor = "ne-resize";
       break;
   case "left-down" :
       _fun = function(e){ if(oThis.Scale){ oThis.scaleLeftDown(e); }else{ oThis.SetLeft(e); oThis.SetDown(e); } };
       _cursor = "ne-resize";
       break;
   case "right-down" :
   default :
       _fun = function(e){ if(oThis.Scale){ oThis.scaleRightDown(e); }else{ oThis.SetRight(e); oThis.SetDown(e); } };
       _cursor = "nw-resize";
   }
   //设置触发对象
   resize.style.cursor = _cursor;
   addEventHandler(resize, "mousedown", function(e){ oThis._fun = _fun; oThis._touch = resize; oThis.Start(window.event || e); });
},
//准备缩放
Start: function(oEvent, o) {
   //防止冒泡
   if(isIE){ oEvent.cancelBubble = true; } else { oEvent.stopPropagation(); }
   //计算样式初始值
   this.style_width = this._obj.offsetWidth;
   this.style_height = this._obj.offsetHeight;
   this.style_left = this._obj.offsetLeft;
   this.style_top = this._obj.offsetTop;
   //设置缩放比例
   if(this.Scale){ this._scale = this.style_width / this.style_height; }
   //计算当前边的对应另一条边的坐标例如右边缩放时需要左边界坐标
   this._left = oEvent.clientX - this.style_width;
   this._right = oEvent.clientX + this.style_width;
   this._up = oEvent.clientY - this.style_height;
   this._down = oEvent.clientY + this.style_height;
   //如果有范围先计算好范围内最大宽度和高度
   if(this.Limit){
       this._mxRight = this.mxRight - this._obj.offsetLeft;
       this._mxDown = this.mxBottom - this._obj.offsetTop;
       this._mxLeft = this.mxLeft + this.style_width + this._obj.offsetLeft;
       this._mxUp = this.mxTop + this.style_height + this._obj.offsetTop;
   }
   //mousemove时缩放 mouseup时停止
   addEventHandler(document, "mousemove", this._fR);
   addEventHandler(document, "mouseup", this._fS);

   //使鼠标移到窗口外也能释放
   if(isIE){
       addEventHandler(this._touch, "losecapture", this._fS);
       this._touch.setCapture();
   }else{
       addEventHandler(window, "blur", this._fS);
   }
},
//缩放
Resize: function(e) {
   //没有触发对象的话返回
   if(!this._touch) return;
   //清除选择(ie设置捕获后默认带这个)
   window.getSelection && window.getSelection().removeAllRanges();
   //执行缩放程序
   this._fun(window.event || e);
   //设置样式
   //因为计算用的offset是把边框算进去的所以要减去
   this._obj.style.width = this.style_width - this._xBorder + "px";
   this._obj.style.height = this.style_height - this._yBorder + "px";
   this._obj.style.top = this.style_top + "px";
   this._obj.style.left = this.style_left + "px";
   //附加程序
   this.onResize();
},
//普通缩放
//右边
SetRight: function(oEvent) {
   //当前坐标位置减去左边的坐标等于当前宽度
   this.repairRight(oEvent.clientX - this._left);
},
//下边
SetDown: function(oEvent) {
   this.repairDown(oEvent.clientY - this._up);
},
//左边
SetLeft: function(oEvent) {
   //右边的坐标减去当前坐标位置等于当前宽度
   this.repairLeft(this._right - oEvent.clientX);
},
//上边
SetUp: function(oEvent) {
   this.repairUp(this._down - oEvent.clientY);
},
//比例缩放
//比例缩放右下
scaleRightDown: function(oEvent) {
   //先计算宽度然后按比例计算高度最后根据确定的高度计算宽度（宽度优先）
   this.SetRight(oEvent);
   this.repairDown(parseInt(this.style_width / this._scale));
   this.repairRight(parseInt(this.style_height * this._scale));
},
//比例缩放左下
scaleLeftDown: function(oEvent) {
   this.SetLeft(oEvent);
   this.repairDown(parseInt(this.style_width / this._scale));
   this.repairLeft(parseInt(this.style_height * this._scale));
},
//比例缩放右上
scaleRightUp: function(oEvent) {
   this.SetRight(oEvent);
   this.repairUp(parseInt(this.style_width / this._scale));
   this.repairRight(parseInt(this.style_height * this._scale));
},
//比例缩放左上
scaleLeftUp: function(oEvent) {
   this.SetLeft(oEvent);
   this.repairUp(parseInt(this.style_width / this._scale));
   this.repairLeft(parseInt(this.style_height * this._scale));
},
//这里是高度优先用于上下两边(体验更好)
//比例缩放下右
scaleDownRight: function(oEvent) {
   this.SetDown(oEvent);
   this.repairRight(parseInt(this.style_height * this._scale));
   this.repairDown(parseInt(this.style_width / this._scale));
},
//比例缩放上右
scaleUpRight: function(oEvent) {
   this.SetUp(oEvent);
   this.repairRight(parseInt(this.style_height * this._scale));
   this.repairUp(parseInt(this.style_width / this._scale));
},
//修正程序
//修正右边
repairRight: function(iWidth) {
   //右边和下边只要设置宽度和高度就行
   //当少于最少宽度
   if (iWidth < this.MinWidth){ iWidth = this.MinWidth; }
   //当超过当前设定的最大宽度
   if(this.Limit && iWidth > this._mxRight){ iWidth = this._mxRight; }
   //修改样式
   this.style_width = iWidth;
},
//修正下边
repairDown: function(iHeight) {
   if (iHeight < this.MinHeight){ iHeight = this.MinHeight; }
   if(this.Limit && iHeight > this._mxDown){ iHeight = this._mxDown; }
   this.style_height = iHeight;
},
//修正左边
repairLeft: function(iWidth) {
   //左边和上边比较麻烦因为还要计算left和top
   //当少于最少宽度
   if (iWidth < this.MinWidth){ iWidth = this.MinWidth; }
   //当超过当前设定的最大宽度
   else if(this.Limit && iWidth > this._mxLeft){ iWidth = this._mxLeft; }
   //修改样式
   this.style_width = iWidth;
   this.style_left = this._obj.offsetLeft + this._obj.offsetWidth - iWidth;
},
//修正上边
repairUp: function(iHeight) {
   if(iHeight < this.MinHeight){ iHeight = this.MinHeight; }
   else if(this.Limit && iHeight > this._mxUp){ iHeight = this._mxUp; }
   this.style_height = iHeight;
   this.style_top = this._obj.offsetTop + this._obj.offsetHeight - iHeight;
},
//停止缩放
Stop: function() {
   //移除事件
   removeEventHandler(document, "mousemove", this._fR);
   removeEventHandler(document, "mouseup", this._fS);
   if(isIE){
       removeEventHandler(this._touch, "losecapture", this._fS);
       this._touch.releaseCapture();
   }else{
       removeEventHandler(window, "blur", this._fS);
   }
   this._touch = null;
}
};

//图片切割
var ImgCropper = Class.create();
ImgCropper.prototype = {
//容器对象,拖放缩放对象,图片地址,宽度,高度
initialize: function(container, drag, url, width, height, options) {
   var oThis = this;

   //容器对象
   this.Container = $(container);
   this.Container.style.position = "relative";
   this.Container.style.overflow = "hidden";

   //拖放对象
   this.Drag = $(drag);
   this.Drag.style.cursor = "move";
   this.Drag.style.zIndex = 200;
   if(isIE){
       //设置overflow解决ie6的渲染问题(缩放时填充对象高度的问题)
       this.Drag.style.overflow = "hidden";
       //ie下用一个透明的层填充拖放对象不填充的话onmousedown会失效(未知原因)
       (function(style){
           style.width = style.height = "100%"; style.backgroundColor = "#fff"; style.filter = "alpha(opacity:0)";
       })(this.Drag.appendChild(document.createElement("div")).style)
   }

   this._pic = this.Container.appendChild(document.createElement("img"));//图片对象
   this._cropper = this.Container.appendChild(document.createElement("img"));//切割对象
   this._pic.style.position = this._cropper.style.position = "absolute";
   this._pic.style.top = this._pic.style.left = this._cropper.style.top = this._cropper.style.left = "0";//对齐
   this._cropper.style.zIndex = 100;
   this._cropper.onload = function(){ oThis.SetPos(); }

   this.Url = url;//图片地址
   this.Width = parseInt(width);//宽度
   this.Height = parseInt(height);//高度

   this.SetOptions(options);

   this.Opacity = parseInt(this.options.Opacity);
   this.dragTop = parseInt(this.options.dragTop);
   this.dragLeft = parseInt(this.options.dragLeft);
   this.dragWidth = parseInt(this.options.dragWidth);
   this.dragHeight = parseInt(this.options.dragHeight);

   //设置预览对象
   this.View = $(this.options.View) || null;//预览对象
   this.viewWidth = parseInt(this.options.viewWidth);
   this.viewHeight = parseInt(this.options.viewHeight);
   this._view = null;//预览图片对象
   if(this.View){
       this.View.style.position = "relative";
       this.View.style.overflow = "hidden";
       this._view = this.View.appendChild(document.createElement("img"));
       this._view.style.position = "absolute";
   }

   this.Scale = parseInt(this.options.Scale);

   //设置拖放
   this._drag = new Drag(this.Drag, this.Drag, { Limit: true, onMove: function(){ oThis.SetPos(); } });
   //设置缩放
   this._resize = this.GetResize();

   this.Init();
},
//设置默认属性
SetOptions: function(options) {
    this.options = {//默认值
       Opacity:   50,//透明度(0到100)
       //拖放位置和宽高
       dragTop:   0,
       dragLeft:   0,
       dragWidth:   100,
       dragHeight:   100,
       //缩放触发对象
       Right:       "",
       Left:       "",
       Up:           "",
       Down:       "",
       RightDown:   "",
       LeftDown:   "",
       RightUp:   "",
       LeftUp:       "",
       Scale:       false,//是否按比例缩放
       //预览对象设置
       View:   "",//预览对象
       viewWidth:   100,//预览宽度
       viewHeight:   100//预览高度
    };
    Object.extend(this.options, options || {});
},
//初始化对象
Init: function() {
   var oThis = this;

   //设置容器
   this.Container.style.width = this.Width + "px";
   this.Container.style.height = this.Height + "px";

   //设置拖放对象
   this.Drag.style.top = this.dragTop + "px";
   this.Drag.style.left = this.dragLeft + "px";
   this.Drag.style.width = this.dragWidth + "px";
   this.Drag.style.height = this.dragHeight + "px";

   //设置切割对象
   this._pic.src = this._cropper.src = this.Url;
   this._pic.style.width = this._cropper.style.width = this.Width + "px";
   this._pic.style.height = this._cropper.style.height = this.Height + "px";
   if(isIE){
       this._pic.style.filter = "alpha(opacity:" + this.Opacity + ")";
   } else {
       this._pic.style.opacity = this.Opacity / 100;
   }

   //设置预览对象
   if(this.View){ this._view.src = this.Url; }

   //设置拖放
   this._drag.mxRight = this.Width; this._drag.mxBottom = this.Height;
   //设置缩放
   if(this._resize){ this._resize.mxRight = this.Width; this._resize.mxBottom = this.Height; this._resize.Scale = this.Scale; }
},
//设置获取缩放对象
GetResize: function() {
   var op = this.options;
   //有触发对象时才设置
   if(op.RightDown || op.LeftDown || op.RightUp || op.LeftUp || op.Right || op.Left || op.Up || op.Down ){
       var oThis = this, _resize = new Resize(this.Drag, { Limit: true, onResize: function(){ oThis.SetPos(); } });

       //设置缩放触发对象
       if(op.RightDown){ _resize.Set(op.RightDown, "right-down"); }
       if(op.LeftDown){ _resize.Set(op.LeftDown, "left-down"); }

       if(op.RightUp){ _resize.Set(op.RightUp, "right-up"); }
       if(op.LeftUp){ _resize.Set(op.LeftUp, "left-up"); }

       if(op.Right){ _resize.Set(op.Right, "right"); }
       if(op.Left){ _resize.Set(op.Left, "left"); }

       if(op.Up){ _resize.Set(op.Up, "up"); }
       if(op.Down){ _resize.Set(op.Down, "down"); }

       return _resize;
   } else { return null; }
},
//设置切割
SetPos: function() {
   var o = this.Drag;
   //按拖放对象的参数进行切割
   this._cropper.style.clip = "rect(" + o.offsetTop + "px " + (o.offsetLeft + o.offsetWidth) + "px " + (o.offsetTop + o.offsetHeight) + "px " + o.offsetLeft + "px)";
   //切割预览
   if(this.View) this.PreView();
},
//切割预览
PreView: function() {
   //按比例设置宽度和高度
   var o = this.Drag, h = this.viewWidth, w = h * o.offsetWidth / o.offsetHeight;
   if(w > this.viewHeight){ w = this.viewHeight; h = w * o.offsetHeight / o.offsetWidth; }
   //获取对应比例尺寸
   var scale = h / o.offsetHeight, ph = this.Height * scale, pw = this.Width * scale, pt = o.offsetTop * scale, pl = o.offsetLeft * scale, styleView = this._view.style;
   //设置样式
   styleView.width = pw + "px"; styleView.height = ph + "px";
   styleView.top = - pt + "px "; styleView.left = - pl + "px";
   //切割预览图
   styleView.clip = "rect(" + pt + "px " + (pl + w) + "px " + (pt + h) + "px " + pl + "px)";
}
}

var ic = new ImgCropper("bgDiv", "dragDiv", "1.jpg", 400, 500, {
   dragTop: 50, dragLeft: 50,
   Right: "rRight", Left: "rLeft", Up:   "rUp", Down: "rDown",
   RightDown: "rRightDown", LeftDown: "rLeftDown", RightUp: "rRightUp", LeftUp: "rLeftUp",
   View: "viewDiv", viewWidth: 200, viewHeight: 200
})
</script>
<script>

//设置图片大小
function Size(w, h){
   ic.Width = w;
   ic.Height = h;
   ic.Init();
}
//换图片
function Pic(url){
   ic.Url = url;
   ic.Init();
}
//设置透明度
function Opacity(i){
   ic.Opacity = i;
   ic.Init();
}
//是否使用比例
function Scale(b){
   ic.Scale = b;
   ic.Init();
}

</script>
<br />
<br />
<div>
<input name="" type="button" value=" 增肥 " οnclick="Size(500,400)" />
<input name="" type="button" value=" 还原 " οnclick="Size(300,400)" />
</div>

</body>
</html>

JS 滤镜切割图片效果。相关推荐

html5 图片局部马赛克,javascript - JS实现马赛克图片效果完整示例
主要介绍了JS实现马赛克图片效果,结合完整实例形式分析了JavaScript基于HTML5 canvas图形元素绘制实现马赛克效果相关操作技巧,需要的朋友可以参考下本文实例讲述了JS实现马赛克图片效 ...
原生js实现查看图片效果
网页查看图片原理:点击图片的时候创建一个div标签和一个img标签,将div标签通过appendChild方法加入body中,再将img标签加入div标签中.对html中的图片标签进行监听(并不是我们 ...
JS实现马赛克图片效果
整体逻辑:获取oldImg图片的像素信息,以5*5为单位,在5*5单位中取到一个随机像素并赋值给5*5中的所有像素点,加以循环,以实现马赛克效果. <!DOCTYPE html> < ...
[HTML/JS]用HTML、JS实现放大图片效果（放大镜）
购物软件普遍自带的商品放大镜可以让卖家浏览商品细节,当使用者的鼠标移动时,放大镜也随之移动,想要自己实现如下. 具体效果及代码如下: 京东苏宁代码如下: 样式部分 //display:none使& ...
css和js实现3d图片,JavaScript_纯JS实现旋转图片3D展示效果，CSS:style type=text/cssgt - phpStudy...
纯JS实现旋转图片3D展示效果 CSS: #show{position:relative;margin:20px auto;width:800px;} .item{position:absolute; ...
css背景图片高斯模糊_CSS3 filter(滤镜) 制作图片高斯模糊无需JS
本帖最后由 fengrui99 于 2019-7-8 11:20 编辑这是一个寂寞的工作日,因为没有女盆友所以很寂寞,因为很寂寞所以来写教程.希望再看教程的你也是单身!啊,知道你是单身枫瑞贼开心!爽 ...
html做图片模糊效果,CSS3 filter(滤镜) 制作图片高斯模糊无需JS
CSS3 filter(滤镜) 制作图片高斯模糊无需JS 这是一个寂寞的工作日,因为没有女盆友所以很寂寞,因为很寂寞所以来写教程.希望再看教程的你也是单身!啊,知道你是单身枫瑞贼开心!爽的一B!!!起 ...
开源ImageFilter库v0.2：新增7类滤镜，支持12种图片效果
开源ImageFilter库v0.2:新增7类滤镜,支持12种图片效果经过近三天的开发,在原有40套滤镜(v0.1)基本上,又新增实现了7类滤镜(v0.2),通过组合使用,可直接做出12种图片效果. ...
js基础练习---图片无缝左右滚动效果（主要以复制删除为主）
昨天闲来没事看了下图片效果发现这个方法j 就自己模仿下上代码当中有很多的纰漏请大神们多多指教一二? <script type="text/javascript" ...

JS 滤镜切割图片效果。

JS 滤镜切割图片效果。相关推荐

最新文章

热门文章