JavaScript html js图片截取效果,图片切割,非常不错的js代码
这个效果叫ImageCropper，这个效果集合了拖放效果和缩放效果加上切割效果要说明的是这个只是一个效果，并不是真正的切割图片，要获取真正的切割图片请参考图片切割系统。下一篇转载过来
<!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>JavaScript 图片截取效果</title></head><body><script type="text/javascript">var isIE = (document.all) ? true : false;var isIE6 = isIE && ( == 6);var $ = function (id) {return "string" == typeof id ? document.getElementById(id) : id;};var Class = {create: function() {return function() { this.initialize.apply(this, arguments); }}}var Extend = function(destination, source) {for (var property in source) {destination = source;}}var Bind = function(object, fun) {return function() {return fun.apply(object, arguments);}}var BindAsEventListener = function(object, fun) {var args = Array.prototype.slice.call(arguments).slice(2);return function(event) {return fun.apply(object, .concat(args));}}var CurrentStyle = function(element){return element.currentStyle || document.defaultView.getComputedStyle(element, null);}function addEventHandler(oTarget, sEventType, fnHandler) {if (oTarget.addEventListener) {oTarget.addEventListener(sEventType, fnHandler, false);} else if (oTarget.attachEvent) {oTarget.attachEvent("on" + sEventType, fnHandler);} else {oTarget["on" + sEventType] = fnHandler;}};function removeEventHandler(oTarget, sEventType, fnHandler) { if (oTarget.removeEventListener) { oTarget.removeEventListener(sEventType, fnHandler, false); } else if (oTarget.detachEvent) { oTarget.detachEvent("on" + sEventType, fnHandler); } else { oTarget["on" + sEventType] = null; }};//图片切割var ImgCropper = Class.create();ImgCropper.prototype = {//容器对象,控制层,图片地址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){oPreview.style.position = "relative";oPreview.style.overflow = "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"));op.LeftDown && (_resize.Set(op.LeftDown, "left-down"));op.RightUp && (_resize.Set(op.RightUp, "right-up"));op.LeftUp && (_resize.Set(op.LeftUp, "left-up"));op.Right && (_resize.Set(op.Right, "right"));op.Left && (_resize.Set(op.Left, "left"));op.Down && (_resize.Set(op.Down, "down"));op.Up && (_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//预览高度 }; Extend(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){Scale = this.Scale; Ratio = this.Ratio; Min = this.Min; minWidth = this.minWidth; minHeight = this.minHeight;}}},//设置切割样式SetPos: function() {//ie6渲染bugif(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 }}}</script><script type="text/javascript" src="Drag.js"></script><script type="text/javascript" src="Resize.js"></script><style type="text/css">#rRightDown,#rLeftDown,#rLeftUp,#rRightUp,#rRight,#rLeft,#rUp,#rDown{position:absolute;background:#FFF;border: 1px solid #333;width: 6px;height: 6px;z-index:500;font-size:0;opacity: 0.5;filter:alpha(opacity=50);}#rLeftDown,#rRightUp{cursor:ne-resize;}#rRightDown,#rLeftUp{cursor:nw-resize;}#rRight,#rLeft{cursor:e-resize;}#rUp,#rDown{cursor:n-resize;}#rLeftDown{left:-4px;bottom:-4px;}#rRightUp{right:-4px;top:-4px;}#rRightDown{right:-4px;bottom:-4px;background-color:#00F;}#rLeftUp{left:-4px;top:-4px;}#rRight{right:-4px;top:50%;margin-top:-4px;}#rLeft{left:-4px;top:50%;margin-top:-4px;}#rUp{top:-4px;left:50%;margin-left:-4px;}#rDown{bottom:-4px;left:50%;margin-left:-4px;}#bgDiv{width:300px; height:400px; border:1px solid #666666; position:relative;}#dragDiv{border:1px dashed #fff; width:100px; height:60px; top:50px; left:50px; cursor:move; }</style><table width="700" border="0" cellspacing="0" cellpadding="0"><tr> <td width="300"><div id="bgDiv"> <div id="dragDiv"> <div id="rRightDown"> </div> <div id="rLeftDown"> </div> <div id="rRightUp"> </div> <div id="rLeftUp"> </div> <div id="rRight"> </div> <div id="rLeft"> </div> <div id="rUp"> </div> <div id="rDown"></div> </div> </div></td> <td align="center"><div id="viewDiv" style="width:300px; height:300px;"> </div></td></tr></table><br /><input id="idSize" type="button" value="缩小显示" /><input id="idOpacity" type="button" value="全透明" /><input id="idColor" type="button" value="白色背景" /><input id="idScale" type="button" value="使用比例" /><input id="idMin" type="button" value="设置最小尺寸" /><input id="idView" type="button" value="缩小预览" /><input id="idImg" type="button" value="换图片" /><br /><br />图片地址：<input id="idPicUrl" type="text" value="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_mm14.jpg" /><input id="idPic" type="button" value="换图" /><script>var ic = new ImgCropper("bgDiv", "dragDiv", "http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_xx2.jpg", {Width: 300, Height: 400, Color: "#000",Resize: true,Right: "rRight", Left: "rLeft", Up:"rUp", Down: "rDown",RightDown: "rRightDown", LeftDown: "rLeftDown", RightUp: "rRightUp", LeftUp: "rLeftUp",Preview: "viewDiv", viewWidth: 300, viewHeight: 300})$("idSize").onclick = function(){if(ic.Height == 200){ic.Height = 400;this.value = "缩小显示";}else{ic.Height = 200;this.value = "还原显示";}ic.Init();}$("idOpacity").onclick = function(){if(ic.Opacity == 0){ic.Opacity = 50;this.value = "全透明";}else{ic.Opacity = 0;this.value = "半透明";}ic.Init();}$("idColor").onclick = function(){if(ic.Color == "#000"){ic.Color = "#fff";this.value = "白色背景";}else{ic.Color = "#000";this.value = "黑色背景";}ic.Init();}$("idScale").onclick = function(){if(ic.Scale){ic.Scale = false;this.value = "使用比例";}else{ic.Scale = true;this.value = "取消比例";}ic.Init();}$("idMin").onclick = function(){if(ic.Min){ic.Min = false;this.value = "设置最小尺寸";}else{ic.Min = true;this.value = "取消最小尺寸";}ic.Init();}$("idView").onclick = function(){if(ic.viewWidth == 200){ic.viewWidth = 300;this.value = "缩小预览";}else{ic.viewWidth = 200;this.value = "扩大预览";}ic.Init();}$("idImg").onclick = function(){if(ic.Url == "http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_xx2.jpg"){ic.Url = "http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_min.jpg";}else{ic.Url = "http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_xx2.jpg";}ic.Init();}$("idPic").onclick = function(){if($("idPicUrl").value){ic.Url = $("idPicUrl").value;}ic.Init();}</script></body></html>
转自:http://www.cnblogs.com/cloudgamer/default.html?OnlyTitle=1
黑色头发:http://heisetoufa.iteye.com/
页:
[1]