diff --git a/dist/image-clip.css b/dist/image-clip.css index 556f604..7201235 100644 --- a/dist/image-clip.css +++ b/dist/image-clip.css @@ -29,6 +29,7 @@ left: 10px; width: 100px; height: 100px; + cursor: move; } .img-clip .clip-rect .clip-tips { position: absolute; diff --git a/dist/image-clip.js b/dist/image-clip.js index 0e99358..3c2ad2c 100644 --- a/dist/image-clip.js +++ b/dist/image-clip.js @@ -135,6 +135,8 @@ var defaultetting = { isSmooth: true, // 放大镜捕获的图像半径 captureRadius: 30, + // 移动矩形框时的最小间距 + minMoveDiff: 1, // 压缩质量 quality: 0.92, mime: 'image/jpeg', @@ -322,6 +324,13 @@ var ImgClip$1 = function () { }, { key: 'resizeClip', value: function resizeClip() { + this.listenerHornsResize(); + this.listenerRectMove(); + this.listenerContainerLeave(); + } + }, { + key: 'listenerHornsResize', + value: function listenerHornsResize() { var _this = this; this.clipEventState = {}; @@ -353,6 +362,8 @@ var ImgClip$1 = function () { curY: curY }; }; + this.getCurXY = getCurXY; + var moving = function moving(e) { if (!_this.canResizing) { return; @@ -443,6 +454,8 @@ var ImgClip$1 = function () { } }; + this.endHronsResize = endResize; + for (var i = 0; i < 8; i += 1) { this.clipRectHorns[i].addEventListener('mousedown', startResize); this.clipRectHorns[i].addEventListener('touchstart', startResize); @@ -450,11 +463,100 @@ var ImgClip$1 = function () { this.clipRectHorns[i].addEventListener('mouseup', endResize); this.clipRectHorns[i].addEventListener('touchend', endResize); } + } + }, { + key: 'listenerRectMove', + value: function listenerRectMove() { + var _this2 = this; + + var rectDom = this.clipRect; + + var moving = function moving(e) { + if (_this2.canResizing || !_this2.canMove) { + return; + } + e.preventDefault(); + e.stopPropagation(); + var MIN_DIFF = _this2.options.minMoveDiff; + var mouseY = e.touches ? e.touches[0].pageY : e.pageY; + var mouseX = e.touches ? e.touches[0].pageX : e.pageX; + + var diffX = mouseX - _this2.prevRectMouseX; + var diffY = mouseY - _this2.prevRectMouseY; + + if (!diffX && !diffY) { + return; + } + + if (Math.abs(diffX) > MIN_DIFF || Math.abs(diffY) > MIN_DIFF) { + _this2.prevRectMouseX = mouseX; + _this2.prevRectMouseY = mouseY; + } + + var top = rectDom.offsetTop + diffY; + var left = rectDom.offsetLeft + diffX; + + if (top < 0) { + top = 0; + } else if (top > _this2.canvasFull.offsetHeight - rectDom.offsetHeight) { + top = _this2.canvasFull.offsetHeight - rectDom.offsetHeight; + } + + if (left < _this2.marginLeft) { + left = _this2.marginLeft; + } else if (left > _this2.canvasFull.offsetWidth - rectDom.offsetWidth + _this2.marginLeft) { + left = _this2.canvasFull.offsetWidth - rectDom.offsetWidth + _this2.marginLeft; + } + + // 这里无须再补上marginLeft + _this2.clipRect.style.left = left + 'px'; + _this2.clipRect.style.top = top + 'px'; + _this2.draw(); + }; + + rectDom.addEventListener('touchmove', moving); + rectDom.addEventListener('mousemove', moving); + + var startMove = function startMove(e) { + _this2.canMove = true; + + var mouseY = e.touches ? e.touches[0].pageY : e.pageY; + var mouseX = e.touches ? e.touches[0].pageX : e.pageX; + + _this2.prevRectMouseX = mouseX; + _this2.prevRectMouseY = mouseY; + }; + + var endMove = function endMove() { + _this2.canMove = false; + }; + + this.endRectMove = endMove; + + rectDom.addEventListener('mousedown', startMove); + rectDom.addEventListener('touchstart', startMove); + + rectDom.addEventListener('mouseup', endMove); + rectDom.addEventListener('touchend', endMove); + } + }, { + key: 'listenerContainerLeave', + value: function listenerContainerLeave() { + var _this3 = this; + + var leaveContainer = function leaveContainer() { + if (_this3.canResizing) { + _this3.endHronsResize(); + } + if (_this3.canMove) { + _this3.endRectMove(); + } + }; - this.container.addEventListener('mouseleave', endResize); - this.container.addEventListener('mouseup', endResize); - this.events.mouseleave = endResize; - this.events.mouseup = endResize; + this.container.addEventListener('mouseleave', leaveContainer); + this.container.addEventListener('mouseup', leaveContainer); + this.events.mouseleave = leaveContainer; + this.events.mouseup = leaveContainer; } }, { key: 'draw', diff --git a/dist/image-clip.min.css b/dist/image-clip.min.css index ae5d7d0..7261f25 100644 --- a/dist/image-clip.min.css +++ b/dist/image-clip.min.css @@ -1 +1 @@ -.img-clip{position:relative;width:95%;margin:0 auto;padding:0}.img-clip canvas{display:block}.img-clip .magnifier{position:absolute;top:-90px;right:0;width:80px;height:80px;border-radius:50%;border:2px solid #fff}.img-clip .clip-hidden{display:none}.img-clip .clip-rect{position:absolute;border:1px dashed #de3c50;top:10px;left:10px;width:100px;height:100px}.img-clip .clip-rect .clip-tips{position:absolute;top:-40px;left:0;padding:5px;font-size:13px;background-color:#333;border-radius:5px;color:#fff}.img-clip .clip-rect-horn{position:absolute;display:block;background-color:rgba(222,60,80,.7);border-radius:50%;width:20px;height:20px}.img-clip .horn-n{top:-10px;left:50%;margin-left:-10px;cursor:n-resize}.img-clip .horn-s{bottom:-10px;left:50%;margin-left:-10px;cursor:s-resize}.img-clip .horn-w{top:50%;left:-10px;margin-top:-10px;cursor:w-resize}.img-clip .horn-e{top:50%;right:-10px;margin-top:-10px;cursor:e-resize}.img-clip .horn-nw{top:-10px;left:-10px;cursor:nw-resize}.img-clip .horn-ne{top:-10px;right:-10px;cursor:ne-resize}.img-clip .horn-sw{bottom:-10px;left:-10px;cursor:sw-resize}.img-clip .horn-se{bottom:-10px;right:-10px;cursor:se-resize} \ No newline at end of file +.img-clip{position:relative;width:95%;margin:0 auto;padding:0}.img-clip canvas{display:block}.img-clip .magnifier{position:absolute;top:-90px;right:0;width:80px;height:80px;border-radius:50%;border:2px solid #fff}.img-clip .clip-hidden{display:none}.img-clip .clip-rect{position:absolute;border:1px dashed #de3c50;top:10px;left:10px;width:100px;height:100px;cursor:move}.img-clip .clip-rect .clip-tips{position:absolute;top:-40px;left:0;padding:5px;font-size:13px;background-color:#333;border-radius:5px;color:#fff}.img-clip .clip-rect-horn{position:absolute;display:block;background-color:rgba(222,60,80,.7);border-radius:50%;width:20px;height:20px}.img-clip .horn-n{top:-10px;left:50%;margin-left:-10px;cursor:n-resize}.img-clip .horn-s{bottom:-10px;left:50%;margin-left:-10px;cursor:s-resize}.img-clip .horn-w{top:50%;left:-10px;margin-top:-10px;cursor:w-resize}.img-clip .horn-e{top:50%;right:-10px;margin-top:-10px;cursor:e-resize}.img-clip .horn-nw{top:-10px;left:-10px;cursor:nw-resize}.img-clip .horn-ne{top:-10px;right:-10px;cursor:ne-resize}.img-clip .horn-sw{bottom:-10px;left:-10px;cursor:sw-resize}.img-clip .horn-se{bottom:-10px;right:-10px;cursor:se-resize} \ No newline at end of file diff --git a/dist/image-clip.min.js b/dist/image-clip.min.js index c29d7d7..be5da07 100644 --- a/dist/image-clip.min.js +++ b/dist/image-clip.min.js @@ -4,4 +4,4 @@ * Released under the MIT License. * https://github.com/dailc/image-process */ -!function(t,i){"object"==typeof exports&&"undefined"!=typeof module?module.exports=i():"function"==typeof define&&define.amd?define(i):t.ImageClip=i()}(this,function(){"use strict";function t(t){for(var i=t,s=arguments.length,e=Array(s>1?s-1:0),a=1;as&&(a=(h=s)*e),this.marginLeft=(this.oldWidth-a)/2,this.canvasFull.style.width=a+"px",this.canvasFull.style.height=h+"px",this.canvasFull.style.marginLeft=this.marginLeft+"px",this.canvasFull.width=a*this.RATIO_PIXEL,this.canvasFull.height=h*this.RATIO_PIXEL,1&this.rotateStep?this.scale=this.canvasFull.width/this.img.height:this.scale=this.canvasFull.width/this.img.width}},{key:"initClip",value:function(){var t=document.createElement("div");t.className="clip-rect",this.clipRect=t,this.container.appendChild(this.clipRect),this.domChildren.push(this.clipRect);var i=document.createElement("span");i.className="clip-tips",this.clipRect.appendChild(i),this.clipTips=i,-1!==this.options.sizeTipsStyle&&0!==this.options.sizeTipsStyle||this.clipTips.classList.add("clip-hidden"),this.clipRectHorns=[];for(var s=0;s<8;s+=1){var e=document.createElement("span");e.className="clip-rect-horn ",0===s?e.className+="horn-nw":1===s?e.className+="horn-ne":2===s?e.className+="horn-sw":3===s?e.className+="horn-se":4===s?e.className+="horn-n":5===s?e.className+="horn-s":6===s?e.className+="horn-w":7===s&&(e.className+="horn-e"),this.clipRect.appendChild(e),this.clipRectHorns.push(e)}this.resizeClip()}},{key:"resizeClip",value:function(){var t=this;this.clipEventState={};var i=function(i){t.clipEventState.width=t.clipRect.offsetWidth,t.clipEventState.height=t.clipRect.offsetHeight,t.clipEventState.left=t.clipRect.offsetLeft-t.marginLeft,t.clipEventState.top=t.clipRect.offsetTop,t.clipEventState.mouseX=i.touches?i.touches[0].pageX:i.pageX,t.clipEventState.mouseY=i.touches?i.touches[0].pageY:i.pageY,t.clipEventState.evnt=i},s=function(i,s){var e=s-t.canvasFull.offsetTop-t.container.offsetTop,a=i-t.canvasFull.offsetLeft-t.container.offsetLeft;return e=Math.min(e,t.canvasFull.offsetHeight),e=Math.max(0,e),a=Math.min(a,t.canvasFull.offsetWidth),a=Math.max(0,a),t.curX=a,t.curY=e,{curX:a,curY:e}},e=function(i){if(t.canResizing){i.preventDefault(),i.stopPropagation();var e=t.clipEventState,a=e.evnt.target,h=i.touches?i.touches[0].pageY:i.pageY,n=i.touches?i.touches[0].pageX:i.pageX,c=s(n,h),l=c.curX,o=c.curY,r=void 0,v=void 0,u=void 0,g=void 0;a.classList.contains("horn-nw")?(r=e.width-(l-e.left),v=e.height-(o-e.top),u=l,g=o):a.classList.contains("horn-ne")?(r=l-e.left,v=e.height-(o-e.top),u=e.left,g=o):a.classList.contains("horn-sw")?(r=e.width-(l-e.left),v=o-e.top,u=l,g=e.top):a.classList.contains("horn-se")?(r=l-e.left,v=o-e.top,u=e.left,g=e.top):a.classList.contains("horn-n")?(r=e.width,v=e.height-(o-e.top),u=e.left,g=o):a.classList.contains("horn-s")?(r=e.width,v=o-e.top,u=e.left,g=e.top):a.classList.contains("horn-w")?(r=e.width-(l-e.left),v=e.height,u=l,g=e.top):a.classList.contains("horn-e")&&(r=l-e.left,v=e.height,u=l-r,g=e.top),t.clipRect.style.left=u+t.marginLeft+"px",t.clipRect.style.top=g+"px",t.clipRect.style.width=r+"px",t.clipRect.style.height=v+"px",t.draw()}};this.container.addEventListener("touchmove",e),this.container.addEventListener("mousemove",e),this.events.touchmove=e,this.events.mousemove=e;for(var a=function(s){t.canResizing=!0,t.canvasMag.classList.remove("clip-hidden"),0===t.options.sizeTipsStyle&&t.clipTips.classList.remove("clip-hidden"),i(s)},h=function(){t.canResizing=!1,t.canvasMag.classList.add("clip-hidden"),0===t.options.sizeTipsStyle&&t.clipTips.classList.add("clip-hidden")},n=0;n<8;n+=1)this.clipRectHorns[n].addEventListener("mousedown",a),this.clipRectHorns[n].addEventListener("touchstart",a),this.clipRectHorns[n].addEventListener("mouseup",h),this.clipRectHorns[n].addEventListener("touchend",h);this.container.addEventListener("mouseleave",h),this.container.addEventListener("mouseup",h),this.events.mouseleave=h,this.events.mouseup=h}},{key:"draw",value:function(){this.drawMag();var t=this.getRealFinalImgSize(this.clipRect.offsetWidth*this.RATIO_PIXEL,this.clipRect.offsetHeight*this.RATIO_PIXEL),i=t.width,s=t.height;this.clipTips.innerText=i.toFixed(0)+"*"+s.toFixed(0),this.ctxFull.save(),1&this.rotateStep?this.ctxFull.clearRect(0,0,this.canvasFull.height,this.canvasFull.width):this.ctxFull.clearRect(0,0,this.canvasFull.width,this.canvasFull.height),this.drawImage(),this.drawMask(),this.ctxFull.beginPath();var e=this.getClipRectParams(),a=e.srcX,h=e.srcY,n=e.sWidth,c=e.sHeight;this.ctxFull.rect(a,h,n,c),this.ctxFull.clip(),this.drawImage(),this.ctxFull.restore()}},{key:"getClipRectParams",value:function(){var t=this.clipRect.offsetTop,i=this.clipRect.offsetLeft-this.marginLeft,s=this.clipRect.offsetWidth,e=this.clipRect.offsetHeight,a=i+s,h=t+e,n=i,c=t,l=s,o=e;return 1===this.rotateStep?(n=t,c=this.canvasFull.offsetWidth-a,l=e,o=s):2===this.rotateStep?(n=this.canvasFull.offsetWidth-a,c=this.canvasFull.offsetHeight-h,l=s,o=e):3===this.rotateStep&&(n=this.canvasFull.offsetHeight-h,c=i,l=e,o=s),n*=this.RATIO_PIXEL,c*=this.RATIO_PIXEL,l*=this.RATIO_PIXEL,o*=this.RATIO_PIXEL,{srcX:n,srcY:c,sWidth:l,sHeight:o}}},{key:"getRealCoordinate",value:function(t,i){var s=t,e=i;return 1===this.rotateStep?(s=i,e=this.canvasFull.offsetWidth-t):2===this.rotateStep?(s=this.canvasFull.offsetWidth-t,e=this.canvasFull.offsetHeight-i):3===this.rotateStep&&(s=this.canvasFull.offsetHeight-i,e=t),s*=this.RATIO_PIXEL,e*=this.RATIO_PIXEL,{x:s,y:e}}},{key:"drawImage",value:function(){1&this.rotateStep?this.ctxFull.drawImage(this.img,0,0,this.img.width,this.img.height,0,0,this.canvasFull.height,this.canvasFull.width):this.ctxFull.drawImage(this.img,0,0,this.img.width,this.img.height,0,0,this.canvasFull.width,this.canvasFull.height)}},{key:"drawMask",value:function(){this.ctxFull.save(),this.ctxFull.fillStyle="rgba(0, 0, 0, 0.3)",1&this.rotateStep?this.ctxFull.fillRect(0,0,this.canvasFull.height,this.canvasFull.width):this.ctxFull.fillRect(0,0,this.canvasFull.width,this.canvasFull.height),this.ctxFull.restore()}},{key:"drawMag",value:function(){var t=this.options.captureRadius,i=this.getRealCoordinate(this.curX,this.curY),s=2*t,e=2*t,a=i.x-t,h=i.y-t;1&this.rotateStep?this.ctxMag.clearRect(0,0,this.canvasMag.height,this.canvasMag.width):this.ctxMag.clearRect(0,0,this.canvasMag.width,this.canvasMag.height);var n=0,c=0;this.os.ios&&(h<0&&(c=this.canvasMag.height/2*Math.abs(h/t),h=0),a<0&&(n=this.canvasMag.width/2*Math.abs(a/t),a=0)),this.ctxMag.drawImage(this.img,a/this.scale,h/this.scale,s/this.scale,e/this.scale,n,c,this.canvasMag.width,this.canvasMag.height);var l=this.canvasMag.width/2,o=this.canvasMag.height/2,r=5*this.RATIO_PIXEL;this.ctxMag.beginPath(),this.ctxMag.moveTo(l-r,o),this.ctxMag.lineTo(l+r,o),this.ctxMag.moveTo(l,o-r),this.ctxMag.lineTo(l,o+r),this.ctxMag.strokeStyle="#de3c50",this.ctxMag.lineWidth=3,this.ctxMag.stroke()}},{key:"initMagnifier",value:function(){this.canvasMag=document.createElement("canvas"),this.canvasMag.className="magnifier clip-hidden",this.ctxMag=this.canvasMag.getContext("2d"),this.smoothCtx(this.ctxMag),this.container.appendChild(this.canvasMag),this.domChildren.push(this.canvasMag),this.canvasMag.width=2*this.options.captureRadius*this.RATIO_PIXEL,this.canvasMag.height=2*this.options.captureRadius*this.RATIO_PIXEL}},{key:"initTransferCanvas",value:function(){this.canvasTransfer=document.createElement("canvas"),this.canvasTransfer.style.display="none",this.canvasTransfer.className="transfer-canvas",this.ctxTransfer=this.canvasTransfer.getContext("2d"),this.smoothCtx(this.ctxTransfer),this.container.appendChild(this.canvasTransfer),this.domChildren.push(this.canvasTransfer)}},{key:"smoothCtx",value:function(t){var i=this.options.isSmooth;t.mozImageSmoothingEnabled=i,t.webkitImageSmoothingEnabled=i,t.msImageSmoothingEnabled=i,t.imageSmoothingEnabled=i}},{key:"getRealFinalImgSize",value:function(t,i){var s=this.canvasFull.width/this.canvasFull.height,e=this.options.maxWidth||0,a=this.options.forceWidth||0,h=this.options.forceHeight||0,n=t,c=i;return 1&this.rotateStep?((this.options.isUseOriginSize||this.canvasFull.width>this.img.height)&&(n=this.img.width*t/this.canvasFull.height,c=this.img.height*i/this.canvasFull.width),e&&this.canvasFull.height>e&&ethis.img.width)&&(n=this.img.width*t/this.canvasFull.width,c=this.img.height*i/this.canvasFull.height),e&&this.canvasFull.width>e&&e3?this.rotateStep=0:this.rotateStep<0&&(this.rotateStep=3);var e=90*this.rotateStep*Math.PI/180;this.canvasMag.width=this.canvasMag.width,this.canvasMag.height=this.canvasMag.height,0===this.rotateStep?this.resizeCanvas(i,s):1===this.rotateStep?(this.resizeCanvas(s,i),this.ctxFull.rotate(e),this.ctxFull.translate(0,-this.canvasFull.width),this.ctxMag.rotate(e),this.ctxMag.translate(0,-this.canvasMag.width)):2===this.rotateStep?(this.resizeCanvas(i,s),this.ctxFull.rotate(e),this.ctxFull.translate(-this.canvasFull.width,-this.canvasFull.height),this.ctxMag.rotate(e),this.ctxMag.translate(-this.canvasMag.width,-this.canvasMag.height)):3===this.rotateStep&&(this.resizeCanvas(s,i),this.ctxFull.rotate(e),this.ctxFull.translate(-this.canvasFull.height,0),this.ctxMag.rotate(e),this.ctxMag.translate(-this.canvasMag.height,0)),this.resetClipRect()}},{key:"destroy",value:function(){this.clear(),this.canvasFull=null,this.ctxFull=null,this.canvasTransfer=null,this.ctxTransfer=null,this.canvasMag=null,this.ctxMag=null,this.clipRect=null}}]),n}()}); \ No newline at end of file +!function(t,i){"object"==typeof exports&&"undefined"!=typeof module?module.exports=i():"function"==typeof define&&define.amd?define(i):t.ImageClip=i()}(this,function(){"use strict";function t(t){for(var i=t,s=arguments.length,e=Array(s>1?s-1:0),a=1;as&&(a=(h=s)*e),this.marginLeft=(this.oldWidth-a)/2,this.canvasFull.style.width=a+"px",this.canvasFull.style.height=h+"px",this.canvasFull.style.marginLeft=this.marginLeft+"px",this.canvasFull.width=a*this.RATIO_PIXEL,this.canvasFull.height=h*this.RATIO_PIXEL,1&this.rotateStep?this.scale=this.canvasFull.width/this.img.height:this.scale=this.canvasFull.width/this.img.width}},{key:"initClip",value:function(){var t=document.createElement("div");t.className="clip-rect",this.clipRect=t,this.container.appendChild(this.clipRect),this.domChildren.push(this.clipRect);var i=document.createElement("span");i.className="clip-tips",this.clipRect.appendChild(i),this.clipTips=i,-1!==this.options.sizeTipsStyle&&0!==this.options.sizeTipsStyle||this.clipTips.classList.add("clip-hidden"),this.clipRectHorns=[];for(var s=0;s<8;s+=1){var e=document.createElement("span");e.className="clip-rect-horn ",0===s?e.className+="horn-nw":1===s?e.className+="horn-ne":2===s?e.className+="horn-sw":3===s?e.className+="horn-se":4===s?e.className+="horn-n":5===s?e.className+="horn-s":6===s?e.className+="horn-w":7===s&&(e.className+="horn-e"),this.clipRect.appendChild(e),this.clipRectHorns.push(e)}this.resizeClip()}},{key:"resizeClip",value:function(){this.listenerHornsResize(),this.listenerRectMove(),this.listenerContainerLeave()}},{key:"listenerHornsResize",value:function(){var t=this;this.clipEventState={};var i=function(i){t.clipEventState.width=t.clipRect.offsetWidth,t.clipEventState.height=t.clipRect.offsetHeight,t.clipEventState.left=t.clipRect.offsetLeft-t.marginLeft,t.clipEventState.top=t.clipRect.offsetTop,t.clipEventState.mouseX=i.touches?i.touches[0].pageX:i.pageX,t.clipEventState.mouseY=i.touches?i.touches[0].pageY:i.pageY,t.clipEventState.evnt=i},s=function(i,s){var e=s-t.canvasFull.offsetTop-t.container.offsetTop,a=i-t.canvasFull.offsetLeft-t.container.offsetLeft;return e=Math.min(e,t.canvasFull.offsetHeight),e=Math.max(0,e),a=Math.min(a,t.canvasFull.offsetWidth),a=Math.max(0,a),t.curX=a,t.curY=e,{curX:a,curY:e}};this.getCurXY=s;var e=function(i){if(t.canResizing){i.preventDefault(),i.stopPropagation();var e=t.clipEventState,a=e.evnt.target,h=i.touches?i.touches[0].pageY:i.pageY,n=i.touches?i.touches[0].pageX:i.pageX,c=s(n,h),l=c.curX,o=c.curY,r=void 0,v=void 0,u=void 0,d=void 0;a.classList.contains("horn-nw")?(r=e.width-(l-e.left),v=e.height-(o-e.top),u=l,d=o):a.classList.contains("horn-ne")?(r=l-e.left,v=e.height-(o-e.top),u=e.left,d=o):a.classList.contains("horn-sw")?(r=e.width-(l-e.left),v=o-e.top,u=l,d=e.top):a.classList.contains("horn-se")?(r=l-e.left,v=o-e.top,u=e.left,d=e.top):a.classList.contains("horn-n")?(r=e.width,v=e.height-(o-e.top),u=e.left,d=o):a.classList.contains("horn-s")?(r=e.width,v=o-e.top,u=e.left,d=e.top):a.classList.contains("horn-w")?(r=e.width-(l-e.left),v=e.height,u=l,d=e.top):a.classList.contains("horn-e")&&(r=l-e.left,v=e.height,u=l-r,d=e.top),t.clipRect.style.left=u+t.marginLeft+"px",t.clipRect.style.top=d+"px",t.clipRect.style.width=r+"px",t.clipRect.style.height=v+"px",t.draw()}};this.container.addEventListener("touchmove",e),this.container.addEventListener("mousemove",e),this.events.touchmove=e,this.events.mousemove=e;var a=function(s){t.canResizing=!0,t.canvasMag.classList.remove("clip-hidden"),0===t.options.sizeTipsStyle&&t.clipTips.classList.remove("clip-hidden"),i(s)},h=function(){t.canResizing=!1,t.canvasMag.classList.add("clip-hidden"),0===t.options.sizeTipsStyle&&t.clipTips.classList.add("clip-hidden")};this.endHronsResize=h;for(var n=0;n<8;n+=1)this.clipRectHorns[n].addEventListener("mousedown",a),this.clipRectHorns[n].addEventListener("touchstart",a),this.clipRectHorns[n].addEventListener("mouseup",h),this.clipRectHorns[n].addEventListener("touchend",h)}},{key:"listenerRectMove",value:function(){var t=this,i=this.clipRect,s=function(s){if(!t.canResizing&&t.canMove){s.preventDefault(),s.stopPropagation();var e=t.options.minMoveDiff,a=s.touches?s.touches[0].pageY:s.pageY,h=s.touches?s.touches[0].pageX:s.pageX,n=h-t.prevRectMouseX,c=a-t.prevRectMouseY;if(n||c){(Math.abs(n)>e||Math.abs(c)>e)&&(t.prevRectMouseX=h,t.prevRectMouseY=a);var l=i.offsetTop+c,o=i.offsetLeft+n;l<0?l=0:l>t.canvasFull.offsetHeight-i.offsetHeight&&(l=t.canvasFull.offsetHeight-i.offsetHeight),ot.canvasFull.offsetWidth-i.offsetWidth+t.marginLeft&&(o=t.canvasFull.offsetWidth-i.offsetWidth+t.marginLeft),t.clipRect.style.left=o+"px",t.clipRect.style.top=l+"px",t.draw()}}};i.addEventListener("touchmove",s),i.addEventListener("mousemove",s);var e=function(i){t.canMove=!0;var s=i.touches?i.touches[0].pageY:i.pageY,e=i.touches?i.touches[0].pageX:i.pageX;t.prevRectMouseX=e,t.prevRectMouseY=s},a=function(){t.canMove=!1};this.endRectMove=a,i.addEventListener("mousedown",e),i.addEventListener("touchstart",e),i.addEventListener("mouseup",a),i.addEventListener("touchend",a)}},{key:"listenerContainerLeave",value:function(){var t=this,i=function(){t.canResizing&&t.endHronsResize(),t.canMove&&t.endRectMove()};this.container.addEventListener("mouseleave",i),this.container.addEventListener("mouseup",i),this.events.mouseleave=i,this.events.mouseup=i}},{key:"draw",value:function(){this.drawMag();var t=this.getRealFinalImgSize(this.clipRect.offsetWidth*this.RATIO_PIXEL,this.clipRect.offsetHeight*this.RATIO_PIXEL),i=t.width,s=t.height;this.clipTips.innerText=i.toFixed(0)+"*"+s.toFixed(0),this.ctxFull.save(),1&this.rotateStep?this.ctxFull.clearRect(0,0,this.canvasFull.height,this.canvasFull.width):this.ctxFull.clearRect(0,0,this.canvasFull.width,this.canvasFull.height),this.drawImage(),this.drawMask(),this.ctxFull.beginPath();var e=this.getClipRectParams(),a=e.srcX,h=e.srcY,n=e.sWidth,c=e.sHeight;this.ctxFull.rect(a,h,n,c),this.ctxFull.clip(),this.drawImage(),this.ctxFull.restore()}},{key:"getClipRectParams",value:function(){var t=this.clipRect.offsetTop,i=this.clipRect.offsetLeft-this.marginLeft,s=this.clipRect.offsetWidth,e=this.clipRect.offsetHeight,a=i+s,h=t+e,n=i,c=t,l=s,o=e;return 1===this.rotateStep?(n=t,c=this.canvasFull.offsetWidth-a,l=e,o=s):2===this.rotateStep?(n=this.canvasFull.offsetWidth-a,c=this.canvasFull.offsetHeight-h,l=s,o=e):3===this.rotateStep&&(n=this.canvasFull.offsetHeight-h,c=i,l=e,o=s),n*=this.RATIO_PIXEL,c*=this.RATIO_PIXEL,l*=this.RATIO_PIXEL,o*=this.RATIO_PIXEL,{srcX:n,srcY:c,sWidth:l,sHeight:o}}},{key:"getRealCoordinate",value:function(t,i){var s=t,e=i;return 1===this.rotateStep?(s=i,e=this.canvasFull.offsetWidth-t):2===this.rotateStep?(s=this.canvasFull.offsetWidth-t,e=this.canvasFull.offsetHeight-i):3===this.rotateStep&&(s=this.canvasFull.offsetHeight-i,e=t),s*=this.RATIO_PIXEL,e*=this.RATIO_PIXEL,{x:s,y:e}}},{key:"drawImage",value:function(){1&this.rotateStep?this.ctxFull.drawImage(this.img,0,0,this.img.width,this.img.height,0,0,this.canvasFull.height,this.canvasFull.width):this.ctxFull.drawImage(this.img,0,0,this.img.width,this.img.height,0,0,this.canvasFull.width,this.canvasFull.height)}},{key:"drawMask",value:function(){this.ctxFull.save(),this.ctxFull.fillStyle="rgba(0, 0, 0, 0.3)",1&this.rotateStep?this.ctxFull.fillRect(0,0,this.canvasFull.height,this.canvasFull.width):this.ctxFull.fillRect(0,0,this.canvasFull.width,this.canvasFull.height),this.ctxFull.restore()}},{key:"drawMag",value:function(){var t=this.options.captureRadius,i=this.getRealCoordinate(this.curX,this.curY),s=2*t,e=2*t,a=i.x-t,h=i.y-t;1&this.rotateStep?this.ctxMag.clearRect(0,0,this.canvasMag.height,this.canvasMag.width):this.ctxMag.clearRect(0,0,this.canvasMag.width,this.canvasMag.height);var n=0,c=0;this.os.ios&&(h<0&&(c=this.canvasMag.height/2*Math.abs(h/t),h=0),a<0&&(n=this.canvasMag.width/2*Math.abs(a/t),a=0)),this.ctxMag.drawImage(this.img,a/this.scale,h/this.scale,s/this.scale,e/this.scale,n,c,this.canvasMag.width,this.canvasMag.height);var l=this.canvasMag.width/2,o=this.canvasMag.height/2,r=5*this.RATIO_PIXEL;this.ctxMag.beginPath(),this.ctxMag.moveTo(l-r,o),this.ctxMag.lineTo(l+r,o),this.ctxMag.moveTo(l,o-r),this.ctxMag.lineTo(l,o+r),this.ctxMag.strokeStyle="#de3c50",this.ctxMag.lineWidth=3,this.ctxMag.stroke()}},{key:"initMagnifier",value:function(){this.canvasMag=document.createElement("canvas"),this.canvasMag.className="magnifier clip-hidden",this.ctxMag=this.canvasMag.getContext("2d"),this.smoothCtx(this.ctxMag),this.container.appendChild(this.canvasMag),this.domChildren.push(this.canvasMag),this.canvasMag.width=2*this.options.captureRadius*this.RATIO_PIXEL,this.canvasMag.height=2*this.options.captureRadius*this.RATIO_PIXEL}},{key:"initTransferCanvas",value:function(){this.canvasTransfer=document.createElement("canvas"),this.canvasTransfer.style.display="none",this.canvasTransfer.className="transfer-canvas",this.ctxTransfer=this.canvasTransfer.getContext("2d"),this.smoothCtx(this.ctxTransfer),this.container.appendChild(this.canvasTransfer),this.domChildren.push(this.canvasTransfer)}},{key:"smoothCtx",value:function(t){var i=this.options.isSmooth;t.mozImageSmoothingEnabled=i,t.webkitImageSmoothingEnabled=i,t.msImageSmoothingEnabled=i,t.imageSmoothingEnabled=i}},{key:"getRealFinalImgSize",value:function(t,i){var s=this.canvasFull.width/this.canvasFull.height,e=this.options.maxWidth||0,a=this.options.forceWidth||0,h=this.options.forceHeight||0,n=t,c=i;return 1&this.rotateStep?((this.options.isUseOriginSize||this.canvasFull.width>this.img.height)&&(n=this.img.width*t/this.canvasFull.height,c=this.img.height*i/this.canvasFull.width),e&&this.canvasFull.height>e&&ethis.img.width)&&(n=this.img.width*t/this.canvasFull.width,c=this.img.height*i/this.canvasFull.height),e&&this.canvasFull.width>e&&e3?this.rotateStep=0:this.rotateStep<0&&(this.rotateStep=3);var e=90*this.rotateStep*Math.PI/180;this.canvasMag.width=this.canvasMag.width,this.canvasMag.height=this.canvasMag.height,0===this.rotateStep?this.resizeCanvas(i,s):1===this.rotateStep?(this.resizeCanvas(s,i),this.ctxFull.rotate(e),this.ctxFull.translate(0,-this.canvasFull.width),this.ctxMag.rotate(e),this.ctxMag.translate(0,-this.canvasMag.width)):2===this.rotateStep?(this.resizeCanvas(i,s),this.ctxFull.rotate(e),this.ctxFull.translate(-this.canvasFull.width,-this.canvasFull.height),this.ctxMag.rotate(e),this.ctxMag.translate(-this.canvasMag.width,-this.canvasMag.height)):3===this.rotateStep&&(this.resizeCanvas(s,i),this.ctxFull.rotate(e),this.ctxFull.translate(-this.canvasFull.height,0),this.ctxMag.rotate(e),this.ctxMag.translate(-this.canvasMag.height,0)),this.resetClipRect()}},{key:"destroy",value:function(){this.clear(),this.canvasFull=null,this.ctxFull=null,this.canvasTransfer=null,this.ctxTransfer=null,this.canvasMag=null,this.ctxMag=null,this.clipRect=null}}]),n}()}); \ No newline at end of file diff --git a/dist/image-process.css b/dist/image-process.css index 3599aab..385c897 100644 --- a/dist/image-process.css +++ b/dist/image-process.css @@ -32,6 +32,7 @@ left: 10px; width: 100px; height: 100px; + cursor: move; } .img-clip .clip-rect .clip-tips { position: absolute; diff --git a/dist/image-process.js b/dist/image-process.js index 46eb261..7ca05ed 100644 --- a/dist/image-process.js +++ b/dist/image-process.js @@ -135,6 +135,8 @@ var defaultetting = { isSmooth: true, // 放大镜捕获的图像半径 captureRadius: 30, + // 移动矩形框时的最小间距 + minMoveDiff: 1, // 压缩质量 quality: 0.92, mime: 'image/jpeg', @@ -322,6 +324,13 @@ var ImgClip = function () { }, { key: 'resizeClip', value: function resizeClip() { + this.listenerHornsResize(); + this.listenerRectMove(); + this.listenerContainerLeave(); + } + }, { + key: 'listenerHornsResize', + value: function listenerHornsResize() { var _this = this; this.clipEventState = {}; @@ -353,6 +362,8 @@ var ImgClip = function () { curY: curY }; }; + this.getCurXY = getCurXY; + var moving = function moving(e) { if (!_this.canResizing) { return; @@ -443,6 +454,8 @@ var ImgClip = function () { } }; + this.endHronsResize = endResize; + for (var i = 0; i < 8; i += 1) { this.clipRectHorns[i].addEventListener('mousedown', startResize); this.clipRectHorns[i].addEventListener('touchstart', startResize); @@ -450,11 +463,100 @@ var ImgClip = function () { this.clipRectHorns[i].addEventListener('mouseup', endResize); this.clipRectHorns[i].addEventListener('touchend', endResize); } + } + }, { + key: 'listenerRectMove', + value: function listenerRectMove() { + var _this2 = this; + + var rectDom = this.clipRect; + + var moving = function moving(e) { + if (_this2.canResizing || !_this2.canMove) { + return; + } + e.preventDefault(); + e.stopPropagation(); + var MIN_DIFF = _this2.options.minMoveDiff; + var mouseY = e.touches ? e.touches[0].pageY : e.pageY; + var mouseX = e.touches ? e.touches[0].pageX : e.pageX; + + var diffX = mouseX - _this2.prevRectMouseX; + var diffY = mouseY - _this2.prevRectMouseY; + + if (!diffX && !diffY) { + return; + } + + if (Math.abs(diffX) > MIN_DIFF || Math.abs(diffY) > MIN_DIFF) { + _this2.prevRectMouseX = mouseX; + _this2.prevRectMouseY = mouseY; + } + + var top = rectDom.offsetTop + diffY; + var left = rectDom.offsetLeft + diffX; + + if (top < 0) { + top = 0; + } else if (top > _this2.canvasFull.offsetHeight - rectDom.offsetHeight) { + top = _this2.canvasFull.offsetHeight - rectDom.offsetHeight; + } + + if (left < _this2.marginLeft) { + left = _this2.marginLeft; + } else if (left > _this2.canvasFull.offsetWidth - rectDom.offsetWidth + _this2.marginLeft) { + left = _this2.canvasFull.offsetWidth - rectDom.offsetWidth + _this2.marginLeft; + } + + // 这里无须再补上marginLeft + _this2.clipRect.style.left = left + 'px'; + _this2.clipRect.style.top = top + 'px'; + _this2.draw(); + }; + + rectDom.addEventListener('touchmove', moving); + rectDom.addEventListener('mousemove', moving); + + var startMove = function startMove(e) { + _this2.canMove = true; + + var mouseY = e.touches ? e.touches[0].pageY : e.pageY; + var mouseX = e.touches ? e.touches[0].pageX : e.pageX; + + _this2.prevRectMouseX = mouseX; + _this2.prevRectMouseY = mouseY; + }; + + var endMove = function endMove() { + _this2.canMove = false; + }; + + this.endRectMove = endMove; + + rectDom.addEventListener('mousedown', startMove); + rectDom.addEventListener('touchstart', startMove); + + rectDom.addEventListener('mouseup', endMove); + rectDom.addEventListener('touchend', endMove); + } + }, { + key: 'listenerContainerLeave', + value: function listenerContainerLeave() { + var _this3 = this; + + var leaveContainer = function leaveContainer() { + if (_this3.canResizing) { + _this3.endHronsResize(); + } + if (_this3.canMove) { + _this3.endRectMove(); + } + }; - this.container.addEventListener('mouseleave', endResize); - this.container.addEventListener('mouseup', endResize); - this.events.mouseleave = endResize; - this.events.mouseup = endResize; + this.container.addEventListener('mouseleave', leaveContainer); + this.container.addEventListener('mouseup', leaveContainer); + this.events.mouseleave = leaveContainer; + this.events.mouseup = leaveContainer; } }, { key: 'draw', diff --git a/dist/image-process.min.css b/dist/image-process.min.css index c34d87f..9ad3417 100644 --- a/dist/image-process.min.css +++ b/dist/image-process.min.css @@ -1 +1 @@ -.hidden{display:none}.img-clip{position:relative;width:95%;margin:0 auto;padding:0}.img-clip canvas{display:block}.img-clip .magnifier{position:absolute;top:-90px;right:0;width:80px;height:80px;border-radius:50%;border:2px solid #fff}.img-clip .clip-hidden{display:none}.img-clip .clip-rect{position:absolute;border:1px dashed #de3c50;top:10px;left:10px;width:100px;height:100px}.img-clip .clip-rect .clip-tips{position:absolute;top:-40px;left:0;padding:5px;font-size:13px;background-color:#333;border-radius:5px;color:#fff}.img-clip .clip-rect-horn{position:absolute;display:block;background-color:rgba(222,60,80,.7);border-radius:50%;width:20px;height:20px}.img-clip .horn-n{top:-10px;left:50%;margin-left:-10px;cursor:n-resize}.img-clip .horn-s{bottom:-10px;left:50%;margin-left:-10px;cursor:s-resize}.img-clip .horn-w{top:50%;left:-10px;margin-top:-10px;cursor:w-resize}.img-clip .horn-e{top:50%;right:-10px;margin-top:-10px;cursor:e-resize}.img-clip .horn-nw{top:-10px;left:-10px;cursor:nw-resize}.img-clip .horn-ne{top:-10px;right:-10px;cursor:ne-resize}.img-clip .horn-sw{bottom:-10px;left:-10px;cursor:sw-resize}.img-clip .horn-se{bottom:-10px;right:-10px;cursor:se-resize} \ No newline at end of file +.hidden{display:none}.img-clip{position:relative;width:95%;margin:0 auto;padding:0}.img-clip canvas{display:block}.img-clip .magnifier{position:absolute;top:-90px;right:0;width:80px;height:80px;border-radius:50%;border:2px solid #fff}.img-clip .clip-hidden{display:none}.img-clip .clip-rect{position:absolute;border:1px dashed #de3c50;top:10px;left:10px;width:100px;height:100px;cursor:move}.img-clip .clip-rect .clip-tips{position:absolute;top:-40px;left:0;padding:5px;font-size:13px;background-color:#333;border-radius:5px;color:#fff}.img-clip .clip-rect-horn{position:absolute;display:block;background-color:rgba(222,60,80,.7);border-radius:50%;width:20px;height:20px}.img-clip .horn-n{top:-10px;left:50%;margin-left:-10px;cursor:n-resize}.img-clip .horn-s{bottom:-10px;left:50%;margin-left:-10px;cursor:s-resize}.img-clip .horn-w{top:50%;left:-10px;margin-top:-10px;cursor:w-resize}.img-clip .horn-e{top:50%;right:-10px;margin-top:-10px;cursor:e-resize}.img-clip .horn-nw{top:-10px;left:-10px;cursor:nw-resize}.img-clip .horn-ne{top:-10px;right:-10px;cursor:ne-resize}.img-clip .horn-sw{bottom:-10px;left:-10px;cursor:sw-resize}.img-clip .horn-se{bottom:-10px;right:-10px;cursor:se-resize} \ No newline at end of file diff --git a/dist/image-process.min.js b/dist/image-process.min.js index 11be606..e10db80 100644 --- a/dist/image-process.min.js +++ b/dist/image-process.min.js @@ -4,4 +4,4 @@ * Released under the MIT License. * https://github.com/dailc/image-process */ -!function(t,i){"object"==typeof exports&&"undefined"!=typeof module?module.exports=i():"function"==typeof define&&define.amd?define(i):t.ImageProcess=i()}(this,function(){"use strict";function t(t){for(var i=t,s=arguments.length,e=Array(s>1?s-1:0),a=1;a=s?h=s-1:h<0&&(h=0),n>=i?n=i-1:n<0&&(n=0);var c=h*i+n;return c*=4,[t[c+0],t[c+1],t[c+2],t[c+3]]}function c(t,i,s,e,a,h){for(var c=a/i,o=h/s,r=e,l=0;l=0?t:-t,s=t*t,e=i*s;return i<=1?1-(_+3)*s+(_+2)*e:i<=2?-4*_+8*_*i-5*_*s+_*e:0}function d(t){var i=t;return i=Math.min(255,i),i=Math.max(0,i)}function u(t,i,s,e,a){var h=e,n=a;h>=s?h=s-1:h<0&&(h=0),n>=i?n=i-1:n<0&&(n=0);var c=h*i+n;return c*=4,[t[c+0],t[c+1],t[c+2],t[c+3]]}function g(t,i,s,e,a,h){for(var n=e,c=a/i,o=h/s,r=0;rs&&(a=(h=s)*e),this.marginLeft=(this.oldWidth-a)/2,this.canvasFull.style.width=a+"px",this.canvasFull.style.height=h+"px",this.canvasFull.style.marginLeft=this.marginLeft+"px",this.canvasFull.width=a*this.RATIO_PIXEL,this.canvasFull.height=h*this.RATIO_PIXEL,1&this.rotateStep?this.scale=this.canvasFull.width/this.img.height:this.scale=this.canvasFull.width/this.img.width}},{key:"initClip",value:function(){var t=document.createElement("div");t.className="clip-rect",this.clipRect=t,this.container.appendChild(this.clipRect),this.domChildren.push(this.clipRect);var i=document.createElement("span");i.className="clip-tips",this.clipRect.appendChild(i),this.clipTips=i,-1!==this.options.sizeTipsStyle&&0!==this.options.sizeTipsStyle||this.clipTips.classList.add("clip-hidden"),this.clipRectHorns=[];for(var s=0;s<8;s+=1){var e=document.createElement("span");e.className="clip-rect-horn ",0===s?e.className+="horn-nw":1===s?e.className+="horn-ne":2===s?e.className+="horn-sw":3===s?e.className+="horn-se":4===s?e.className+="horn-n":5===s?e.className+="horn-s":6===s?e.className+="horn-w":7===s&&(e.className+="horn-e"),this.clipRect.appendChild(e),this.clipRectHorns.push(e)}this.resizeClip()}},{key:"resizeClip",value:function(){var t=this;this.clipEventState={};var i=function(i){t.clipEventState.width=t.clipRect.offsetWidth,t.clipEventState.height=t.clipRect.offsetHeight,t.clipEventState.left=t.clipRect.offsetLeft-t.marginLeft,t.clipEventState.top=t.clipRect.offsetTop,t.clipEventState.mouseX=i.touches?i.touches[0].pageX:i.pageX,t.clipEventState.mouseY=i.touches?i.touches[0].pageY:i.pageY,t.clipEventState.evnt=i},s=function(i,s){var e=s-t.canvasFull.offsetTop-t.container.offsetTop,a=i-t.canvasFull.offsetLeft-t.container.offsetLeft;return e=Math.min(e,t.canvasFull.offsetHeight),e=Math.max(0,e),a=Math.min(a,t.canvasFull.offsetWidth),a=Math.max(0,a),t.curX=a,t.curY=e,{curX:a,curY:e}},e=function(i){if(t.canResizing){i.preventDefault(),i.stopPropagation();var e=t.clipEventState,a=e.evnt.target,h=i.touches?i.touches[0].pageY:i.pageY,n=i.touches?i.touches[0].pageX:i.pageX,c=s(n,h),o=c.curX,r=c.curY,l=void 0,v=void 0,d=void 0,u=void 0;a.classList.contains("horn-nw")?(l=e.width-(o-e.left),v=e.height-(r-e.top),d=o,u=r):a.classList.contains("horn-ne")?(l=o-e.left,v=e.height-(r-e.top),d=e.left,u=r):a.classList.contains("horn-sw")?(l=e.width-(o-e.left),v=r-e.top,d=o,u=e.top):a.classList.contains("horn-se")?(l=o-e.left,v=r-e.top,d=e.left,u=e.top):a.classList.contains("horn-n")?(l=e.width,v=e.height-(r-e.top),d=e.left,u=r):a.classList.contains("horn-s")?(l=e.width,v=r-e.top,d=e.left,u=e.top):a.classList.contains("horn-w")?(l=e.width-(o-e.left),v=e.height,d=o,u=e.top):a.classList.contains("horn-e")&&(l=o-e.left,v=e.height,d=o-l,u=e.top),t.clipRect.style.left=d+t.marginLeft+"px",t.clipRect.style.top=u+"px",t.clipRect.style.width=l+"px",t.clipRect.style.height=v+"px",t.draw()}};this.container.addEventListener("touchmove",e),this.container.addEventListener("mousemove",e),this.events.touchmove=e,this.events.mousemove=e;for(var a=function(s){t.canResizing=!0,t.canvasMag.classList.remove("clip-hidden"),0===t.options.sizeTipsStyle&&t.clipTips.classList.remove("clip-hidden"),i(s)},h=function(){t.canResizing=!1,t.canvasMag.classList.add("clip-hidden"),0===t.options.sizeTipsStyle&&t.clipTips.classList.add("clip-hidden")},n=0;n<8;n+=1)this.clipRectHorns[n].addEventListener("mousedown",a),this.clipRectHorns[n].addEventListener("touchstart",a),this.clipRectHorns[n].addEventListener("mouseup",h),this.clipRectHorns[n].addEventListener("touchend",h);this.container.addEventListener("mouseleave",h),this.container.addEventListener("mouseup",h),this.events.mouseleave=h,this.events.mouseup=h}},{key:"draw",value:function(){this.drawMag();var t=this.getRealFinalImgSize(this.clipRect.offsetWidth*this.RATIO_PIXEL,this.clipRect.offsetHeight*this.RATIO_PIXEL),i=t.width,s=t.height;this.clipTips.innerText=i.toFixed(0)+"*"+s.toFixed(0),this.ctxFull.save(),1&this.rotateStep?this.ctxFull.clearRect(0,0,this.canvasFull.height,this.canvasFull.width):this.ctxFull.clearRect(0,0,this.canvasFull.width,this.canvasFull.height),this.drawImage(),this.drawMask(),this.ctxFull.beginPath();var e=this.getClipRectParams(),a=e.srcX,h=e.srcY,n=e.sWidth,c=e.sHeight;this.ctxFull.rect(a,h,n,c),this.ctxFull.clip(),this.drawImage(),this.ctxFull.restore()}},{key:"getClipRectParams",value:function(){var t=this.clipRect.offsetTop,i=this.clipRect.offsetLeft-this.marginLeft,s=this.clipRect.offsetWidth,e=this.clipRect.offsetHeight,a=i+s,h=t+e,n=i,c=t,o=s,r=e;return 1===this.rotateStep?(n=t,c=this.canvasFull.offsetWidth-a,o=e,r=s):2===this.rotateStep?(n=this.canvasFull.offsetWidth-a,c=this.canvasFull.offsetHeight-h,o=s,r=e):3===this.rotateStep&&(n=this.canvasFull.offsetHeight-h,c=i,o=e,r=s),n*=this.RATIO_PIXEL,c*=this.RATIO_PIXEL,o*=this.RATIO_PIXEL,r*=this.RATIO_PIXEL,{srcX:n,srcY:c,sWidth:o,sHeight:r}}},{key:"getRealCoordinate",value:function(t,i){var s=t,e=i;return 1===this.rotateStep?(s=i,e=this.canvasFull.offsetWidth-t):2===this.rotateStep?(s=this.canvasFull.offsetWidth-t,e=this.canvasFull.offsetHeight-i):3===this.rotateStep&&(s=this.canvasFull.offsetHeight-i,e=t),s*=this.RATIO_PIXEL,e*=this.RATIO_PIXEL,{x:s,y:e}}},{key:"drawImage",value:function(){1&this.rotateStep?this.ctxFull.drawImage(this.img,0,0,this.img.width,this.img.height,0,0,this.canvasFull.height,this.canvasFull.width):this.ctxFull.drawImage(this.img,0,0,this.img.width,this.img.height,0,0,this.canvasFull.width,this.canvasFull.height)}},{key:"drawMask",value:function(){this.ctxFull.save(),this.ctxFull.fillStyle="rgba(0, 0, 0, 0.3)",1&this.rotateStep?this.ctxFull.fillRect(0,0,this.canvasFull.height,this.canvasFull.width):this.ctxFull.fillRect(0,0,this.canvasFull.width,this.canvasFull.height),this.ctxFull.restore()}},{key:"drawMag",value:function(){var t=this.options.captureRadius,i=this.getRealCoordinate(this.curX,this.curY),s=2*t,e=2*t,a=i.x-t,h=i.y-t;1&this.rotateStep?this.ctxMag.clearRect(0,0,this.canvasMag.height,this.canvasMag.width):this.ctxMag.clearRect(0,0,this.canvasMag.width,this.canvasMag.height);var n=0,c=0;this.os.ios&&(h<0&&(c=this.canvasMag.height/2*Math.abs(h/t),h=0),a<0&&(n=this.canvasMag.width/2*Math.abs(a/t),a=0)),this.ctxMag.drawImage(this.img,a/this.scale,h/this.scale,s/this.scale,e/this.scale,n,c,this.canvasMag.width,this.canvasMag.height);var o=this.canvasMag.width/2,r=this.canvasMag.height/2,l=5*this.RATIO_PIXEL;this.ctxMag.beginPath(),this.ctxMag.moveTo(o-l,r),this.ctxMag.lineTo(o+l,r),this.ctxMag.moveTo(o,r-l),this.ctxMag.lineTo(o,r+l),this.ctxMag.strokeStyle="#de3c50",this.ctxMag.lineWidth=3,this.ctxMag.stroke()}},{key:"initMagnifier",value:function(){this.canvasMag=document.createElement("canvas"),this.canvasMag.className="magnifier clip-hidden",this.ctxMag=this.canvasMag.getContext("2d"),this.smoothCtx(this.ctxMag),this.container.appendChild(this.canvasMag),this.domChildren.push(this.canvasMag),this.canvasMag.width=2*this.options.captureRadius*this.RATIO_PIXEL,this.canvasMag.height=2*this.options.captureRadius*this.RATIO_PIXEL}},{key:"initTransferCanvas",value:function(){this.canvasTransfer=document.createElement("canvas"),this.canvasTransfer.style.display="none",this.canvasTransfer.className="transfer-canvas",this.ctxTransfer=this.canvasTransfer.getContext("2d"),this.smoothCtx(this.ctxTransfer),this.container.appendChild(this.canvasTransfer),this.domChildren.push(this.canvasTransfer)}},{key:"smoothCtx",value:function(t){var i=this.options.isSmooth;t.mozImageSmoothingEnabled=i,t.webkitImageSmoothingEnabled=i,t.msImageSmoothingEnabled=i,t.imageSmoothingEnabled=i}},{key:"getRealFinalImgSize",value:function(t,i){var s=this.canvasFull.width/this.canvasFull.height,e=this.options.maxWidth||0,a=this.options.forceWidth||0,h=this.options.forceHeight||0,n=t,c=i;return 1&this.rotateStep?((this.options.isUseOriginSize||this.canvasFull.width>this.img.height)&&(n=this.img.width*t/this.canvasFull.height,c=this.img.height*i/this.canvasFull.width),e&&this.canvasFull.height>e&&ethis.img.width)&&(n=this.img.width*t/this.canvasFull.width,c=this.img.height*i/this.canvasFull.height),e&&this.canvasFull.width>e&&e3?this.rotateStep=0:this.rotateStep<0&&(this.rotateStep=3);var e=90*this.rotateStep*Math.PI/180;this.canvasMag.width=this.canvasMag.width,this.canvasMag.height=this.canvasMag.height,0===this.rotateStep?this.resizeCanvas(i,s):1===this.rotateStep?(this.resizeCanvas(s,i),this.ctxFull.rotate(e),this.ctxFull.translate(0,-this.canvasFull.width),this.ctxMag.rotate(e),this.ctxMag.translate(0,-this.canvasMag.width)):2===this.rotateStep?(this.resizeCanvas(i,s),this.ctxFull.rotate(e),this.ctxFull.translate(-this.canvasFull.width,-this.canvasFull.height),this.ctxMag.rotate(e),this.ctxMag.translate(-this.canvasMag.width,-this.canvasMag.height)):3===this.rotateStep&&(this.resizeCanvas(s,i),this.ctxFull.rotate(e),this.ctxFull.translate(-this.canvasFull.height,0),this.ctxMag.rotate(e),this.ctxMag.translate(-this.canvasMag.height,0)),this.resetClipRect()}},{key:"destroy",value:function(){this.clear(),this.canvasFull=null,this.ctxFull=null,this.canvasTransfer=null,this.ctxTransfer=null,this.canvasMag=null,this.ctxMag=null,this.clipRect=null}}]),a}(),x=void 0,R=void 0,F=void 0,S=void 0,M=void 0,T=void 0,y=void 0,I=void 0,C=void 0,L=void 0,E=void 0,k=void 0,P=void 0,X=void 0,z=void 0,H=void 0,O=function(t,i,s,e,a,h){var n=e,c=a;n>=s?n=s-1:n<0&&(n=0),c>=i?c=i-1:c<0&&(c=0);var o=n*i+c;return o*=4,t[o+h]},W=function(t){var i=t;return i=Math.min(255,i),i=Math.max(0,i)},b=function(t){var i=t;x=i[1][1],R=-.5*i[1][0]+.5*i[1][2],F=i[1][0]-2.5*i[1][1]+2*i[1][2]-.5*i[1][3],S=-.5*i[1][0]+1.5*i[1][1]-1.5*i[1][2]+.5*i[1][3],M=-.5*i[0][1]+.5*i[2][1],T=.25*i[0][0]-.25*i[0][2]-.25*i[2][0]+.25*i[2][2],y=-.5*i[0][0]+1.25*i[0][1]-i[0][2]+.25*i[0][3]+.5*i[2][0]-1.25*i[2][1]+i[2][2]-.25*i[2][3],I=.25*i[0][0]-.75*i[0][1]+.75*i[0][2]-.25*i[0][3]-.25*i[2][0]+.75*i[2][1]-.75*i[2][2]+.25*i[2][3],C=i[0][1]-2.5*i[1][1]+2*i[2][1]-.5*i[3][1],L=-.5*i[0][0]+.5*i[0][2]+1.25*i[1][0]-1.25*i[1][2]-i[2][0]+i[2][2]+.25*i[3][0]-.25*i[3][2],E=i[0][0]-2.5*i[0][1]+2*i[0][2]-.5*i[0][3]-2.5*i[1][0]+6.25*i[1][1]-5*i[1][2]+1.25*i[1][3]+2*i[2][0]-5*i[2][1]+4*i[2][2]-i[2][3]-.5*i[3][0]+1.25*i[3][1]-i[3][2]+.25*i[3][3],k=-.5*i[0][0]+1.5*i[0][1]-1.5*i[0][2]+.5*i[0][3]+1.25*i[1][0]-3.75*i[1][1]+3.75*i[1][2]-1.25*i[1][3]-i[2][0]+3*i[2][1]-3*i[2][2]+i[2][3]+.25*i[3][0]-.75*i[3][1]+.75*i[3][2]-.25*i[3][3],P=-.5*i[0][1]+1.5*i[1][1]-1.5*i[2][1]+.5*i[3][1],X=.25*i[0][0]-.25*i[0][2]-.75*i[1][0]+.75*i[1][2]+.75*i[2][0]-.75*i[2][2]-.25*i[3][0]+.25*i[3][2],z=-.5*i[0][0]+1.25*i[0][1]-i[0][2]+.25*i[0][3]+1.5*i[1][0]-3.75*i[1][1]+3*i[1][2]-.75*i[1][3]-1.5*i[2][0]+3.75*i[2][1]-3*i[2][2]+.75*i[2][3]+.5*i[3][0]-1.25*i[3][1]+i[3][2]-.25*i[3][3],H=.25*i[0][0]-.75*i[0][1]+.75*i[0][2]-.25*i[0][3]-.75*i[1][0]+2.25*i[1][1]-2.25*i[1][2]+.75*i[1][3]+.75*i[2][0]-2.25*i[2][1]+2.25*i[2][2]-.75*i[2][3]-.25*i[3][0]+.75*i[3][1]-.75*i[3][2]+.25*i[3][3]},A=function(t,i){var s=t*t,e=i*i,a=e*i;return x+R*i+F*e+S*a+(M+T*i+y*e+I*a)*t+(C+L*i+E*e+k*a)*s+(P+X*i+z*e+H*a)*(s*t)},_=-1,N={width:80,height:80,mime:"image/png",processType:1},D={quality:.92,mime:"image/jpeg",compressScaleRatio:1,iphoneFixedRatio:1.5,isUseOriginSize:!1,maxWidth:0,forceWidth:0,forceHeight:0},Y={};return function(i){function s(t){var i=t.backingStorePixelRatio||t.webkitBackingStorePixelRatio||t.mozBackingStorePixelRatio||t.msBackingStorePixelRatio||t.oBackingStorePixelRatio||t.backingStorePixelRatio||1;return(window.devicePixelRatio||1)/i}var e=i;e.scaleImageData=function(i,s,e){(0,[h,o,l,f][t({},N,e).processType])(i,s)},e.scaleImage=function(i,s){var a=i.width,h=i.height,n=t({},N,s),c=document.createElement("canvas"),o=c.getContext("2d");c.width=a,c.height=h,o.drawImage(i,0,0,a,h);var r=o.getImageData(0,0,a,h),l=o.createImageData(n.width,n.height);return e.scaleImageData(r,l,n),c.width=l.width,c.height=l.height,o.putImageData(l,0,0,0,0,c.width,c.height),c.toDataURL(n.mime,.9)},e.compressImage=function(i,e){var a=i.width,h=i.height,n=a/h,c=t({},D,e),o=document.createElement("canvas"),r=o.getContext("2d"),l=s(r);l*=c.compressScaleRatio||1,navigator.userAgent.match(/(iPhone\sOS)\s([\d_]+)/)&&(l*=c.iphoneFixedRatio||1);var v=window.innerWidth*l;(c.isUseOriginSize||v>a)&&(v=a);var d=c.maxWidth;d&&a>d&&v>d&&(v=d);var u=c.forceWidth,g=c.forceHeight;u&&(v=u);var f=v/n;return g&&(f=g),o.width=v,o.height=f,r.drawImage(i,0,0,a,h,0,0,o.width,o.height),o.toDataURL(c.mime,c.quality)}}(Y),Y.ImgClip=w,Y}); \ No newline at end of file +!function(t,i){"object"==typeof exports&&"undefined"!=typeof module?module.exports=i():"function"==typeof define&&define.amd?define(i):t.ImageProcess=i()}(this,function(){"use strict";function t(t){for(var i=t,e=arguments.length,s=Array(e>1?e-1:0),a=1;a=e?h=e-1:h<0&&(h=0),n>=i?n=i-1:n<0&&(n=0);var o=h*i+n;return o*=4,[t[o+0],t[o+1],t[o+2],t[o+3]]}function o(t,i,e,s,a,h){for(var o=a/i,c=h/e,r=s,l=0;l=0?t:-t,e=t*t,s=i*e;return i<=1?1-(_+3)*e+(_+2)*s:i<=2?-4*_+8*_*i-5*_*e+_*s:0}function u(t){var i=t;return i=Math.min(255,i),i=Math.max(0,i)}function d(t,i,e,s,a){var h=s,n=a;h>=e?h=e-1:h<0&&(h=0),n>=i?n=i-1:n<0&&(n=0);var o=h*i+n;return o*=4,[t[o+0],t[o+1],t[o+2],t[o+3]]}function g(t,i,e,s,a,h){for(var n=s,o=a/i,c=h/e,r=0;re&&(a=(h=e)*s),this.marginLeft=(this.oldWidth-a)/2,this.canvasFull.style.width=a+"px",this.canvasFull.style.height=h+"px",this.canvasFull.style.marginLeft=this.marginLeft+"px",this.canvasFull.width=a*this.RATIO_PIXEL,this.canvasFull.height=h*this.RATIO_PIXEL,1&this.rotateStep?this.scale=this.canvasFull.width/this.img.height:this.scale=this.canvasFull.width/this.img.width}},{key:"initClip",value:function(){var t=document.createElement("div");t.className="clip-rect",this.clipRect=t,this.container.appendChild(this.clipRect),this.domChildren.push(this.clipRect);var i=document.createElement("span");i.className="clip-tips",this.clipRect.appendChild(i),this.clipTips=i,-1!==this.options.sizeTipsStyle&&0!==this.options.sizeTipsStyle||this.clipTips.classList.add("clip-hidden"),this.clipRectHorns=[];for(var e=0;e<8;e+=1){var s=document.createElement("span");s.className="clip-rect-horn ",0===e?s.className+="horn-nw":1===e?s.className+="horn-ne":2===e?s.className+="horn-sw":3===e?s.className+="horn-se":4===e?s.className+="horn-n":5===e?s.className+="horn-s":6===e?s.className+="horn-w":7===e&&(s.className+="horn-e"),this.clipRect.appendChild(s),this.clipRectHorns.push(s)}this.resizeClip()}},{key:"resizeClip",value:function(){this.listenerHornsResize(),this.listenerRectMove(),this.listenerContainerLeave()}},{key:"listenerHornsResize",value:function(){var t=this;this.clipEventState={};var i=function(i){t.clipEventState.width=t.clipRect.offsetWidth,t.clipEventState.height=t.clipRect.offsetHeight,t.clipEventState.left=t.clipRect.offsetLeft-t.marginLeft,t.clipEventState.top=t.clipRect.offsetTop,t.clipEventState.mouseX=i.touches?i.touches[0].pageX:i.pageX,t.clipEventState.mouseY=i.touches?i.touches[0].pageY:i.pageY,t.clipEventState.evnt=i},e=function(i,e){var s=e-t.canvasFull.offsetTop-t.container.offsetTop,a=i-t.canvasFull.offsetLeft-t.container.offsetLeft;return s=Math.min(s,t.canvasFull.offsetHeight),s=Math.max(0,s),a=Math.min(a,t.canvasFull.offsetWidth),a=Math.max(0,a),t.curX=a,t.curY=s,{curX:a,curY:s}};this.getCurXY=e;var s=function(i){if(t.canResizing){i.preventDefault(),i.stopPropagation();var s=t.clipEventState,a=s.evnt.target,h=i.touches?i.touches[0].pageY:i.pageY,n=i.touches?i.touches[0].pageX:i.pageX,o=e(n,h),c=o.curX,r=o.curY,l=void 0,v=void 0,u=void 0,d=void 0;a.classList.contains("horn-nw")?(l=s.width-(c-s.left),v=s.height-(r-s.top),u=c,d=r):a.classList.contains("horn-ne")?(l=c-s.left,v=s.height-(r-s.top),u=s.left,d=r):a.classList.contains("horn-sw")?(l=s.width-(c-s.left),v=r-s.top,u=c,d=s.top):a.classList.contains("horn-se")?(l=c-s.left,v=r-s.top,u=s.left,d=s.top):a.classList.contains("horn-n")?(l=s.width,v=s.height-(r-s.top),u=s.left,d=r):a.classList.contains("horn-s")?(l=s.width,v=r-s.top,u=s.left,d=s.top):a.classList.contains("horn-w")?(l=s.width-(c-s.left),v=s.height,u=c,d=s.top):a.classList.contains("horn-e")&&(l=c-s.left,v=s.height,u=c-l,d=s.top),t.clipRect.style.left=u+t.marginLeft+"px",t.clipRect.style.top=d+"px",t.clipRect.style.width=l+"px",t.clipRect.style.height=v+"px",t.draw()}};this.container.addEventListener("touchmove",s),this.container.addEventListener("mousemove",s),this.events.touchmove=s,this.events.mousemove=s;var a=function(e){t.canResizing=!0,t.canvasMag.classList.remove("clip-hidden"),0===t.options.sizeTipsStyle&&t.clipTips.classList.remove("clip-hidden"),i(e)},h=function(){t.canResizing=!1,t.canvasMag.classList.add("clip-hidden"),0===t.options.sizeTipsStyle&&t.clipTips.classList.add("clip-hidden")};this.endHronsResize=h;for(var n=0;n<8;n+=1)this.clipRectHorns[n].addEventListener("mousedown",a),this.clipRectHorns[n].addEventListener("touchstart",a),this.clipRectHorns[n].addEventListener("mouseup",h),this.clipRectHorns[n].addEventListener("touchend",h)}},{key:"listenerRectMove",value:function(){var t=this,i=this.clipRect,e=function(e){if(!t.canResizing&&t.canMove){e.preventDefault(),e.stopPropagation();var s=t.options.minMoveDiff,a=e.touches?e.touches[0].pageY:e.pageY,h=e.touches?e.touches[0].pageX:e.pageX,n=h-t.prevRectMouseX,o=a-t.prevRectMouseY;if(n||o){(Math.abs(n)>s||Math.abs(o)>s)&&(t.prevRectMouseX=h,t.prevRectMouseY=a);var c=i.offsetTop+o,r=i.offsetLeft+n;c<0?c=0:c>t.canvasFull.offsetHeight-i.offsetHeight&&(c=t.canvasFull.offsetHeight-i.offsetHeight),rt.canvasFull.offsetWidth-i.offsetWidth+t.marginLeft&&(r=t.canvasFull.offsetWidth-i.offsetWidth+t.marginLeft),t.clipRect.style.left=r+"px",t.clipRect.style.top=c+"px",t.draw()}}};i.addEventListener("touchmove",e),i.addEventListener("mousemove",e);var s=function(i){t.canMove=!0;var e=i.touches?i.touches[0].pageY:i.pageY,s=i.touches?i.touches[0].pageX:i.pageX;t.prevRectMouseX=s,t.prevRectMouseY=e},a=function(){t.canMove=!1};this.endRectMove=a,i.addEventListener("mousedown",s),i.addEventListener("touchstart",s),i.addEventListener("mouseup",a),i.addEventListener("touchend",a)}},{key:"listenerContainerLeave",value:function(){var t=this,i=function(){t.canResizing&&t.endHronsResize(),t.canMove&&t.endRectMove()};this.container.addEventListener("mouseleave",i),this.container.addEventListener("mouseup",i),this.events.mouseleave=i,this.events.mouseup=i}},{key:"draw",value:function(){this.drawMag();var t=this.getRealFinalImgSize(this.clipRect.offsetWidth*this.RATIO_PIXEL,this.clipRect.offsetHeight*this.RATIO_PIXEL),i=t.width,e=t.height;this.clipTips.innerText=i.toFixed(0)+"*"+e.toFixed(0),this.ctxFull.save(),1&this.rotateStep?this.ctxFull.clearRect(0,0,this.canvasFull.height,this.canvasFull.width):this.ctxFull.clearRect(0,0,this.canvasFull.width,this.canvasFull.height),this.drawImage(),this.drawMask(),this.ctxFull.beginPath();var s=this.getClipRectParams(),a=s.srcX,h=s.srcY,n=s.sWidth,o=s.sHeight;this.ctxFull.rect(a,h,n,o),this.ctxFull.clip(),this.drawImage(),this.ctxFull.restore()}},{key:"getClipRectParams",value:function(){var t=this.clipRect.offsetTop,i=this.clipRect.offsetLeft-this.marginLeft,e=this.clipRect.offsetWidth,s=this.clipRect.offsetHeight,a=i+e,h=t+s,n=i,o=t,c=e,r=s;return 1===this.rotateStep?(n=t,o=this.canvasFull.offsetWidth-a,c=s,r=e):2===this.rotateStep?(n=this.canvasFull.offsetWidth-a,o=this.canvasFull.offsetHeight-h,c=e,r=s):3===this.rotateStep&&(n=this.canvasFull.offsetHeight-h,o=i,c=s,r=e),n*=this.RATIO_PIXEL,o*=this.RATIO_PIXEL,c*=this.RATIO_PIXEL,r*=this.RATIO_PIXEL,{srcX:n,srcY:o,sWidth:c,sHeight:r}}},{key:"getRealCoordinate",value:function(t,i){var e=t,s=i;return 1===this.rotateStep?(e=i,s=this.canvasFull.offsetWidth-t):2===this.rotateStep?(e=this.canvasFull.offsetWidth-t,s=this.canvasFull.offsetHeight-i):3===this.rotateStep&&(e=this.canvasFull.offsetHeight-i,s=t),e*=this.RATIO_PIXEL,s*=this.RATIO_PIXEL,{x:e,y:s}}},{key:"drawImage",value:function(){1&this.rotateStep?this.ctxFull.drawImage(this.img,0,0,this.img.width,this.img.height,0,0,this.canvasFull.height,this.canvasFull.width):this.ctxFull.drawImage(this.img,0,0,this.img.width,this.img.height,0,0,this.canvasFull.width,this.canvasFull.height)}},{key:"drawMask",value:function(){this.ctxFull.save(),this.ctxFull.fillStyle="rgba(0, 0, 0, 0.3)",1&this.rotateStep?this.ctxFull.fillRect(0,0,this.canvasFull.height,this.canvasFull.width):this.ctxFull.fillRect(0,0,this.canvasFull.width,this.canvasFull.height),this.ctxFull.restore()}},{key:"drawMag",value:function(){var t=this.options.captureRadius,i=this.getRealCoordinate(this.curX,this.curY),e=2*t,s=2*t,a=i.x-t,h=i.y-t;1&this.rotateStep?this.ctxMag.clearRect(0,0,this.canvasMag.height,this.canvasMag.width):this.ctxMag.clearRect(0,0,this.canvasMag.width,this.canvasMag.height);var n=0,o=0;this.os.ios&&(h<0&&(o=this.canvasMag.height/2*Math.abs(h/t),h=0),a<0&&(n=this.canvasMag.width/2*Math.abs(a/t),a=0)),this.ctxMag.drawImage(this.img,a/this.scale,h/this.scale,e/this.scale,s/this.scale,n,o,this.canvasMag.width,this.canvasMag.height);var c=this.canvasMag.width/2,r=this.canvasMag.height/2,l=5*this.RATIO_PIXEL;this.ctxMag.beginPath(),this.ctxMag.moveTo(c-l,r),this.ctxMag.lineTo(c+l,r),this.ctxMag.moveTo(c,r-l),this.ctxMag.lineTo(c,r+l),this.ctxMag.strokeStyle="#de3c50",this.ctxMag.lineWidth=3,this.ctxMag.stroke()}},{key:"initMagnifier",value:function(){this.canvasMag=document.createElement("canvas"),this.canvasMag.className="magnifier clip-hidden",this.ctxMag=this.canvasMag.getContext("2d"),this.smoothCtx(this.ctxMag),this.container.appendChild(this.canvasMag),this.domChildren.push(this.canvasMag),this.canvasMag.width=2*this.options.captureRadius*this.RATIO_PIXEL,this.canvasMag.height=2*this.options.captureRadius*this.RATIO_PIXEL}},{key:"initTransferCanvas",value:function(){this.canvasTransfer=document.createElement("canvas"),this.canvasTransfer.style.display="none",this.canvasTransfer.className="transfer-canvas",this.ctxTransfer=this.canvasTransfer.getContext("2d"),this.smoothCtx(this.ctxTransfer),this.container.appendChild(this.canvasTransfer),this.domChildren.push(this.canvasTransfer)}},{key:"smoothCtx",value:function(t){var i=this.options.isSmooth;t.mozImageSmoothingEnabled=i,t.webkitImageSmoothingEnabled=i,t.msImageSmoothingEnabled=i,t.imageSmoothingEnabled=i}},{key:"getRealFinalImgSize",value:function(t,i){var e=this.canvasFull.width/this.canvasFull.height,s=this.options.maxWidth||0,a=this.options.forceWidth||0,h=this.options.forceHeight||0,n=t,o=i;return 1&this.rotateStep?((this.options.isUseOriginSize||this.canvasFull.width>this.img.height)&&(n=this.img.width*t/this.canvasFull.height,o=this.img.height*i/this.canvasFull.width),s&&this.canvasFull.height>s&&sthis.img.width)&&(n=this.img.width*t/this.canvasFull.width,o=this.img.height*i/this.canvasFull.height),s&&this.canvasFull.width>s&&s3?this.rotateStep=0:this.rotateStep<0&&(this.rotateStep=3);var s=90*this.rotateStep*Math.PI/180;this.canvasMag.width=this.canvasMag.width,this.canvasMag.height=this.canvasMag.height,0===this.rotateStep?this.resizeCanvas(i,e):1===this.rotateStep?(this.resizeCanvas(e,i),this.ctxFull.rotate(s),this.ctxFull.translate(0,-this.canvasFull.width),this.ctxMag.rotate(s),this.ctxMag.translate(0,-this.canvasMag.width)):2===this.rotateStep?(this.resizeCanvas(i,e),this.ctxFull.rotate(s),this.ctxFull.translate(-this.canvasFull.width,-this.canvasFull.height),this.ctxMag.rotate(s),this.ctxMag.translate(-this.canvasMag.width,-this.canvasMag.height)):3===this.rotateStep&&(this.resizeCanvas(e,i),this.ctxFull.rotate(s),this.ctxFull.translate(-this.canvasFull.height,0),this.ctxMag.rotate(s),this.ctxMag.translate(-this.canvasMag.height,0)),this.resetClipRect()}},{key:"destroy",value:function(){this.clear(),this.canvasFull=null,this.ctxFull=null,this.canvasTransfer=null,this.ctxTransfer=null,this.canvasMag=null,this.ctxMag=null,this.clipRect=null}}]),a}(),R=void 0,x=void 0,M=void 0,F=void 0,S=void 0,T=void 0,y=void 0,L=void 0,I=void 0,E=void 0,C=void 0,k=void 0,P=void 0,X=void 0,H=void 0,z=void 0,W=function(t,i,e,s,a,h){var n=s,o=a;n>=e?n=e-1:n<0&&(n=0),o>=i?o=i-1:o<0&&(o=0);var c=n*i+o;return c*=4,t[c+h]},b=function(t){var i=t;return i=Math.min(255,i),i=Math.max(0,i)},O=function(t){var i=t;R=i[1][1],x=-.5*i[1][0]+.5*i[1][2],M=i[1][0]-2.5*i[1][1]+2*i[1][2]-.5*i[1][3],F=-.5*i[1][0]+1.5*i[1][1]-1.5*i[1][2]+.5*i[1][3],S=-.5*i[0][1]+.5*i[2][1],T=.25*i[0][0]-.25*i[0][2]-.25*i[2][0]+.25*i[2][2],y=-.5*i[0][0]+1.25*i[0][1]-i[0][2]+.25*i[0][3]+.5*i[2][0]-1.25*i[2][1]+i[2][2]-.25*i[2][3],L=.25*i[0][0]-.75*i[0][1]+.75*i[0][2]-.25*i[0][3]-.25*i[2][0]+.75*i[2][1]-.75*i[2][2]+.25*i[2][3],I=i[0][1]-2.5*i[1][1]+2*i[2][1]-.5*i[3][1],E=-.5*i[0][0]+.5*i[0][2]+1.25*i[1][0]-1.25*i[1][2]-i[2][0]+i[2][2]+.25*i[3][0]-.25*i[3][2],C=i[0][0]-2.5*i[0][1]+2*i[0][2]-.5*i[0][3]-2.5*i[1][0]+6.25*i[1][1]-5*i[1][2]+1.25*i[1][3]+2*i[2][0]-5*i[2][1]+4*i[2][2]-i[2][3]-.5*i[3][0]+1.25*i[3][1]-i[3][2]+.25*i[3][3],k=-.5*i[0][0]+1.5*i[0][1]-1.5*i[0][2]+.5*i[0][3]+1.25*i[1][0]-3.75*i[1][1]+3.75*i[1][2]-1.25*i[1][3]-i[2][0]+3*i[2][1]-3*i[2][2]+i[2][3]+.25*i[3][0]-.75*i[3][1]+.75*i[3][2]-.25*i[3][3],P=-.5*i[0][1]+1.5*i[1][1]-1.5*i[2][1]+.5*i[3][1],X=.25*i[0][0]-.25*i[0][2]-.75*i[1][0]+.75*i[1][2]+.75*i[2][0]-.75*i[2][2]-.25*i[3][0]+.25*i[3][2],H=-.5*i[0][0]+1.25*i[0][1]-i[0][2]+.25*i[0][3]+1.5*i[1][0]-3.75*i[1][1]+3*i[1][2]-.75*i[1][3]-1.5*i[2][0]+3.75*i[2][1]-3*i[2][2]+.75*i[2][3]+.5*i[3][0]-1.25*i[3][1]+i[3][2]-.25*i[3][3],z=.25*i[0][0]-.75*i[0][1]+.75*i[0][2]-.25*i[0][3]-.75*i[1][0]+2.25*i[1][1]-2.25*i[1][2]+.75*i[1][3]+.75*i[2][0]-2.25*i[2][1]+2.25*i[2][2]-.75*i[2][3]-.25*i[3][0]+.75*i[3][1]-.75*i[3][2]+.25*i[3][3]},A=function(t,i){var e=t*t,s=i*i,a=s*i;return R+x*i+M*s+F*a+(S+T*i+y*s+L*a)*t+(I+E*i+C*s+k*a)*e+(P+X*i+H*s+z*a)*(e*t)},_=-1,Y={width:80,height:80,mime:"image/png",processType:1},D={quality:.92,mime:"image/jpeg",compressScaleRatio:1,iphoneFixedRatio:1.5,isUseOriginSize:!1,maxWidth:0,forceWidth:0,forceHeight:0},N={};return function(i){function e(t){var i=t.backingStorePixelRatio||t.webkitBackingStorePixelRatio||t.mozBackingStorePixelRatio||t.msBackingStorePixelRatio||t.oBackingStorePixelRatio||t.backingStorePixelRatio||1;return(window.devicePixelRatio||1)/i}var s=i;s.scaleImageData=function(i,e,s){(0,[h,c,l,f][t({},Y,s).processType])(i,e)},s.scaleImage=function(i,e){var a=i.width,h=i.height,n=t({},Y,e),o=document.createElement("canvas"),c=o.getContext("2d");o.width=a,o.height=h,c.drawImage(i,0,0,a,h);var r=c.getImageData(0,0,a,h),l=c.createImageData(n.width,n.height);return s.scaleImageData(r,l,n),o.width=l.width,o.height=l.height,c.putImageData(l,0,0,0,0,o.width,o.height),o.toDataURL(n.mime,.9)},s.compressImage=function(i,s){var a=i.width,h=i.height,n=a/h,o=t({},D,s),c=document.createElement("canvas"),r=c.getContext("2d"),l=e(r);l*=o.compressScaleRatio||1,navigator.userAgent.match(/(iPhone\sOS)\s([\d_]+)/)&&(l*=o.iphoneFixedRatio||1);var v=window.innerWidth*l;(o.isUseOriginSize||v>a)&&(v=a);var u=o.maxWidth;u&&a>u&&v>u&&(v=u);var d=o.forceWidth,g=o.forceHeight;d&&(v=d);var f=v/n;return g&&(f=g),c.width=v,c.height=f,r.drawImage(i,0,0,a,h,0,0,c.width,c.height),c.toDataURL(o.mime,o.quality)}}(N),N.ImgClip=w,N}); \ No newline at end of file diff --git a/package.json b/package.json index 5d46673..c2de6cf 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "image-process", - "version": "0.0.1", + "version": "0.0.2", "description": "图像裁剪，图像缩放(最邻近插值，双线性差值，三次卷积插值)，图像滤镜（灰度，模糊，锐化，卡通），应用（边缘识别，水印）等", "homepage": "https://github.com/dailc/image-process", "repository": { diff --git a/src/clip/clip.js b/src/clip/clip.js index 39bffa2..f92ffb7 100644 --- a/src/clip/clip.js +++ b/src/clip/clip.js @@ -17,6 +17,8 @@ const defaultetting = { isSmooth: true, // 放大镜捕获的图像半径 captureRadius: 30, + // 移动矩形框时的最小间距 + minMoveDiff: 1, // 压缩质量 quality: 0.92, mime: 'image/jpeg', @@ -199,6 +201,12 @@ class ImgClip { } resizeClip() { + this.listenerHornsResize(); + this.listenerRectMove(); + this.listenerContainerLeave(); + } + + listenerHornsResize() { this.clipEventState = {}; const saveEventState = (e) => { @@ -228,6 +236,8 @@ class ImgClip { curY, }; }; + this.getCurXY = getCurXY; + const moving = (e) => { if (!this.canResizing) { return; @@ -307,7 +317,7 @@ class ImgClip { this.events.touchmove = moving; this.events.mousemove = moving; - + const startResize = (e) => { this.canResizing = true; this.canvasMag.classList.remove('clip-hidden'); @@ -323,6 +333,8 @@ class ImgClip { this.clipTips.classList.add('clip-hidden'); } }; + + this.endHronsResize = endResize; for (let i = 0; i < 8; i += 1) { this.clipRectHorns[i].addEventListener('mousedown', startResize); @@ -331,11 +343,94 @@ class ImgClip { this.clipRectHorns[i].addEventListener('mouseup', endResize); this.clipRectHorns[i].addEventListener('touchend', endResize); } + } + + listenerRectMove() { + const rectDom = this.clipRect; + + const moving = (e) => { + if (this.canResizing || !this.canMove) { + return; + } + e.preventDefault(); + e.stopPropagation(); + const MIN_DIFF = this.options.minMoveDiff; + const mouseY = e.touches ? e.touches[0].pageY : e.pageY; + const mouseX = e.touches ? e.touches[0].pageX : e.pageX; + + const diffX = mouseX - this.prevRectMouseX; + const diffY = mouseY - this.prevRectMouseY; + + if (!diffX && !diffY) { + return; + } + + if (Math.abs(diffX) > MIN_DIFF || Math.abs(diffY) > MIN_DIFF) { + this.prevRectMouseX = mouseX; + this.prevRectMouseY = mouseY; + } + + let top = rectDom.offsetTop + diffY; + let left = rectDom.offsetLeft + diffX; + + if (top < 0) { + top = 0; + } else if (top > this.canvasFull.offsetHeight - rectDom.offsetHeight) { + top = this.canvasFull.offsetHeight - rectDom.offsetHeight; + } + + if (left < this.marginLeft) { + left = this.marginLeft; + } else if (left > this.canvasFull.offsetWidth - rectDom.offsetWidth + this.marginLeft) { + left = this.canvasFull.offsetWidth - rectDom.offsetWidth + this.marginLeft; + } + + // 这里无须再补上marginLeft + this.clipRect.style.left = `${left}px`; + this.clipRect.style.top = `${top}px`; + this.draw(); + }; + + rectDom.addEventListener('touchmove', moving); + rectDom.addEventListener('mousemove', moving); + + const startMove = (e) => { + this.canMove = true; + + const mouseY = e.touches ? e.touches[0].pageY : e.pageY; + const mouseX = e.touches ? e.touches[0].pageX : e.pageX; + + this.prevRectMouseX = mouseX; + this.prevRectMouseY = mouseY; + }; + + const endMove = () => { + this.canMove = false; + }; + + this.endRectMove = endMove; + + rectDom.addEventListener('mousedown', startMove); + rectDom.addEventListener('touchstart', startMove); + + rectDom.addEventListener('mouseup', endMove); + rectDom.addEventListener('touchend', endMove); + } + + listenerContainerLeave() { + const leaveContainer = () => { + if (this.canResizing) { + this.endHronsResize(); + } + if (this.canMove) { + this.endRectMove(); + } + }; - this.container.addEventListener('mouseleave', endResize); - this.container.addEventListener('mouseup', endResize); - this.events.mouseleave = endResize; - this.events.mouseup = endResize; + this.container.addEventListener('mouseleave', leaveContainer); + this.container.addEventListener('mouseup', leaveContainer); + this.events.mouseleave = leaveContainer; + this.events.mouseup = leaveContainer; } draw() { diff --git a/src/clip/styl/imageclip.styl b/src/clip/styl/imageclip.styl index 553a1b1..e73402f 100644 --- a/src/clip/styl/imageclip.styl +++ b/src/clip/styl/imageclip.styl @@ -29,6 +29,7 @@ left: 10px; width: 100px; height: 100px; + cursor: move; .clip-tips position: absolute;