vue-croppa
Advanced tools
Comparing version 0.3.3 to 0.3.4
/* | ||
* vue-croppa v0.3.3 | ||
* vue-croppa v0.3.4 | ||
* https://github.com/zhanziyang/vue-croppa | ||
@@ -542,3 +542,5 @@ * | ||
} else { | ||
this.imageSet = false; | ||
if (this.preventWhiteSpace) { | ||
this.imageSet = false; | ||
} | ||
this.setSize(); | ||
@@ -552,3 +554,5 @@ this.placeImage(); | ||
} else { | ||
this.imageSet = false; | ||
if (this.preventWhiteSpace) { | ||
this.imageSet = false; | ||
} | ||
this.setSize(); | ||
@@ -581,3 +585,5 @@ this.placeImage(); | ||
preventWhiteSpace: function preventWhiteSpace() { | ||
this.imageSet = false; | ||
if (this.preventWhiteSpace) { | ||
this.imageSet = false; | ||
} | ||
this.placeImage(); | ||
@@ -584,0 +590,0 @@ } |
/* | ||
* vue-croppa v0.3.3 | ||
* vue-croppa v0.3.4 | ||
* https://github.com/zhanziyang/vue-croppa | ||
@@ -8,2 +8,2 @@ * | ||
*/ | ||
!function(t,i){"object"==typeof exports&&"undefined"!=typeof module?module.exports=i():"function"==typeof define&&define.amd?define(i):t.Croppa=i()}(this,function(){"use strict";function t(t){if(null===t||void 0===t)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(t)}"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self&&self;var i=function(t,i){return i={exports:{}},t(i,i.exports),i.exports}(function(t,i){!function(i,e){t.exports=e()}(0,function(){function t(t,i,e,a,n,o){if(!/^[1-8]$/.test(i))throw new Error("orientation should be [1-8]");null==e&&(e=0),null==a&&(a=0),null==n&&(n=t.width),null==o&&(o=t.height);var r=document.createElement("canvas"),s=r.getContext("2d");switch(r.width=n,r.height=o,s.save(),+i){case 1:break;case 2:s.translate(n,0),s.scale(-1,1);break;case 3:s.translate(n,o),s.rotate(1*Math.PI);break;case 4:s.translate(0,o),s.scale(1,-1);break;case 5:r.width=o,r.height=n,s.rotate(.5*Math.PI),s.scale(1,-1);break;case 6:r.width=o,r.height=n,s.rotate(.5*Math.PI),s.translate(0,-o);break;case 7:r.width=o,r.height=n,s.rotate(1.5*Math.PI),s.translate(-n,o),s.scale(1,-1);break;case 8:r.width=o,r.height=n,s.translate(0,n),s.rotate(1.5*Math.PI)}return s.drawImage(t,e,a,n,o),s.restore(),r}return{drawImage:t}})}),e={onePointCoord:function(t,i){var e=i.canvas,a=i.quality,n=e.getBoundingClientRect(),o=t.clientX,r=t.clientY;return{x:(o-n.left)*a,y:(r-n.top)*a}},getPointerCoords:function(t,i){var e=void 0;return e=t.touches&&t.touches[0]?t.touches[0]:t.changedTouches&&t.changedTouches[0]?t.changedTouches[0]:t,this.onePointCoord(e,i)},getPinchDistance:function(t,i){var e=t.touches[0],a=t.touches[1],n=this.onePointCoord(e,i),o=this.onePointCoord(a,i);return Math.sqrt(Math.pow(n.x-o.x,2)+Math.pow(n.y-o.y,2))},getPinchCenterCoord:function(t,i){var e=t.touches[0],a=t.touches[1],n=this.onePointCoord(e,i),o=this.onePointCoord(a,i);return{x:(n.x+o.x)/2,y:(n.y+o.y)/2}},imageLoaded:function(t){return t.complete&&0!==t.naturalWidth},rAFPolyfill:function(){if("undefined"!=typeof document&&"undefined"!=typeof window){for(var t=0,i=["webkit","moz"],e=0;e<i.length&&!window.requestAnimationFrame;++e)window.requestAnimationFrame=window[i[e]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[i[e]+"CancelAnimationFrame"]||window[i[e]+"CancelRequestAnimationFrame"];window.requestAnimationFrame||(window.requestAnimationFrame=function(i){var e=(new Date).getTime(),a=Math.max(0,16.7-(e-t)),n=window.setTimeout(function(){i(e+a)},a);return t=e+a,n}),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(t){clearTimeout(t)}),Array.isArray=function(t){return"[object Array]"===Object.prototype.toString.call(t)}}},toBlobPolyfill:function(){if("undefined"!=typeof document&&"undefined"!=typeof window&&HTMLCanvasElement){var t,i,e;HTMLCanvasElement.prototype.toBlob||Object.defineProperty(HTMLCanvasElement.prototype,"toBlob",{value:function(a,n,o){t=atob(this.toDataURL(n,o).split(",")[1]),i=t.length,e=new Uint8Array(i);for(var r=0;r<i;r++)e[r]=t.charCodeAt(r);a(new Blob([e],{type:n||"image/png"}))}})}},eventHasFile:function(t){var i=t.dataTransfer||t.originalEvent.dataTransfer;if(i.types)for(var e=0,a=i.types.length;e<a;e++)if("Files"==i.types[e])return!0;return!1},getFileOrientation:function(t){var i=new DataView(t);if(65496!=i.getUint16(0,!1))return-2;for(var e=i.byteLength,a=2;a<e;){var n=i.getUint16(a,!1);if(a+=2,65505==n){if(1165519206!=i.getUint32(a+=2,!1))return-1;var o=18761==i.getUint16(a+=6,!1);a+=i.getUint32(a+4,o);var r=i.getUint16(a,o);a+=2;for(var s=0;s<r;s++)if(274==i.getUint16(a+12*s,o))return i.getUint16(a+12*s+8,o)}else{if(65280!=(65280&n))break;a+=i.getUint16(a,!1)}}return-1},base64ToArrayBuffer:function(t){t=t.replace(/^data:([^;]+);base64,/gim,"");for(var i=atob(t),e=i.length,a=new Uint8Array(e),n=0;n<e;n++)a[n]=i.charCodeAt(n);return a.buffer},getRotatedImage:function(t,e){var a=i.drawImage(t,e),n=new Image;return n.src=a.toDataURL(),n},flipX:function(t){return t%2==0?t-1:t+1},flipY:function(t){return{1:4,4:1,2:3,3:2,5:8,8:5,6:7,7:6}[t]},rotate90:function(t){return{1:6,2:7,3:8,4:5,5:2,6:3,7:4,8:1}[t]},numberValid:function(t){return"number"==typeof t&&!isNaN(t)}};Number.isInteger=Number.isInteger||function(t){return"number"==typeof t&&isFinite(t)&&Math.floor(t)===t};var a={value:Object,width:{type:Number,default:200,validator:function(t){return t>0}},height:{type:Number,default:200,validator:function(t){return t>0}},placeholder:{type:String,default:"Choose an image"},placeholderColor:{default:"#606060"},placeholderFontSize:{type:Number,default:0,validator:function(t){return t>=0}},canvasColor:{default:"transparent"},quality:{type:Number,default:2,validator:function(t){return Number.isInteger(t)&&t>0}},zoomSpeed:{default:3,type:Number,validator:function(t){return t>0}},accept:{type:String,default:".jpg,.jpeg,.png,.gif,.bmp,.webp,.svg,.tiff"},fileSizeLimit:{type:Number,default:0,validator:function(t){return t>=0}},disabled:Boolean,disableDragAndDrop:Boolean,disableClickToChoose:Boolean,disableDragToMove:Boolean,disableScrollToZoom:Boolean,disablePinchToZoom:Boolean,disableRotation:Boolean,reverseScrollToZoom:Boolean,preventWhiteSpace:Boolean,showRemoveButton:{type:Boolean,default:!0},removeButtonColor:{type:String,default:"red"},removeButtonSize:{type:Number},initialImage:[String,HTMLImageElement],initialSize:{type:String,default:"cover",validator:function(t){return"cover"===t||"contain"===t||"natural"===t}},initialPosition:{type:String,default:"center",validator:function(t){return["center","top","bottom","left","right","top left","top right","bottom left","bottom right","left top","right top","left bottom","right bottom"].indexOf(t)>=0||/^-?\d+% -?\d+%$/.test(t)}}},n={INIT_EVENT:"init",FILE_CHOOSE_EVENT:"file-choose",FILE_SIZE_EXCEED_EVENT:"file-size-exceed",FILE_TYPE_MISMATCH_EVENT:"file-type-mismatch",NEW_IMAGE:"new-image",IMAGE_REMOVE_EVENT:"image-remove",MOVE_EVENT:"move",ZOOM_EVENT:"zoom",DRAW:"draw",INITIAL_IMAGE_LOADED_EVENT:"initial-image-loaded"},o="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},r={render:function(){var t=this,i=t.$createElement,e=t._self._c||i;return e("div",{ref:"wrapper",class:"croppa-container "+(t.img?"croppa--has-target":"")+" "+(t.disabled?"croppa--disabled":"")+" "+(t.disableClickToChoose?"croppa--disabled-cc":"")+" "+(t.disableDragToMove&&t.disableScrollToZoom?"croppa--disabled-mz":"")+" "+(t.fileDraggedOver?"croppa--dropzone":""),on:{dragenter:function(i){i.stopPropagation(),i.preventDefault(),t.handleDragEnter(i)},dragleave:function(i){i.stopPropagation(),i.preventDefault(),t.handleDragLeave(i)},dragover:function(i){i.stopPropagation(),i.preventDefault(),t.handleDragOver(i)},drop:function(i){i.stopPropagation(),i.preventDefault(),t.handleDrop(i)}}},[e("input",{ref:"fileInput",attrs:{type:"file",accept:t.accept,disabled:t.disabled,hidden:""},on:{change:t.handleInputChange}}),e("div",{staticClass:"slots",staticStyle:{width:"0",height:"0",visibility:"hidden"}},[t._t("initial"),t._t("placeholder")],2),e("canvas",{ref:"canvas",on:{click:function(i){i.stopPropagation(),i.preventDefault(),t.handleClick(i)},touchstart:function(i){i.stopPropagation(),t.handlePointerStart(i)},mousedown:function(i){i.stopPropagation(),i.preventDefault(),t.handlePointerStart(i)},pointerstart:function(i){i.stopPropagation(),i.preventDefault(),t.handlePointerStart(i)},touchend:function(i){i.stopPropagation(),i.preventDefault(),t.handlePointerEnd(i)},touchcancel:function(i){i.stopPropagation(),i.preventDefault(),t.handlePointerEnd(i)},mouseup:function(i){i.stopPropagation(),i.preventDefault(),t.handlePointerEnd(i)},pointerend:function(i){i.stopPropagation(),i.preventDefault(),t.handlePointerEnd(i)},pointercancel:function(i){i.stopPropagation(),i.preventDefault(),t.handlePointerEnd(i)},touchmove:function(i){i.stopPropagation(),t.handlePointerMove(i)},mousemove:function(i){i.stopPropagation(),i.preventDefault(),t.handlePointerMove(i)},pointermove:function(i){i.stopPropagation(),i.preventDefault(),t.handlePointerMove(i)},DOMMouseScroll:function(i){i.stopPropagation(),t.handleWheel(i)},wheel:function(i){i.stopPropagation(),t.handleWheel(i)},mousewheel:function(i){i.stopPropagation(),t.handleWheel(i)}}}),t.showRemoveButton&&t.img?e("svg",{staticClass:"icon icon-remove",style:"top: -"+t.height/40+"px; right: -"+t.width/40+"px",attrs:{viewBox:"0 0 1024 1024",version:"1.1",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink",width:t.removeButtonSize||t.width/10,height:t.removeButtonSize||t.width/10},on:{click:t.remove}},[e("path",{attrs:{d:"M511.921231 0C229.179077 0 0 229.257846 0 512 0 794.702769 229.179077 1024 511.921231 1024 794.781538 1024 1024 794.702769 1024 512 1024 229.257846 794.781538 0 511.921231 0ZM732.041846 650.633846 650.515692 732.081231C650.515692 732.081231 521.491692 593.683692 511.881846 593.683692 502.429538 593.683692 373.366154 732.081231 373.366154 732.081231L291.761231 650.633846C291.761231 650.633846 430.316308 523.500308 430.316308 512.196923 430.316308 500.696615 291.761231 373.523692 291.761231 373.523692L373.366154 291.918769C373.366154 291.918769 503.453538 430.395077 511.881846 430.395077 520.349538 430.395077 650.515692 291.918769 650.515692 291.918769L732.041846 373.523692C732.041846 373.523692 593.447385 502.547692 593.447385 512.196923 593.447385 521.412923 732.041846 650.633846 732.041846 650.633846Z",fill:t.removeButtonColor}})]):t._e()])},staticRenderFns:[],model:{prop:"value",event:"init"},props:a,data:function(){return{instance:null,canvas:null,ctx:null,originalImage:null,img:null,dragging:!1,lastMovingCoord:null,imgData:{},dataUrl:"",fileDraggedOver:!1,tabStart:0,pinching:!1,pinchDistance:0,supportTouch:!1,pointerMoved:!1,pointerStartCoord:null,naturalWidth:0,naturalHeight:0,scaleRatio:null,orientation:1,userMetadata:null,imageSet:!1}},computed:{realWidth:function(){return this.width*this.quality},realHeight:function(){return this.height*this.quality},realPlaceholderFontSize:function(){return this.placeholderFontSize*this.quality}},mounted:function(){this.init(),e.rAFPolyfill(),e.toBlobPolyfill(),this.supportDetection().basic||console.warn("Your browser does not support vue-croppa functionality.")},watch:{value:function(t){this.instance=t},realWidth:function(){this.img?(this.imageSet=!1,this.setSize(),this.placeImage()):this.init()},realHeight:function(){this.img?(this.imageSet=!1,this.setSize(),this.placeImage()):this.init()},canvasColor:function(){this.img?this.draw():this.init()},placeholder:function(){this.img||this.init()},placeholderColor:function(){this.img||this.init()},realPlaceholderFontSize:function(){this.img||this.init()},preventWhiteSpace:function(){this.imageSet=!1,this.placeImage()}},methods:{init:function(){var t=this;this.canvas=this.$refs.canvas,this.setSize(),this.canvas.style.backgroundColor=this.canvasColor&&"default"!=this.canvasColor?"string"==typeof this.canvasColor?this.canvasColor:"":"transparent",this.ctx=this.canvas.getContext("2d"),this.originalImage=null,this.img=null,this.setInitial(),this.$emit(n.INIT_EVENT,{getCanvas:function(){return t.canvas},getContext:function(){return t.ctx},getChosenFile:function(){return t.$refs.fileInput.files[0]},getActualImageSize:function(){return{width:t.realWidth,height:t.realHeight}},moveUpwards:function(i){t.move({x:0,y:-i})},moveDownwards:function(i){t.move({x:0,y:i})},moveLeftwards:function(i){t.move({x:-i,y:0})},moveRightwards:function(i){t.move({x:i,y:0})},zoomIn:function(){t.zoom(!0)},zoomOut:function(){t.zoom(!1)},rotate:function(){var i=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1;t.disableRotation||t.disabled||(i=parseInt(i),(isNaN(i)||i>3||i<-3)&&(console.warn("Invalid argument for rotate() method. It should one of the integers from -3 to 3."),i=1),t.rotateByStep(i))},flipX:function(){t.disableRotation||t.disabled||t.rotate(2)},flipY:function(){t.disableRotation||t.disabled||t.rotate(4)},refresh:function(){t.$nextTick(t.init)},hasImage:function(){return!!t.img},remove:this.remove,chooseFile:this.chooseFile,generateDataUrl:this.generateDataUrl,generateBlob:this.generateBlob,promisedBlob:this.promisedBlob,supportDetection:this.supportDetection,getMetadata:this.getMetadata,applyMetadata:function(i){if(i&&t.img){t.userMetadata=i;var e=i.orientation||t.orientation||1;t.rotate(e,!0)}}})},setSize:function(){this.canvas.width=this.realWidth,this.canvas.height=this.realHeight,this.canvas.style.width=this.width+"px",this.canvas.style.height=this.height+"px"},rotateByStep:function(t){var i=1;switch(t){case 1:i=6;break;case 2:i=3;break;case 3:case-1:i=8;break;case-2:i=3;break;case-3:i=6}this.rotate(i)},supportDetection:function(){var t=document.createElement("div");return{basic:window.requestAnimationFrame&&window.File&&window.FileReader&&window.FileList&&window.Blob,dnd:"ondragstart"in t&&"ondrop"in t}},remove:function(){var t=this.ctx;this.paintBackground(),this.setImagePlaceholder(),t.textBaseline="middle",t.textAlign="center";var i=this.realWidth*(2/3)/this.placeholder.length,e=this.realPlaceholderFontSize&&0!=this.realPlaceholderFontSize?this.realPlaceholderFontSize:i;t.font=e+"px sans-serif",t.fillStyle=this.placeholderColor&&"default"!=this.placeholderColor?this.placeholderColor:"#606060",t.fillText(this.placeholder,this.realWidth/2,this.realHeight/2);var a=null!=this.img;this.originalImage=null,this.img=null,this.$refs.fileInput.value="",this.imgData={},this.orientation=1,this.scaleRatio=null,this.userMetadata=null,this.imageSet=!1,a&&this.$emit(n.IMAGE_REMOVE_EVENT)},setImagePlaceholder:function(){var t=this,i=void 0;if(this.$slots.placeholder&&this.$slots.placeholder[0]){var a=this.$slots.placeholder[0],n=a.tag,o=a.elm;"img"==n&&o&&(i=o)}if(i){var r=function(){t.ctx.drawImage(i,0,0,t.realWidth,t.realHeight)};e.imageLoaded(i)?r():i.onload=r}},setInitial:function(){var t=this,i=void 0,a=void 0;if(this.$slots.initial&&this.$slots.initial[0]){var r=this.$slots.initial[0],s=r.tag,h=r.elm;"img"==s&&h&&(a=h)}this.initialImage&&"string"==typeof this.initialImage?(i=this.initialImage,a=new Image,/^data:/.test(i)||/^blob:/.test(i)||a.setAttribute("crossOrigin","anonymous"),a.src=i):"object"===o(this.initialImage)&&this.initialImage instanceof Image&&(a=this.initialImage),i||a?e.imageLoaded(a)?(this._onload(a,+a.dataset.exifOrientation),this.$emit(n.INITIAL_IMAGE_LOADED_EVENT)):(a.onload=function(){t._onload(a,+a.dataset.exifOrientation),t.$emit(n.INITIAL_IMAGE_LOADED_EVENT)},a.onerror=function(){t.remove()}):this.remove()},_onload:function(t){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1;this.originalImage=t,this.img=t,isNaN(i)&&(i=1),this.rotate(i)},chooseFile:function(){this.$refs.fileInput.click()},handleClick:function(){this.img||this.disableClickToChoose||this.disabled||this.supportTouch||this.chooseFile()},handleInputChange:function(){var t=this.$refs.fileInput;if(t.files.length){var i=t.files[0];this.onNewFileIn(i)}},onNewFileIn:function(t){var i=this;if(this.$emit(n.FILE_CHOOSE_EVENT,t),!this.fileSizeIsValid(t))throw this.$emit(n.FILE_SIZE_EXCEED_EVENT,t),new Error("File size exceeds limit which is "+this.fileSizeLimit+" bytes.");if(!this.fileTypeIsValid(t)){this.$emit(n.FILE_TYPE_MISMATCH_EVENT,t);var a=t.type||t.name.toLowerCase().split(".").pop();throw new Error("File type ("+a+") does not match what you specified ("+this.accept+").")}if(void 0!==window.FileReader){var o=new FileReader;o.onload=function(t){var a=t.target.result,o=e.getFileOrientation(e.base64ToArrayBuffer(a));o<1&&(o=1);var r=new Image;r.src=a,r.onload=function(){i._onload(r,o),i.$emit(n.NEW_IMAGE)}},o.readAsDataURL(t)}},fileSizeIsValid:function(t){return!!t&&(!this.fileSizeLimit||0==this.fileSizeLimit||t.size<this.fileSizeLimit)},fileTypeIsValid:function(t){for(var i=this.accept||"image/*",e=i.replace(/\/.*$/,""),a=i.split(","),n=0,o=a.length;n<o;n++){var r=a[n],s=r.trim();if("."==s.charAt(0)){if(t.name.toLowerCase().split(".").pop()===s.toLowerCase().slice(1))return!0}else if(/\/\*$/.test(s)){if(t.type.replace(/\/.*$/,"")===e)return!0}else if(t.type===r)return!0}return!1},placeImage:function(t){var i=this.imgData;if(this.naturalWidth=this.img.naturalWidth,this.naturalHeight=this.img.naturalHeight,i.startX=e.numberValid(i.startX)?i.startX:0,i.startY=e.numberValid(i.startY)?i.startY:0,this.imageSet?e.numberValid(this.scaleRatio)?(i.width=this.naturalWidth*this.scaleRatio,i.height=this.naturalHeight*this.scaleRatio):this.aspectFill():"contain"==this.initialSize?this.aspectFit():"natural"==this.initialSize?this.naturalSize():this.aspectFill(),this.scaleRatio=i.width/this.naturalWidth,!this.imageSet&&(/top/.test(this.initialPosition)?i.startY=0:/bottom/.test(this.initialPosition)&&(i.startY=this.realHeight-i.height),/left/.test(this.initialPosition)?i.startX=0:/right/.test(this.initialPosition)&&(i.startX=this.realWidth-i.width),/^-?\d+% -?\d+%$/.test(this.initialPosition))){var a=/^(-?\d+)% (-?\d+)%$/.exec(this.initialPosition),n=+a[1]/100,o=+a[2]/100;i.startX=n*(this.realWidth-i.width),i.startY=o*(this.realHeight-i.height)}t&&this.applyMetadata(),this.preventWhiteSpace&&this.preventMovingToWhiteSpace(),this.imageSet||(this.imageSet=!0),this.draw()},aspectFill:function(){var t=this.naturalWidth,i=this.naturalHeight,e=void 0;i/t<this.realHeight/this.realWidth?(e=i/this.realHeight,this.imgData.width=t/e,this.imgData.height=this.realHeight,this.imgData.startX=-(this.imgData.width-this.realWidth)/2,this.imgData.startY=0):(e=t/this.realWidth,this.imgData.height=i/e,this.imgData.width=this.realWidth,this.imgData.startY=-(this.imgData.height-this.realHeight)/2,this.imgData.startX=0)},aspectFit:function(){var t=this.naturalWidth,i=this.naturalHeight,e=void 0;i/t<this.realHeight/this.realWidth?(e=t/this.realWidth,this.imgData.height=i/e,this.imgData.width=this.realWidth,this.imgData.startY=-(this.imgData.height-this.realHeight)/2):(e=i/this.realHeight,this.imgData.width=t/e,this.imgData.height=this.realHeight,this.imgData.startX=-(this.imgData.width-this.realWidth)/2)},naturalSize:function(){var t=this.naturalWidth,i=this.naturalHeight;this.imgData.width=t,this.imgData.height=i,this.imgData.startX=-(this.imgData.width-this.realWidth)/2,this.imgData.startY=-(this.imgData.height-this.realHeight)/2},handlePointerStart:function(t){this.supportTouch=!0,this.pointerMoved=!1;var i=e.getPointerCoords(t,this);if(this.pointerStartCoord=i,!this.disabled)if(this.img||this.disableClickToChoose){if(!(t.which&&t.which>1)){if(!t.touches||1===t.touches.length){this.dragging=!0,this.pinching=!1;var a=e.getPointerCoords(t,this);this.lastMovingCoord=a}t.touches&&2===t.touches.length&&!this.disablePinchToZoom&&(this.dragging=!1,this.pinching=!0,this.pinchDistance=e.getPinchDistance(t,this));for(var n=["mouseup","touchend","touchcancel","pointerend","pointercancel"],o=0,r=n.length;o<r;o++){var s=n[o];document.addEventListener(s,this.handlePointerEnd)}}}else this.tabStart=(new Date).valueOf()},handlePointerEnd:function(t){var i=0;if(this.pointerStartCoord){var a=e.getPointerCoords(t,this);i=Math.sqrt(Math.pow(a.x-this.pointerStartCoord.x,2)+Math.pow(a.y-this.pointerStartCoord.y,2))||0}if(!this.disabled){if(!this.img&&!this.disableClickToChoose){var n=(new Date).valueOf();return i<100&&n-this.tabStart<500&&this.supportTouch&&this.chooseFile(),void(this.tabStart=0)}this.dragging=!1,this.pinching=!1,this.pinchDistance=0,this.lastMovingCoord=null,this.pointerMoved=!1,this.pointerStartCoord=null}},handlePointerMove:function(t){if(this.pointerMoved=!0,!this.disabled&&!this.disableDragToMove&&this.img){if(t.preventDefault(),!t.touches||1===t.touches.length){if(!this.dragging)return;var i=e.getPointerCoords(t,this);this.lastMovingCoord&&this.move({x:i.x-this.lastMovingCoord.x,y:i.y-this.lastMovingCoord.y}),this.lastMovingCoord=i}if(t.touches&&2===t.touches.length&&!this.disablePinchToZoom){if(!this.pinching)return;var a=e.getPinchDistance(t,this),n=a-this.pinchDistance;this.zoom(n>0,null,2),this.pinchDistance=a}}},handleWheel:function(t){if(!this.disabled&&!this.disableScrollToZoom&&this.img){t.preventDefault();var i=e.getPointerCoords(t,this);t.wheelDelta<0||t.deltaY>0||t.detail>0?this.zoom(this.reverseScrollToZoom,i):(t.wheelDelta>0||t.deltaY<0||t.detail<0)&&this.zoom(!this.reverseScrollToZoom,i)}},handleDragEnter:function(t){this.disabled||this.disableDragAndDrop||this.img||!e.eventHasFile(t)||(this.fileDraggedOver=!0)},handleDragLeave:function(t){this.fileDraggedOver&&e.eventHasFile(t)&&(this.fileDraggedOver=!1)},handleDragOver:function(t){},handleDrop:function(t){if(this.fileDraggedOver&&e.eventHasFile(t)){this.fileDraggedOver=!1;var i=void 0,a=t.dataTransfer;if(a){if(a.items)for(var n=0,o=a.items.length;n<o;n++){var r=a.items[n];if("file"==r.kind){i=r.getAsFile();break}}else i=a.files[0];i&&this.onNewFileIn(i)}}},move:function(t){if(t){var i=this.imgData.startX,e=this.imgData.startY;this.imgData.startX+=t.x,this.imgData.startY+=t.y,this.preventWhiteSpace&&this.preventMovingToWhiteSpace(),this.imgData.startX===i&&this.imgData.startY===e||(this.$emit(n.MOVE_EVENT),this.draw())}},preventMovingToWhiteSpace:function(){this.imgData.startX>0&&(this.imgData.startX=0),this.imgData.startY>0&&(this.imgData.startY=0),this.realWidth-this.imgData.startX>this.imgData.width&&(this.imgData.startX=-(this.imgData.width-this.realWidth)),this.realHeight-this.imgData.startY>this.imgData.height&&(this.imgData.startY=-(this.imgData.height-this.realHeight))},zoom:function(t,i){var e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:1;i=i||{x:this.imgData.startX+this.imgData.width/2,y:this.imgData.startY+this.imgData.height/2};var a=this.zoomSpeed*e,o=1e-5*this.realWidth*a,r=1;t?r=1+o:this.imgData.width>10&&(r=1-o);var s=this.imgData.width,h=this.imgData.height;if(this.imgData.width=this.imgData.width*r,this.imgData.height=this.imgData.height*r,this.preventWhiteSpace){if(this.imgData.width<this.realWidth){var l=this.realWidth/this.imgData.width;this.imgData.width=this.realWidth,this.imgData.height=this.imgData.height*l}if(this.imgData.height<this.realHeight){var d=this.realHeight/this.imgData.height;this.imgData.height=this.realHeight,this.imgData.width=this.imgData.width*d}}if(s.toFixed(2)!==this.imgData.width.toFixed(2)||h.toFixed(2)!==this.imgData.height.toFixed(2)){var c=(r-1)*(i.x-this.imgData.startX),g=(r-1)*(i.y-this.imgData.startY);this.imgData.startX=this.imgData.startX-c,this.imgData.startY=this.imgData.startY-g,this.preventWhiteSpace&&this.preventMovingToWhiteSpace(),this.$emit(n.ZOOM_EVENT),this.draw(),this.scaleRatio=this.imgData.width/this.naturalWidth}},rotate:function(){var t=this,i=arguments.length>0&&void 0!==arguments[0]?arguments[0]:6,a=arguments[1];if(this.img){if(i>1||a){var n=e.getRotatedImage(a?this.originalImage:this.img,i);n.onload=function(){t.img=n,t.placeImage(a)}}else this.placeImage();this.orientation=2==i?e.flipX(this.orientation):4==i?e.flipY(this.orientation):6==i?e.rotate90(this.orientation):3==i?e.rotate90(e.rotate90(this.orientation)):8==i?e.rotate90(e.rotate90(e.rotate90(this.orientation))):i,a&&(this.orientation=i)}},paintBackground:function(){var t=this.canvasColor&&"default"!=this.canvasColor?this.canvasColor:"transparent";this.ctx.fillStyle=t,this.ctx.clearRect(0,0,this.realWidth,this.realHeight),this.ctx.fillRect(0,0,this.realWidth,this.realHeight)},draw:function(){this.img&&(window.requestAnimationFrame?requestAnimationFrame(this._drawFrame):this._drawFrame())},_drawFrame:function(){var t=this.ctx,i=this.imgData,e=i.startX,a=i.startY,o=i.width,r=i.height;this.paintBackground(),t.drawImage(this.img,e,a,o,r),this.$emit(n.DRAW,t)},generateDataUrl:function(t,i){return this.img?this.canvas.toDataURL(t,i):""},generateBlob:function(t,i,e){if(!this.img)return null;this.canvas.toBlob(t,i,e)},promisedBlob:function(){for(var t=this,i=arguments.length,e=Array(i),a=0;a<i;a++)e[a]=arguments[a];if("undefined"!=typeof Promise)return new Promise(function(i,a){try{t.generateBlob(function(t){i(t)},e)}catch(t){a(t)}});console.warn("No Promise support. Please add Promise polyfill if you want to use this method.")},getMetadata:function(){if(!this.img)return{};var t=this.imgData;return{startX:t.startX,startY:t.startY,scale:this.scaleRatio,orientation:this.orientation}},applyMetadata:function(){if(this.userMetadata){var t=this.userMetadata,i=t.startX,a=t.startY,n=t.scale;e.numberValid(i)&&(this.imgData.startX=i),e.numberValid(a)&&(this.imgData.startY=a),e.numberValid(n)&&(this.imgData.width=this.naturalWidth*n,this.imgData.height=this.naturalHeight*n,this.scaleRatio=n)}}}},s=Object.getOwnPropertySymbols,h=Object.prototype.hasOwnProperty,l=Object.prototype.propertyIsEnumerable,d=function(){try{if(!Object.assign)return!1;var t=new String("abc");if(t[5]="de","5"===Object.getOwnPropertyNames(t)[0])return!1;for(var i={},e=0;e<10;e++)i["_"+String.fromCharCode(e)]=e;if("0123456789"!==Object.getOwnPropertyNames(i).map(function(t){return i[t]}).join(""))return!1;var a={};return"abcdefghijklmnopqrst".split("").forEach(function(t){a[t]=t}),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},a)).join("")}catch(t){return!1}}()?Object.assign:function(i,e){for(var a,n,o=t(i),r=1;r<arguments.length;r++){a=Object(arguments[r]);for(var d in a)h.call(a,d)&&(o[d]=a[d]);if(s){n=s(a);for(var c=0;c<n.length;c++)l.call(a,n[c])&&(o[n[c]]=a[n[c]])}}return o},c={componentName:"croppa"};return{install:function(t,i){i=d({},c,i);var e=Number(t.version.split(".")[0]);if(e<2)throw new Error("vue-croppa supports vue version 2.0 and above. You are using Vue@"+e+". Please upgrade to the latest version of Vue.");var a=i.componentName||"croppa";t.component(a,r)},component:r}}); | ||
!function(t,i){"object"==typeof exports&&"undefined"!=typeof module?module.exports=i():"function"==typeof define&&define.amd?define(i):t.Croppa=i()}(this,function(){"use strict";function t(t){if(null===t||void 0===t)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(t)}"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self&&self;var i=function(t,i){return i={exports:{}},t(i,i.exports),i.exports}(function(t,i){!function(i,e){t.exports=e()}(0,function(){function t(t,i,e,a,n,o){if(!/^[1-8]$/.test(i))throw new Error("orientation should be [1-8]");null==e&&(e=0),null==a&&(a=0),null==n&&(n=t.width),null==o&&(o=t.height);var r=document.createElement("canvas"),s=r.getContext("2d");switch(r.width=n,r.height=o,s.save(),+i){case 1:break;case 2:s.translate(n,0),s.scale(-1,1);break;case 3:s.translate(n,o),s.rotate(1*Math.PI);break;case 4:s.translate(0,o),s.scale(1,-1);break;case 5:r.width=o,r.height=n,s.rotate(.5*Math.PI),s.scale(1,-1);break;case 6:r.width=o,r.height=n,s.rotate(.5*Math.PI),s.translate(0,-o);break;case 7:r.width=o,r.height=n,s.rotate(1.5*Math.PI),s.translate(-n,o),s.scale(1,-1);break;case 8:r.width=o,r.height=n,s.translate(0,n),s.rotate(1.5*Math.PI)}return s.drawImage(t,e,a,n,o),s.restore(),r}return{drawImage:t}})}),e={onePointCoord:function(t,i){var e=i.canvas,a=i.quality,n=e.getBoundingClientRect(),o=t.clientX,r=t.clientY;return{x:(o-n.left)*a,y:(r-n.top)*a}},getPointerCoords:function(t,i){var e=void 0;return e=t.touches&&t.touches[0]?t.touches[0]:t.changedTouches&&t.changedTouches[0]?t.changedTouches[0]:t,this.onePointCoord(e,i)},getPinchDistance:function(t,i){var e=t.touches[0],a=t.touches[1],n=this.onePointCoord(e,i),o=this.onePointCoord(a,i);return Math.sqrt(Math.pow(n.x-o.x,2)+Math.pow(n.y-o.y,2))},getPinchCenterCoord:function(t,i){var e=t.touches[0],a=t.touches[1],n=this.onePointCoord(e,i),o=this.onePointCoord(a,i);return{x:(n.x+o.x)/2,y:(n.y+o.y)/2}},imageLoaded:function(t){return t.complete&&0!==t.naturalWidth},rAFPolyfill:function(){if("undefined"!=typeof document&&"undefined"!=typeof window){for(var t=0,i=["webkit","moz"],e=0;e<i.length&&!window.requestAnimationFrame;++e)window.requestAnimationFrame=window[i[e]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[i[e]+"CancelAnimationFrame"]||window[i[e]+"CancelRequestAnimationFrame"];window.requestAnimationFrame||(window.requestAnimationFrame=function(i){var e=(new Date).getTime(),a=Math.max(0,16.7-(e-t)),n=window.setTimeout(function(){i(e+a)},a);return t=e+a,n}),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(t){clearTimeout(t)}),Array.isArray=function(t){return"[object Array]"===Object.prototype.toString.call(t)}}},toBlobPolyfill:function(){if("undefined"!=typeof document&&"undefined"!=typeof window&&HTMLCanvasElement){var t,i,e;HTMLCanvasElement.prototype.toBlob||Object.defineProperty(HTMLCanvasElement.prototype,"toBlob",{value:function(a,n,o){t=atob(this.toDataURL(n,o).split(",")[1]),i=t.length,e=new Uint8Array(i);for(var r=0;r<i;r++)e[r]=t.charCodeAt(r);a(new Blob([e],{type:n||"image/png"}))}})}},eventHasFile:function(t){var i=t.dataTransfer||t.originalEvent.dataTransfer;if(i.types)for(var e=0,a=i.types.length;e<a;e++)if("Files"==i.types[e])return!0;return!1},getFileOrientation:function(t){var i=new DataView(t);if(65496!=i.getUint16(0,!1))return-2;for(var e=i.byteLength,a=2;a<e;){var n=i.getUint16(a,!1);if(a+=2,65505==n){if(1165519206!=i.getUint32(a+=2,!1))return-1;var o=18761==i.getUint16(a+=6,!1);a+=i.getUint32(a+4,o);var r=i.getUint16(a,o);a+=2;for(var s=0;s<r;s++)if(274==i.getUint16(a+12*s,o))return i.getUint16(a+12*s+8,o)}else{if(65280!=(65280&n))break;a+=i.getUint16(a,!1)}}return-1},base64ToArrayBuffer:function(t){t=t.replace(/^data:([^;]+);base64,/gim,"");for(var i=atob(t),e=i.length,a=new Uint8Array(e),n=0;n<e;n++)a[n]=i.charCodeAt(n);return a.buffer},getRotatedImage:function(t,e){var a=i.drawImage(t,e),n=new Image;return n.src=a.toDataURL(),n},flipX:function(t){return t%2==0?t-1:t+1},flipY:function(t){return{1:4,4:1,2:3,3:2,5:8,8:5,6:7,7:6}[t]},rotate90:function(t){return{1:6,2:7,3:8,4:5,5:2,6:3,7:4,8:1}[t]},numberValid:function(t){return"number"==typeof t&&!isNaN(t)}};Number.isInteger=Number.isInteger||function(t){return"number"==typeof t&&isFinite(t)&&Math.floor(t)===t};var a={value:Object,width:{type:Number,default:200,validator:function(t){return t>0}},height:{type:Number,default:200,validator:function(t){return t>0}},placeholder:{type:String,default:"Choose an image"},placeholderColor:{default:"#606060"},placeholderFontSize:{type:Number,default:0,validator:function(t){return t>=0}},canvasColor:{default:"transparent"},quality:{type:Number,default:2,validator:function(t){return Number.isInteger(t)&&t>0}},zoomSpeed:{default:3,type:Number,validator:function(t){return t>0}},accept:{type:String,default:".jpg,.jpeg,.png,.gif,.bmp,.webp,.svg,.tiff"},fileSizeLimit:{type:Number,default:0,validator:function(t){return t>=0}},disabled:Boolean,disableDragAndDrop:Boolean,disableClickToChoose:Boolean,disableDragToMove:Boolean,disableScrollToZoom:Boolean,disablePinchToZoom:Boolean,disableRotation:Boolean,reverseScrollToZoom:Boolean,preventWhiteSpace:Boolean,showRemoveButton:{type:Boolean,default:!0},removeButtonColor:{type:String,default:"red"},removeButtonSize:{type:Number},initialImage:[String,HTMLImageElement],initialSize:{type:String,default:"cover",validator:function(t){return"cover"===t||"contain"===t||"natural"===t}},initialPosition:{type:String,default:"center",validator:function(t){return["center","top","bottom","left","right","top left","top right","bottom left","bottom right","left top","right top","left bottom","right bottom"].indexOf(t)>=0||/^-?\d+% -?\d+%$/.test(t)}}},n={INIT_EVENT:"init",FILE_CHOOSE_EVENT:"file-choose",FILE_SIZE_EXCEED_EVENT:"file-size-exceed",FILE_TYPE_MISMATCH_EVENT:"file-type-mismatch",NEW_IMAGE:"new-image",IMAGE_REMOVE_EVENT:"image-remove",MOVE_EVENT:"move",ZOOM_EVENT:"zoom",DRAW:"draw",INITIAL_IMAGE_LOADED_EVENT:"initial-image-loaded"},o="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},r={render:function(){var t=this,i=t.$createElement,e=t._self._c||i;return e("div",{ref:"wrapper",class:"croppa-container "+(t.img?"croppa--has-target":"")+" "+(t.disabled?"croppa--disabled":"")+" "+(t.disableClickToChoose?"croppa--disabled-cc":"")+" "+(t.disableDragToMove&&t.disableScrollToZoom?"croppa--disabled-mz":"")+" "+(t.fileDraggedOver?"croppa--dropzone":""),on:{dragenter:function(i){i.stopPropagation(),i.preventDefault(),t.handleDragEnter(i)},dragleave:function(i){i.stopPropagation(),i.preventDefault(),t.handleDragLeave(i)},dragover:function(i){i.stopPropagation(),i.preventDefault(),t.handleDragOver(i)},drop:function(i){i.stopPropagation(),i.preventDefault(),t.handleDrop(i)}}},[e("input",{ref:"fileInput",attrs:{type:"file",accept:t.accept,disabled:t.disabled,hidden:""},on:{change:t.handleInputChange}}),e("div",{staticClass:"slots",staticStyle:{width:"0",height:"0",visibility:"hidden"}},[t._t("initial"),t._t("placeholder")],2),e("canvas",{ref:"canvas",on:{click:function(i){i.stopPropagation(),i.preventDefault(),t.handleClick(i)},touchstart:function(i){i.stopPropagation(),t.handlePointerStart(i)},mousedown:function(i){i.stopPropagation(),i.preventDefault(),t.handlePointerStart(i)},pointerstart:function(i){i.stopPropagation(),i.preventDefault(),t.handlePointerStart(i)},touchend:function(i){i.stopPropagation(),i.preventDefault(),t.handlePointerEnd(i)},touchcancel:function(i){i.stopPropagation(),i.preventDefault(),t.handlePointerEnd(i)},mouseup:function(i){i.stopPropagation(),i.preventDefault(),t.handlePointerEnd(i)},pointerend:function(i){i.stopPropagation(),i.preventDefault(),t.handlePointerEnd(i)},pointercancel:function(i){i.stopPropagation(),i.preventDefault(),t.handlePointerEnd(i)},touchmove:function(i){i.stopPropagation(),t.handlePointerMove(i)},mousemove:function(i){i.stopPropagation(),i.preventDefault(),t.handlePointerMove(i)},pointermove:function(i){i.stopPropagation(),i.preventDefault(),t.handlePointerMove(i)},DOMMouseScroll:function(i){i.stopPropagation(),t.handleWheel(i)},wheel:function(i){i.stopPropagation(),t.handleWheel(i)},mousewheel:function(i){i.stopPropagation(),t.handleWheel(i)}}}),t.showRemoveButton&&t.img?e("svg",{staticClass:"icon icon-remove",style:"top: -"+t.height/40+"px; right: -"+t.width/40+"px",attrs:{viewBox:"0 0 1024 1024",version:"1.1",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink",width:t.removeButtonSize||t.width/10,height:t.removeButtonSize||t.width/10},on:{click:t.remove}},[e("path",{attrs:{d:"M511.921231 0C229.179077 0 0 229.257846 0 512 0 794.702769 229.179077 1024 511.921231 1024 794.781538 1024 1024 794.702769 1024 512 1024 229.257846 794.781538 0 511.921231 0ZM732.041846 650.633846 650.515692 732.081231C650.515692 732.081231 521.491692 593.683692 511.881846 593.683692 502.429538 593.683692 373.366154 732.081231 373.366154 732.081231L291.761231 650.633846C291.761231 650.633846 430.316308 523.500308 430.316308 512.196923 430.316308 500.696615 291.761231 373.523692 291.761231 373.523692L373.366154 291.918769C373.366154 291.918769 503.453538 430.395077 511.881846 430.395077 520.349538 430.395077 650.515692 291.918769 650.515692 291.918769L732.041846 373.523692C732.041846 373.523692 593.447385 502.547692 593.447385 512.196923 593.447385 521.412923 732.041846 650.633846 732.041846 650.633846Z",fill:t.removeButtonColor}})]):t._e()])},staticRenderFns:[],model:{prop:"value",event:"init"},props:a,data:function(){return{instance:null,canvas:null,ctx:null,originalImage:null,img:null,dragging:!1,lastMovingCoord:null,imgData:{},dataUrl:"",fileDraggedOver:!1,tabStart:0,pinching:!1,pinchDistance:0,supportTouch:!1,pointerMoved:!1,pointerStartCoord:null,naturalWidth:0,naturalHeight:0,scaleRatio:null,orientation:1,userMetadata:null,imageSet:!1}},computed:{realWidth:function(){return this.width*this.quality},realHeight:function(){return this.height*this.quality},realPlaceholderFontSize:function(){return this.placeholderFontSize*this.quality}},mounted:function(){this.init(),e.rAFPolyfill(),e.toBlobPolyfill(),this.supportDetection().basic||console.warn("Your browser does not support vue-croppa functionality.")},watch:{value:function(t){this.instance=t},realWidth:function(){this.img?(this.preventWhiteSpace&&(this.imageSet=!1),this.setSize(),this.placeImage()):this.init()},realHeight:function(){this.img?(this.preventWhiteSpace&&(this.imageSet=!1),this.setSize(),this.placeImage()):this.init()},canvasColor:function(){this.img?this.draw():this.init()},placeholder:function(){this.img||this.init()},placeholderColor:function(){this.img||this.init()},realPlaceholderFontSize:function(){this.img||this.init()},preventWhiteSpace:function(){this.preventWhiteSpace&&(this.imageSet=!1),this.placeImage()}},methods:{init:function(){var t=this;this.canvas=this.$refs.canvas,this.setSize(),this.canvas.style.backgroundColor=this.canvasColor&&"default"!=this.canvasColor?"string"==typeof this.canvasColor?this.canvasColor:"":"transparent",this.ctx=this.canvas.getContext("2d"),this.originalImage=null,this.img=null,this.setInitial(),this.$emit(n.INIT_EVENT,{getCanvas:function(){return t.canvas},getContext:function(){return t.ctx},getChosenFile:function(){return t.$refs.fileInput.files[0]},getActualImageSize:function(){return{width:t.realWidth,height:t.realHeight}},moveUpwards:function(i){t.move({x:0,y:-i})},moveDownwards:function(i){t.move({x:0,y:i})},moveLeftwards:function(i){t.move({x:-i,y:0})},moveRightwards:function(i){t.move({x:i,y:0})},zoomIn:function(){t.zoom(!0)},zoomOut:function(){t.zoom(!1)},rotate:function(){var i=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1;t.disableRotation||t.disabled||(i=parseInt(i),(isNaN(i)||i>3||i<-3)&&(console.warn("Invalid argument for rotate() method. It should one of the integers from -3 to 3."),i=1),t.rotateByStep(i))},flipX:function(){t.disableRotation||t.disabled||t.rotate(2)},flipY:function(){t.disableRotation||t.disabled||t.rotate(4)},refresh:function(){t.$nextTick(t.init)},hasImage:function(){return!!t.img},remove:this.remove,chooseFile:this.chooseFile,generateDataUrl:this.generateDataUrl,generateBlob:this.generateBlob,promisedBlob:this.promisedBlob,supportDetection:this.supportDetection,getMetadata:this.getMetadata,applyMetadata:function(i){if(i&&t.img){t.userMetadata=i;var e=i.orientation||t.orientation||1;t.rotate(e,!0)}}})},setSize:function(){this.canvas.width=this.realWidth,this.canvas.height=this.realHeight,this.canvas.style.width=this.width+"px",this.canvas.style.height=this.height+"px"},rotateByStep:function(t){var i=1;switch(t){case 1:i=6;break;case 2:i=3;break;case 3:case-1:i=8;break;case-2:i=3;break;case-3:i=6}this.rotate(i)},supportDetection:function(){var t=document.createElement("div");return{basic:window.requestAnimationFrame&&window.File&&window.FileReader&&window.FileList&&window.Blob,dnd:"ondragstart"in t&&"ondrop"in t}},remove:function(){var t=this.ctx;this.paintBackground(),this.setImagePlaceholder(),t.textBaseline="middle",t.textAlign="center";var i=this.realWidth*(2/3)/this.placeholder.length,e=this.realPlaceholderFontSize&&0!=this.realPlaceholderFontSize?this.realPlaceholderFontSize:i;t.font=e+"px sans-serif",t.fillStyle=this.placeholderColor&&"default"!=this.placeholderColor?this.placeholderColor:"#606060",t.fillText(this.placeholder,this.realWidth/2,this.realHeight/2);var a=null!=this.img;this.originalImage=null,this.img=null,this.$refs.fileInput.value="",this.imgData={},this.orientation=1,this.scaleRatio=null,this.userMetadata=null,this.imageSet=!1,a&&this.$emit(n.IMAGE_REMOVE_EVENT)},setImagePlaceholder:function(){var t=this,i=void 0;if(this.$slots.placeholder&&this.$slots.placeholder[0]){var a=this.$slots.placeholder[0],n=a.tag,o=a.elm;"img"==n&&o&&(i=o)}if(i){var r=function(){t.ctx.drawImage(i,0,0,t.realWidth,t.realHeight)};e.imageLoaded(i)?r():i.onload=r}},setInitial:function(){var t=this,i=void 0,a=void 0;if(this.$slots.initial&&this.$slots.initial[0]){var r=this.$slots.initial[0],s=r.tag,h=r.elm;"img"==s&&h&&(a=h)}this.initialImage&&"string"==typeof this.initialImage?(i=this.initialImage,a=new Image,/^data:/.test(i)||/^blob:/.test(i)||a.setAttribute("crossOrigin","anonymous"),a.src=i):"object"===o(this.initialImage)&&this.initialImage instanceof Image&&(a=this.initialImage),i||a?e.imageLoaded(a)?(this._onload(a,+a.dataset.exifOrientation),this.$emit(n.INITIAL_IMAGE_LOADED_EVENT)):(a.onload=function(){t._onload(a,+a.dataset.exifOrientation),t.$emit(n.INITIAL_IMAGE_LOADED_EVENT)},a.onerror=function(){t.remove()}):this.remove()},_onload:function(t){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1;this.originalImage=t,this.img=t,isNaN(i)&&(i=1),this.rotate(i)},chooseFile:function(){this.$refs.fileInput.click()},handleClick:function(){this.img||this.disableClickToChoose||this.disabled||this.supportTouch||this.chooseFile()},handleInputChange:function(){var t=this.$refs.fileInput;if(t.files.length){var i=t.files[0];this.onNewFileIn(i)}},onNewFileIn:function(t){var i=this;if(this.$emit(n.FILE_CHOOSE_EVENT,t),!this.fileSizeIsValid(t))throw this.$emit(n.FILE_SIZE_EXCEED_EVENT,t),new Error("File size exceeds limit which is "+this.fileSizeLimit+" bytes.");if(!this.fileTypeIsValid(t)){this.$emit(n.FILE_TYPE_MISMATCH_EVENT,t);var a=t.type||t.name.toLowerCase().split(".").pop();throw new Error("File type ("+a+") does not match what you specified ("+this.accept+").")}if(void 0!==window.FileReader){var o=new FileReader;o.onload=function(t){var a=t.target.result,o=e.getFileOrientation(e.base64ToArrayBuffer(a));o<1&&(o=1);var r=new Image;r.src=a,r.onload=function(){i._onload(r,o),i.$emit(n.NEW_IMAGE)}},o.readAsDataURL(t)}},fileSizeIsValid:function(t){return!!t&&(!this.fileSizeLimit||0==this.fileSizeLimit||t.size<this.fileSizeLimit)},fileTypeIsValid:function(t){for(var i=this.accept||"image/*",e=i.replace(/\/.*$/,""),a=i.split(","),n=0,o=a.length;n<o;n++){var r=a[n],s=r.trim();if("."==s.charAt(0)){if(t.name.toLowerCase().split(".").pop()===s.toLowerCase().slice(1))return!0}else if(/\/\*$/.test(s)){if(t.type.replace(/\/.*$/,"")===e)return!0}else if(t.type===r)return!0}return!1},placeImage:function(t){var i=this.imgData;if(this.naturalWidth=this.img.naturalWidth,this.naturalHeight=this.img.naturalHeight,i.startX=e.numberValid(i.startX)?i.startX:0,i.startY=e.numberValid(i.startY)?i.startY:0,this.imageSet?e.numberValid(this.scaleRatio)?(i.width=this.naturalWidth*this.scaleRatio,i.height=this.naturalHeight*this.scaleRatio):this.aspectFill():"contain"==this.initialSize?this.aspectFit():"natural"==this.initialSize?this.naturalSize():this.aspectFill(),this.scaleRatio=i.width/this.naturalWidth,!this.imageSet&&(/top/.test(this.initialPosition)?i.startY=0:/bottom/.test(this.initialPosition)&&(i.startY=this.realHeight-i.height),/left/.test(this.initialPosition)?i.startX=0:/right/.test(this.initialPosition)&&(i.startX=this.realWidth-i.width),/^-?\d+% -?\d+%$/.test(this.initialPosition))){var a=/^(-?\d+)% (-?\d+)%$/.exec(this.initialPosition),n=+a[1]/100,o=+a[2]/100;i.startX=n*(this.realWidth-i.width),i.startY=o*(this.realHeight-i.height)}t&&this.applyMetadata(),this.preventWhiteSpace&&this.preventMovingToWhiteSpace(),this.imageSet||(this.imageSet=!0),this.draw()},aspectFill:function(){var t=this.naturalWidth,i=this.naturalHeight,e=void 0;i/t<this.realHeight/this.realWidth?(e=i/this.realHeight,this.imgData.width=t/e,this.imgData.height=this.realHeight,this.imgData.startX=-(this.imgData.width-this.realWidth)/2,this.imgData.startY=0):(e=t/this.realWidth,this.imgData.height=i/e,this.imgData.width=this.realWidth,this.imgData.startY=-(this.imgData.height-this.realHeight)/2,this.imgData.startX=0)},aspectFit:function(){var t=this.naturalWidth,i=this.naturalHeight,e=void 0;i/t<this.realHeight/this.realWidth?(e=t/this.realWidth,this.imgData.height=i/e,this.imgData.width=this.realWidth,this.imgData.startY=-(this.imgData.height-this.realHeight)/2):(e=i/this.realHeight,this.imgData.width=t/e,this.imgData.height=this.realHeight,this.imgData.startX=-(this.imgData.width-this.realWidth)/2)},naturalSize:function(){var t=this.naturalWidth,i=this.naturalHeight;this.imgData.width=t,this.imgData.height=i,this.imgData.startX=-(this.imgData.width-this.realWidth)/2,this.imgData.startY=-(this.imgData.height-this.realHeight)/2},handlePointerStart:function(t){this.supportTouch=!0,this.pointerMoved=!1;var i=e.getPointerCoords(t,this);if(this.pointerStartCoord=i,!this.disabled)if(this.img||this.disableClickToChoose){if(!(t.which&&t.which>1)){if(!t.touches||1===t.touches.length){this.dragging=!0,this.pinching=!1;var a=e.getPointerCoords(t,this);this.lastMovingCoord=a}t.touches&&2===t.touches.length&&!this.disablePinchToZoom&&(this.dragging=!1,this.pinching=!0,this.pinchDistance=e.getPinchDistance(t,this));for(var n=["mouseup","touchend","touchcancel","pointerend","pointercancel"],o=0,r=n.length;o<r;o++){var s=n[o];document.addEventListener(s,this.handlePointerEnd)}}}else this.tabStart=(new Date).valueOf()},handlePointerEnd:function(t){var i=0;if(this.pointerStartCoord){var a=e.getPointerCoords(t,this);i=Math.sqrt(Math.pow(a.x-this.pointerStartCoord.x,2)+Math.pow(a.y-this.pointerStartCoord.y,2))||0}if(!this.disabled){if(!this.img&&!this.disableClickToChoose){var n=(new Date).valueOf();return i<100&&n-this.tabStart<500&&this.supportTouch&&this.chooseFile(),void(this.tabStart=0)}this.dragging=!1,this.pinching=!1,this.pinchDistance=0,this.lastMovingCoord=null,this.pointerMoved=!1,this.pointerStartCoord=null}},handlePointerMove:function(t){if(this.pointerMoved=!0,!this.disabled&&!this.disableDragToMove&&this.img){if(t.preventDefault(),!t.touches||1===t.touches.length){if(!this.dragging)return;var i=e.getPointerCoords(t,this);this.lastMovingCoord&&this.move({x:i.x-this.lastMovingCoord.x,y:i.y-this.lastMovingCoord.y}),this.lastMovingCoord=i}if(t.touches&&2===t.touches.length&&!this.disablePinchToZoom){if(!this.pinching)return;var a=e.getPinchDistance(t,this),n=a-this.pinchDistance;this.zoom(n>0,null,2),this.pinchDistance=a}}},handleWheel:function(t){if(!this.disabled&&!this.disableScrollToZoom&&this.img){t.preventDefault();var i=e.getPointerCoords(t,this);t.wheelDelta<0||t.deltaY>0||t.detail>0?this.zoom(this.reverseScrollToZoom,i):(t.wheelDelta>0||t.deltaY<0||t.detail<0)&&this.zoom(!this.reverseScrollToZoom,i)}},handleDragEnter:function(t){this.disabled||this.disableDragAndDrop||this.img||!e.eventHasFile(t)||(this.fileDraggedOver=!0)},handleDragLeave:function(t){this.fileDraggedOver&&e.eventHasFile(t)&&(this.fileDraggedOver=!1)},handleDragOver:function(t){},handleDrop:function(t){if(this.fileDraggedOver&&e.eventHasFile(t)){this.fileDraggedOver=!1;var i=void 0,a=t.dataTransfer;if(a){if(a.items)for(var n=0,o=a.items.length;n<o;n++){var r=a.items[n];if("file"==r.kind){i=r.getAsFile();break}}else i=a.files[0];i&&this.onNewFileIn(i)}}},move:function(t){if(t){var i=this.imgData.startX,e=this.imgData.startY;this.imgData.startX+=t.x,this.imgData.startY+=t.y,this.preventWhiteSpace&&this.preventMovingToWhiteSpace(),this.imgData.startX===i&&this.imgData.startY===e||(this.$emit(n.MOVE_EVENT),this.draw())}},preventMovingToWhiteSpace:function(){this.imgData.startX>0&&(this.imgData.startX=0),this.imgData.startY>0&&(this.imgData.startY=0),this.realWidth-this.imgData.startX>this.imgData.width&&(this.imgData.startX=-(this.imgData.width-this.realWidth)),this.realHeight-this.imgData.startY>this.imgData.height&&(this.imgData.startY=-(this.imgData.height-this.realHeight))},zoom:function(t,i){var e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:1;i=i||{x:this.imgData.startX+this.imgData.width/2,y:this.imgData.startY+this.imgData.height/2};var a=this.zoomSpeed*e,o=1e-5*this.realWidth*a,r=1;t?r=1+o:this.imgData.width>10&&(r=1-o);var s=this.imgData.width,h=this.imgData.height;if(this.imgData.width=this.imgData.width*r,this.imgData.height=this.imgData.height*r,this.preventWhiteSpace){if(this.imgData.width<this.realWidth){var l=this.realWidth/this.imgData.width;this.imgData.width=this.realWidth,this.imgData.height=this.imgData.height*l}if(this.imgData.height<this.realHeight){var d=this.realHeight/this.imgData.height;this.imgData.height=this.realHeight,this.imgData.width=this.imgData.width*d}}if(s.toFixed(2)!==this.imgData.width.toFixed(2)||h.toFixed(2)!==this.imgData.height.toFixed(2)){var c=(r-1)*(i.x-this.imgData.startX),g=(r-1)*(i.y-this.imgData.startY);this.imgData.startX=this.imgData.startX-c,this.imgData.startY=this.imgData.startY-g,this.preventWhiteSpace&&this.preventMovingToWhiteSpace(),this.$emit(n.ZOOM_EVENT),this.draw(),this.scaleRatio=this.imgData.width/this.naturalWidth}},rotate:function(){var t=this,i=arguments.length>0&&void 0!==arguments[0]?arguments[0]:6,a=arguments[1];if(this.img){if(i>1||a){var n=e.getRotatedImage(a?this.originalImage:this.img,i);n.onload=function(){t.img=n,t.placeImage(a)}}else this.placeImage();this.orientation=2==i?e.flipX(this.orientation):4==i?e.flipY(this.orientation):6==i?e.rotate90(this.orientation):3==i?e.rotate90(e.rotate90(this.orientation)):8==i?e.rotate90(e.rotate90(e.rotate90(this.orientation))):i,a&&(this.orientation=i)}},paintBackground:function(){var t=this.canvasColor&&"default"!=this.canvasColor?this.canvasColor:"transparent";this.ctx.fillStyle=t,this.ctx.clearRect(0,0,this.realWidth,this.realHeight),this.ctx.fillRect(0,0,this.realWidth,this.realHeight)},draw:function(){this.img&&(window.requestAnimationFrame?requestAnimationFrame(this._drawFrame):this._drawFrame())},_drawFrame:function(){var t=this.ctx,i=this.imgData,e=i.startX,a=i.startY,o=i.width,r=i.height;this.paintBackground(),t.drawImage(this.img,e,a,o,r),this.$emit(n.DRAW,t)},generateDataUrl:function(t,i){return this.img?this.canvas.toDataURL(t,i):""},generateBlob:function(t,i,e){if(!this.img)return null;this.canvas.toBlob(t,i,e)},promisedBlob:function(){for(var t=this,i=arguments.length,e=Array(i),a=0;a<i;a++)e[a]=arguments[a];if("undefined"!=typeof Promise)return new Promise(function(i,a){try{t.generateBlob(function(t){i(t)},e)}catch(t){a(t)}});console.warn("No Promise support. Please add Promise polyfill if you want to use this method.")},getMetadata:function(){if(!this.img)return{};var t=this.imgData;return{startX:t.startX,startY:t.startY,scale:this.scaleRatio,orientation:this.orientation}},applyMetadata:function(){if(this.userMetadata){var t=this.userMetadata,i=t.startX,a=t.startY,n=t.scale;e.numberValid(i)&&(this.imgData.startX=i),e.numberValid(a)&&(this.imgData.startY=a),e.numberValid(n)&&(this.imgData.width=this.naturalWidth*n,this.imgData.height=this.naturalHeight*n,this.scaleRatio=n)}}}},s=Object.getOwnPropertySymbols,h=Object.prototype.hasOwnProperty,l=Object.prototype.propertyIsEnumerable,d=function(){try{if(!Object.assign)return!1;var t=new String("abc");if(t[5]="de","5"===Object.getOwnPropertyNames(t)[0])return!1;for(var i={},e=0;e<10;e++)i["_"+String.fromCharCode(e)]=e;if("0123456789"!==Object.getOwnPropertyNames(i).map(function(t){return i[t]}).join(""))return!1;var a={};return"abcdefghijklmnopqrst".split("").forEach(function(t){a[t]=t}),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},a)).join("")}catch(t){return!1}}()?Object.assign:function(i,e){for(var a,n,o=t(i),r=1;r<arguments.length;r++){a=Object(arguments[r]);for(var d in a)h.call(a,d)&&(o[d]=a[d]);if(s){n=s(a);for(var c=0;c<n.length;c++)l.call(a,n[c])&&(o[n[c]]=a[n[c]])}}return o},c={componentName:"croppa"};return{install:function(t,i){i=d({},c,i);var e=Number(t.version.split(".")[0]);if(e<2)throw new Error("vue-croppa supports vue version 2.0 and above. You are using Vue@"+e+". Please upgrade to the latest version of Vue.");var a=i.componentName||"croppa";t.component(a,r)},component:r}}); |
{ | ||
"name": "vue-croppa", | ||
"version": "0.3.3", | ||
"version": "0.3.4", | ||
"description": "A simple straightforward customizable lightweight mobile-friendly image cropper for Vue 2.0.", | ||
@@ -5,0 +5,0 @@ "main": "dist/vue-croppa.js", |
@@ -520,4 +520,1 @@ # vue-croppa | ||
``` | ||
## To Do | ||
- [ ] Keep image scale state after rotation (when `prevent-white-space` is `false`) |
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
138597
1891
520