preview-image/preview-image.js

preview image

(function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("hammerjs")):"function"==typeof define&&define.amd?define("PreviewImage",["hammerjs"],e):"object"==typeof exports?exports.PreviewImage=e(require("hammerjs")):t.PreviewImage=e(t.hammerjs)})(this,function(t){return function(t){function e(n){if(i[n])return i[n].exports;var o=i[n]={i:n,l:!1,exports:{}};return t[n].call(o.exports,o,o.exports,e),o.l=!0,o.exports}var i={};return e.m=t,e.c=i,e.i=function(t){return t},e.d=function(t,i,n){e.o(t,i)||Object.defineProperty(t,i,{configurable:!1,enumerable:!0,get:n})},e.n=function(t){var i=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(i,"a",i),i},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=4)}([function(t,e,i){"use strict";(function(){for(var t=0,e=["webkit","moz"],i=0;i<e.length&&!window.requestAnimationFrame;++i)window.requestAnimationFrame=window[e[i]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[e[i]+"CancelAnimationFrame"]||window[e[i]+"CancelRequestAnimationFrame"];window.requestAnimationFrame||(window.requestAnimationFrame=function(e){var i=(new Date).getTime(),n=Math.max(0,16-(i-t)),o=window.setTimeout(function(){e(i+n)},n);return t=i+n,o}),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(t){clearTimeout(t)})})()},function(t,e,i){"use strict";function n(t,e){return t+e}function o(t,e){return(t+e)/2}function s(t,e){return t-e}function a(t,e){return t+e}function r(t,e,i){return s(t,e)/i}function h(t,e,i){return a(t*i,e)}function c(t,e,i){var n=t*i;return n<=e?{min:(e-n)/2,max:(e-n)/2}:{min:e-n,max:0}}function l(t,e){return t*e}function u(t){return Math.sqrt(1-Math.pow(t-1,2))}function d(t,e,i,n){var o=1;return o=t/e<i/n?-1:1,1===o?{w:i,h:Math.floor(i/t*e)}:{h:n,w:Math.floor(n/e*t)}}Object.defineProperty(e,"__esModule",{value:!0}),e.calcCoordWithDiff=n,e.calcAverage=o,e.calcRelativeCoord=s,e.calcRealCoord=a,e.calcRelativeCoordBeforeScale=r,e.calcRealCoordAfterScale=h,e.calcRangeCoord=c,e.covertRealCoord=l,e.ease=u,e.calcJustSize=d},function(t,e,i){"use strict";function n(t){return"object"===("undefined"==typeof HTMLElement?"undefined":d(HTMLElement))?t instanceof HTMLElement:t&&"object"===(void 0===t?"undefined":d(t))&&1===t.nodeType&&"string"==typeof t.nodeName}function o(t,e){if("object"===(void 0===e?"undefined":d(e)))for(var i in e)t.style[i]=e[i]}function s(t){var e=this,i=document.createElement("img"),n=function(t,i){e.AFTER_HOOK&&e.AFTER_HOOK(null,i),e.AFTER_HOOK=null},o=function(){var t=new Error("图片加载失败");e.AFTER_HOOK&&e.AFTER_HOOK(t,i),e.AFTER_HOOK=null};return i.addEventListener("load",function(t){n(null,i)}),i.addEventListener("error",function(t){o()}),i.src=t,i.complete&&n(null,i),this}function a(t){var e=t.style.width,i=t.style.height,n=t.getBoundingClientRect(),o=n.width,s=n.height;return e&&(o=e.slice(0,-2)),i&&(s=i.slice(0,-2)),{w:+o,h:+s}}function r(t,e,i){var s=document.createElement(t);return e&&o(s,e),i&&n(i)&&s.appendChild(i),s}function h(t){var e=t.img,i=t.sw,n=t.sh,o=t.cw,s=t.ch,a=t.rotate,r=document.createElement("canvas"),h=r.getContext("2d");return r.width=o,r.height=s,h.translate(o/2,s/2),h.rotate(a*Math.PI/180),h.drawImage(e,-i/2,-n/2,i,n),r}function c(){for(var t=navigator.userAgent,e=new Array("Android","iPhone","SymbianOS","Windows Phone","iPad","iPod"),i=!0,n=0;n<e.length;n++)if(t.indexOf(e[n])>0){i=!1;break}return i}function l(t){return Math.floor(100*t)/100}function u(t){return window.getComputedStyle?window.getComputedStyle(t,""):t.currentStyle}Object.defineProperty(e,"__esModule",{value:!0});var d="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t};s.prototype.after=function(t){this.AFTER_HOOK=t},e.isDom=n,e.setStyle=o,e.pullImage=s,e.getSize=a,e.createElement=r,e.getOffCanvas=h,e.toFixed=l,e.isPc=c,e.getStyle=u},function(e,i){e.exports=t},function(t,e,i){"use strict";function n(t){if(t&&t.__esModule)return t;var e={};if(null!=t)for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e.default=t,e}function o(t){return t&&t.__esModule?t:{default:t}}function s(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(e,"__esModule",{value:!0});var a=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),r=i(3),h=(o(r),i(1)),c=n(h),l=i(2),u=n(l);i(0);var d=function(){function t(e,i,n){s(this,t),this.context=e,this.imgSrc=i,this.options=n,this.dpr=window.devicePixelRatio||1,this.canMoveX=!1,this.canMoveY=!1,this.angle=this.options.angled,this.scale=this.options.minZoom,this.events={tap:this._tap.bind(this),doubletap:this._doubleTap.bind(this),pinchstart:this._pinchStart.bind(this),pinchmove:this._pinchMove.bind(this),pinchend:this._pinchEnd.bind(this),panstart:this._panStart.bind(this),panmove:this._panMove.bind(this),panend:this._panEnd.bind(this)},this._init()}return a(t,[{key:"_init",value:function(){if(this.context){var t=u.getSize(this.context);"static"===u.getStyle(this.context).position&&u.setStyle(this.context,{position:"relative"}),this.canvas=u.createElement("canvas",{width:t.w+"px",height:t.h+"px",position:"absolute",left:0,top:0,textAlign:"center",lineHeight:t.h+"px",fontSize:"16px",color:"white"}),this.canvas.innerHTML="您的浏览器不支持 canvas 请升级您的浏览器",this.context.appendChild(this.canvas),this.cw=t.w*this.dpr,this.ch=t.h*this.dpr,this.ox=this.cw/2,this.oy=this.ch/2,this.canvas.width=this.cw,this.canvas.height=this.ch,this.ctx=this.canvas.getContext("2d"),this._checkPosition()}}},{key:"_checkPosition",value:function(){var t=this.context.getBoundingClientRect();this.screenX=t.left,this.screenY=t.top}},{key:"_createLongTapImg",value:function(t){u.setStyle(t,{position:"absolute",left:"0",top:"0",zIndex:9999,opacity:0,filter:"alpha(0)",width:"100%",height:"100%"}),t.draggable=!1,this.context.appendChild(t)}},{key:"_draw",value:function(){this.ctx.clearRect(0,0,this.cw,this.ch),this.ctx.save(),this.ctx.translate(this.ox,this.oy),this.ctx.scale(this.scale,this.scale),this.ctx.drawImage(this.drawCan,this.sx,this.sy,this.dw,this.dh),this.ctx.restore()}},{key:"_transition",value:function(t,e,i,n){var o=this[t],s=e-o,a=new Date,r=this,h=c.ease;(function c(){var l=new Date-a;if(l>=i)return r[t]=e,r._draw(),cancelAnimationFrame(r[t+"tickID"]),r[t+"tickID"]=null,void(n&&n(11));r[t]=s*h(l/i)+o,r._draw(),r[t+"tickID"]=requestAnimationFrame(c)})()}},{key:"_transitionScale",value:function(t,e){this._transition("scale",t,400,e)}},{key:"_transitionPan",value:function(t,e,i){this._transition(t,e,400,i)}},{key:"_tap",value:function(t){var e=this;clearTimeout(this._tapTimer),this._tapTimer=setTimeout(function(){e.options.tap&&e.options.tap(t)},200)}},{key:"_doubleTapMath",value:function(t,e,i,n,o,s){var a=c.covertRealCoord(t,this.dpr),r=c.calcRelativeCoordBeforeScale(e,a,this.scale),h=c.calcRealCoordAfterScale(r,a,s),l=c.calcRangeCoord(n,o,s),u=a;return l.min===l.max?u=o/2:(h<l.min&&(u=(l.min-e*s/this.scale)/(1-s/this.scale)),h>l.max&&(u=(l.max-e*s/this.scale)/(1-s/this.scale))),{origin:u,sCoord:c.calcRelativeCoordBeforeScale(i,u,this.scale)}}},{key:"_doubleTap",value:function(t){var e=this;clearTimeout(this._tapTimer);var i=c.calcAverage(this.options.minZoom,this.options.doubleZoom),n=this.scale>i?this.options.minZoom:this.options.doubleZoom;if(n===this.options.doubleZoom){var o=t.center.x-this.screenX,s=t.center.y-this.screenY,a=this._doubleTapMath(o,this.realInSx,this.realSx,this.sw,this.cw,n),r=this._doubleTapMath(s,this.realInSy,this.realSy,this.sh,this.ch,n);this._updateCoord(a.origin,r.origin,a.sCoord,r.sCoord,function(){e._transitionScale(n)})}else this.reset()}},{key:"_panStart",value:function(t){this.lastPanX=t.deltaX,this.lastPanY=t.deltaY}},{key:"_panMove",value:function(t){var e=this;if(!this.isPinch){var i=t.deltaX,n=t.deltaY,o=(i-this.lastPanX)*this.dpr,s=(n-this.lastPanY)*this.dpr;this.lastPanX=i,this.lastPanY=n;var a=c.calcRealCoordAfterScale(this.inSx,this.ox+o,this.scale),r=c.calcRealCoordAfterScale(this.inSy,this.oy+s,this.scale),h=this.rangeInSx,l=this.rangeInSy,u=this.ox,d=this.oy;this.options.softX||a>=h.min&&a<=h.max?(this.canMoveX=!0,u+=o):this.canMoveX=!1,this.options.softY||r>=l.min&&r<=l.max?(this.canMoveY=!0,d+=s):this.canMoveY=!1,this._updateCoord(u,d,this.sx,this.sy,function(){e._draw()}),t.preventDefault()}}},{key:"_panEnd",value:function(){if(!this.isPinch){var t=this.ox,e=this.oy,i=this.realInSx,n=this.rangeInSx;i<n.min?t=this.ox+n.min-i:i>n.max&&(t=this.ox+n.max-i);var o=this.realInSy,s=this.rangeInSy;o<s.min?e=this.oy+s.min-o:o>s.max&&(e=this.oy+s.max-o),t!==this.ox&&this._transitionPan("ox",t),e!==this.oy&&this._transitionPan("oy",e)}}},{key:"_calcRealCoord",value:function(t,e,i,n,o){var s=i+(this.dw-this.sw)/2,a=n+(this.dh-this.sh)/2,r=c.calcRealCoord(s*o,t),h=c.calcRealCoord(a*o,e),l=c.calcRangeCoord(this.sw,this.cw,o),u=c.calcRangeCoord(this.sh,this.ch,o);return r<l.min?r=l.min:r>l.max&&(r=l.max),h<u.min?h=u.min:h>u.max&&(h=u.max),{realSx:((r-t)/o-(this.dw-this.sw)/2)*o+t,realSy:((h-e)/o-(this.dh-this.sh)/2)*o+e}}},{key:"_calcRightPalace",value:function(t){if(t<=1){var e=this.cw/2,i=this.ch/2,n=-this.dw/2,o=-this.dh/2,s=c.calcRealCoord(n*t,e),a=c.calcRealCoord(o*t,i),r=(s-this.realSx)/(t-this.scale),h=(a-this.realSy)/(t-this.scale),l=-r*t+s,u=-h*t+a;this.ox=l,this.oy=u,this.sx=r,this.sy=h}else{var d=this._calcRealCoord(this.ox,this.oy,this.sx,this.sy,t),f=d.realSx,m=d.realSy,p=(f-this.realSx)/(t-this.scale),y=(m-this.realSy)/(t-this.scale),v=-p*t+f,w=-y*t+m;this.ox=v,this.oy=w,this.sx=p,this.sy=y}}},{key:"_pinchStart",value:function(t){this._startPinchScale=t.scale}},{key:"_pinchMove",value:function(t){this.isPinch=!0;var e=t.center.x-this.screenX,i=t.center.y-this.screenY,n=c.covertRealCoord(e,this.dpr),o=c.covertRealCoord(i,this.dpr),s=c.calcRelativeCoordBeforeScale(this.realSx,n,this.scale),a=c.calcRelativeCoordBeforeScale(this.realSy,o,this.scale);this._endPinchScale=t.scale;var r=this._endPinchScale/this._startPinchScale;this._startPinchScale=t.scale,this.ox=n,this.oy=o,this.sx=s,this.sy=a,this.scale*=r,this._draw()}},{key:"_pinchEnd",value:function(t){var e=this,i=this.scale;i<this.options.minZoom?(i=this.options.minZoom,this._calcRightPalace(i)):i>this.options.maxZoom&&(i=this.options.maxZoom,this._calcRightPalace(i)),i!==this.scale?this._transitionScale(i,function(){e.isPinch=!1}):(this.isPinch=!1,this._panEnd())}},{key:"_updateCoord",value:function(t,e,i,n,o){this.ox=t,this.oy=e,this.sx=i,this.sy=n,o&&o()}},{key:"show",value:function(){var t=this;if(this.context){if(this.sOffCan)return this.bind();var e=this;new u.pullImage(this.imgSrc).after(function(i,n){if(i)return e.options.err&&e.options.err(i),i;e.options.load&&e.options.load(n);var o={},s=0,a=0;e.angle%90==0&&e.angle/90%2!=0?(o=c.calcJustSize(n.height,n.width,e.cw,e.ch),a=o.w,s=o.h):(o=c.calcJustSize(n.width,n.height,e.cw,e.ch),s=o.w,a=o.h),e.sw=o.w,e.sh=o.h,e.sOffCan=u.getOffCanvas({img:n,sw:s,sh:a,cw:o.w,ch:o.h,rotate:e.angle}),e.dw=e.dh=Math.ceil(Math.sqrt(Math.pow(o.w,2)+Math.pow(o.h,2))),e.drawCan=u.getOffCanvas({img:e.sOffCan,sw:e.sw,sh:e.sh,cw:e.dw,ch:e.dh,rotate:0}),e.sx=-e.dw/2,e.sy=-e.dh/2,e.initSx=c.calcRealCoord(e.sx*t.scale,t.ox),e.initSy=c.calcRealCoord(e.sy*t.scale,t.oy),e.options.longPressDownload&&e._createLongTapImg(n),e._draw(),e.bind()}),this.hammer=new Hammer(this.context),this.hammer.get("pinch").set({enable:!0}),this.hammer.get("doubletap").set({posThreshold:60}),this.hammer.get("pan").set({threshold:.1})}}},{key:"bind",value:function(){if(!this._bind&&this.sOffCan){this._bind=!0;for(var t in this.events)this.hammer.on(t,this.events[t])}}},{key:"unbind",value:function(){if(this._bind&&this.sOffCan){this._bind=!1;for(var t in this.events)this.hammer.off(t,this.events[t])}}},{key:"reset",value:function(){var t=this;if(this.scale!==this.options.minZoom){var e=this.realSx,i=this.realSy,n=this.initSx,o=this.initSy,s=(n*this.scale/this.options.minZoom-e)/(this.scale/this.options.minZoom-1),a=(o*this.scale/this.options.minZoom-i)/(this.scale/this.options.minZoom-1),r=c.calcRelativeCoordBeforeScale(n,s,this.options.minZoom),h=c.calcRelativeCoordBeforeScale(o,a,this.options.minZoom);this._updateCoord(s,a,r,h,function(){t._transitionScale(t.options.minZoom)})}}},{key:"angle",get:function(){return this._angle||0},set:function(t){this._angle=t%90!=0?0:t%360}},{key:"context",get:function(){return this._context},set:function(t){u.isDom(t)&&(this._context=t)}},{key:"imgSrc",get:function(){return this._imgSrc},set:function(t){"string"==typeof t&&(this._imgSrc=t)}},{key:"options",get:function(){return this._options},set:function(t){this._options={doubleZoom:2,maxZoom:4,minZoom:1,longPressDownload:!1,angled:0,softX:!0,softY:!0,tap:null,load:null,err:null};for(var e in t)Object.prototype.hasOwnProperty.call(t,e)&&(this._options[e]=t[e]);this.angle=this.options.angled}},{key:"inSx",get:function(){return c.calcCoordWithDiff(this.sx,(this.dw-this.sw)/2)}},{key:"inSy",get:function(){return c.calcCoordWithDiff(this.sy,(this.dh-this.sh)/2)}},{key:"realInSx",get:function(){return c.calcRealCoordAfterScale(this.inSx,this.ox,this.scale)}},{key:"realInSy",get:function(){return c.calcRealCoordAfterScale(this.inSy,this.oy,this.scale)}},{key:"realSx",get:function(){return c.calcRealCoordAfterScale(this.sx,this.ox,this.scale)}},{key:"realSy",get:function(){return c.calcRealCoordAfterScale(this.sy,this.oy,this.scale)}},{key:"rangeInSx",get:function(){return c.calcRangeCoord(this.sw,this.cw,this.scale)}},{key:"rangeInSy",get:function(){return c.calcRangeCoord(this.sh,this.ch,this.scale)}}]),t}();e.default=d}])});