?JavaScript 圖片切割效果(帶拖拽,縮放,å€åŸŸé™åˆ¶)
<!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>
<style type="text/css">
#rRightDown,#rLeftDown,#rLeftUp,#rRightUp,#rRight,#rLeft,#rUp,#rDown{position:absolute;background:#F00;width:5px; height:5px; z-index:500; font-size:0;}
#dragDiv{border:1px solid #000000;}
</style>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
? <tr>
??? <td width="50%"><div id="bgDiv" style="width:400px; height:500px;">
??????? <div id="dragDiv">
????????? <div id="rRightDown" style="right:0; bottom:0;"> </div>
????????? <div id="rLeftDown" style="left:0; bottom:0;"> </div>
????????? <div id="rRightUp" style="right:0; top:0;"> </div>
????????? <div id="rLeftUp" style="left:0; top:0;"> </div>
????????? <div id="rRight" style="right:0; top:50%;"> </div>
????????? <div id="rLeft" style="left:0; top:50%;"> </div>
????????? <div id="rUp" style="top:0; left:50%;"> </div>
????????? <div id="rDown" style="bottom:0;left:50%;"></div>
??????? </div>
????? </div></td>
??? <td><div id="viewDiv" style="width:200px; height:200px;"> </div></td>
? </tr>
</table>
<script>
var $ = function (id) {
??? return "string" == typeof id ? document.getElementById(id) : id;
};
var isIE = (document.all) ? true : false;
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 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";
?}
?//æ’å…¥å—符解決ff下æ•ç²æ•ˆçš„å•é¡Œ
?if(!isIE){ resize.innerHTML = "<font size='1px'> </font>"; }
?//è¨ç½®è§¸ç™¼å°è±¡
?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)
?}else{
? //æ’å…¥å—符解決ff下æ•ç²å¤±æ•ˆçš„å•é¡Œ
? this.Drag.innerHTML += "<font size='1px'> </font>";
?}
?
?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", "
http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_min.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=" 增肥 " onclick="Size(500,400)" />
? <input name="" type="button" value=" 還原 " onclick="Size(300,400)" />
</div>
<br />
<div>
? <input name="" type="button" value=" æ›åœ– " onclick="Pic('http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_min.jpg')" />
? <input name="" type="button" value=" 還原 " onclick="Pic('http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_xx2.jpg')" />
</div>
<br />
<div>
? <input name="" type="button" value=" é€æ˜Ž " onclick="Opacity(0)" />
? <input name="" type="button" value=" 還原 " onclick="Opacity(50)" />
</div>
<br />
<div>
? <input name="" type="button" value="使用比例" onclick="Scale(true)" />
? <input name="" type="button" value="å–消比例" onclick="Scale(false)" />
</div>
</body>
</html>
?
é‹è¡Œæ•ˆæžœåœ–：
?
JavaScript 圖片切割效果(帶拖拽,縮放,å€åŸŸé™åˆ¶)
æ›´å¤šæ–‡ç« ã€æŠ€è¡“交æµã€å•†å‹™åˆä½œã€è¯ç³»åšä¸»
微信掃碼或æœç´¢ï¼šz360901061
å¾®ä¿¡æŽƒä¸€æŽƒåŠ æˆ‘ç‚ºå¥½å‹
QQ號è¯ç³»ï¼š 360901061
您的支æŒæ˜¯åšä¸»å¯«ä½œæœ€å¤§çš„動力，如果您喜æ¡æˆ‘çš„æ–‡ç« ï¼Œæ„Ÿè¦ºæˆ‘çš„æ–‡ç« å°æ‚¨æœ‰å¹«åŠ©ï¼Œè«‹ç”¨å¾®ä¿¡æŽƒæ下é¢äºŒç¶ç¢¼æ”¯æŒåšä¸»2å…ƒã€5å…ƒã€10å…ƒã€20å…ƒç‰æ‚¨æƒ³æ的金é¡å§ï¼Œç‹ ç‹ é»žæ“Šä¸‹é¢çµ¦é»žæ”¯æŒå§ï¼Œç«™é•·éžå¸¸æ„Ÿæ¿€æ‚¨ï¼æ‰‹æ©Ÿå¾®ä¿¡é•·æŒ‰ä¸èƒ½æ”¯ä»˜è§£æ±ºè¾¦æ³•ï¼šè«‹å°‡å¾®ä¿¡æ”¯ä»˜äºŒç¶ç¢¼ä¿å˜åˆ°ç›¸å†Šï¼Œåˆ‡æ›åˆ°å¾®ä¿¡ï¼Œç„¶åŽé»žæ“Šå¾®ä¿¡å³ä¸Šè§’掃一掃功能，é¸æ“‡æ”¯ä»˜äºŒç¶ç¢¼å®Œæˆæ”¯ä»˜ã€‚
ã€æœ¬æ–‡å°æ‚¨æœ‰å¹«åŠ©å°±å¥½ã€‘å…ƒ
