vue-croppa - npm Package Compare versions

Comparing version 1.1.1 to 1.1.2

dist/vue-croppa.js

		/*
		* vue-croppa v1.1.1
		* vue-croppa v1.1.2
		* https://github.com/zhanziyang/vue-croppa
		@@ -762,2 +762,3 @@ *
		callback(null);
		return;
		}
		@@ -764,0 +765,0 @@ this.canvas.toBlob(callback, mimeType, qualityArgument);

dist/vue-croppa.min.js

		/*
		* vue-croppa v1.1.1
		* vue-croppa v1.1.2
		* 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 s=document.createElement("canvas"),r=s.getContext("2d");switch(s.width=n,s.height=o,r.save(),+i){case 1:break;case 2:r.translate(n,0),r.scale(-1,1);break;case 3:r.translate(n,o),r.rotate(1Math.PI);break;case 4:r.translate(0,o),r.scale(1,-1);break;case 5:s.width=o,s.height=n,r.rotate(.5Math.PI),r.scale(1,-1);break;case 6:s.width=o,s.height=n,r.rotate(.5Math.PI),r.translate(0,-o);break;case 7:s.width=o,s.height=n,r.rotate(1.5Math.PI),r.translate(-n,o),r.scale(1,-1);break;case 8:s.width=o,s.height=n,r.translate(0,n),r.rotate(1.5Math.PI)}return r.drawImage(t,e,a,n,o),r.restore(),s}return{drawImage:t}})}),e={onePointCoord:function(t,i){var e=i.canvas,a=i.quality,n=e.getBoundingClientRect(),o=t.clientX,s=t.clientY;return{x:(o-n.left)a,y:(s-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 s=0;s<i;s++)e[s]=t.charCodeAt(s);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 s=i.getUint16(a,o);a+=2;for(var r=0;r<s;r++)if(274==i.getUint16(a+12r,o))return i.getUint16(a+12r+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=String;window&&window.Image&&(a=[String,Image]);var n={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 t>0}},zoomSpeed:{default:3,type:Number,validator:function(t){return t>0}},accept:String,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:a,initialSize:{type:String,default:"cover",validator:function(t){return"cover"===t\|\|"contain"===t\|\|"natural"===t}},initialPosition:{type:String,default:"center",validator:function(t){var i=["center","top","bottom","left","right"];return t.split(" ").every(function(t){return i.indexOf(t)>=0})\|\|/^-?\d+% -?\d+%$/.test(t)}},inputAttrs:Object,showLoading:Boolean,loadingSize:{type:Number,default:20},loadingColor:{type:String,default:"#606060"}},o={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",NEW_IMAGE_DRAWN:"new-image-drawn",IMAGE_REMOVE_EVENT:"image-remove",MOVE_EVENT:"move",ZOOM_EVENT:"zoom",DRAW:"draw",INITIAL_IMAGE_LOADED_EVENT:"initial-image-loaded",LOADING_START:"loading-start",LOADING_END:"loading-end"},s="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",t._b({ref:"fileInput",staticStyle:{height:"1px",width:"1px",overflow:"hidden","margin-left":"-99999px",position:"absolute"},attrs:{type:"file",accept:t.accept,disabled:t.disabled},on:{change:t._handleInputChange}},"input",t.inputAttrs)),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)},pointerleave:function(i){i.stopPropagation(),i.preventDefault(),t._handlePointerLeave(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(),t.showLoading&&t.loading?e("div",{staticClass:"sk-fading-circle",style:t.loadingStyle},t._l(12,function(i){return e("div",{key:i,class:"sk-circle"+i+" sk-circle"},[e("div",{staticClass:"sk-circle-indicator",style:{backgroundColor:t.loadingColor}})])})):t._e(),t._t("default")],2)},staticRenderFns:[],model:{prop:"value",event:o.INIT_EVENT},props:n,data:function(){return{canvas:null,ctx:null,originalImage:null,img:null,dragging:!1,lastMovingCoord:null,imgData:{width:0,height:0,startX:0,startY:0},fileDraggedOver:!1,tabStart:0,scrolling:!1,pinching:!1,rotating:!1,pinchDistance:0,supportTouch:!1,pointerMoved:!1,pointerStartCoord:null,naturalWidth:0,naturalHeight:0,scaleRatio:null,orientation:1,userMetadata:null,imageSet:!1,currentPointerCoord:null,currentIsInitial:!1,loading:!1}},computed:{outputWidth:function(){return this.widththis.quality},outputHeight:function(){return this.heightthis.quality},computedPlaceholderFontSize:function(){return this.placeholderFontSizethis.quality},aspectRatio:function(){return this.naturalWidth/this.naturalHeight},loadingStyle:function(){return{width:this.loadingSize+"px",height:this.loadingSize+"px",right:"15px",bottom:"10px"}}},mounted:function(){this._initialize(),e.rAFPolyfill(),e.toBlobPolyfill(),this.supportDetection().basic\|\|console.warn("Your browser does not support vue-croppa functionality.")},watch:{outputWidth:function(){this.onDimensionChange()},outputHeight:function(){this.onDimensionChange()},canvasColor:function(){this.img?this._draw():this._setPlaceholders()},placeholder:function(){this.img\|\|this._setPlaceholders()},placeholderColor:function(){this.img\|\|this._setPlaceholders()},computedPlaceholderFontSize:function(){this.img\|\|this._setPlaceholders()},preventWhiteSpace:function(t){t&&(this.imageSet=!1),this._placeImage()},scaleRatio:function(t,i){if(this.img&&e.numberValid(t)){var a=1;e.numberValid(i)&&0!==i&&(a=t/i);var n=this.currentPointerCoord\|\|{x:this.imgData.startX+this.imgData.width/2,y:this.imgData.startY+this.imgData.height/2};if(this.imgData.width=this.naturalWidtht,this.imgData.height=this.naturalHeightt,this.preventWhiteSpace&&(this._preventZoomingToWhiteSpace(),this._preventMovingToWhiteSpace()),!this.userMetadata&&this.imageSet&&!this.rotating){var o=(a-1)(n.x-this.imgData.startX),s=(a-1)(n.y-this.imgData.startY);this.imgData.startX=this.imgData.startX-o,this.imgData.startY=this.imgData.startY-s}}},"imgData.width":function(t,i){e.numberValid(t)&&(this.scaleRatio=t/this.naturalWidth,this.hasImage()&&Math.abs(t-i)>1e-5t&&(this.$emit(o.ZOOM_EVENT),this._draw()))},"imgData.height":function(t){e.numberValid(t)&&(this.scaleRatio=t/this.naturalHeight)},loading:function(t){t?this.$emit(o.LOADING_START):this.$emit(o.LOADING_END)}},methods:{getCanvas:function(){return this.canvas},getContext:function(){return this.ctx},getChosenFile:function(){return this.$refs.fileInput.files[0]},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(o.MOVE_EVENT),this._draw())}},moveUpwards:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1;this.move({x:0,y:-t})},moveDownwards:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1;this.move({x:0,y:t})},moveLeftwards:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1;this.move({x:-t,y:0})},moveRightwards:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1;this.move({x:t,y:0})},zoom:function(){var t=!(arguments.length>0&&void 0!==arguments[0])\|\|arguments[0],i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1,e=this.zoomSpeedi,a=1e-5this.outputWidthe,n=1;t?n=1+a:this.imgData.width>10&&(n=1-a),this.scaleRatio=n},zoomIn:function(){this.zoom(!0)},zoomOut:function(){this.zoom(!1)},rotate:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1;this.disableRotation\|\|this.disabled\|\|(t=parseInt(t),(isNaN(t)\|\|t>3\|\|t<-3)&&(console.warn("Invalid argument for rotate() method. It should one of the integers from -3 to 3."),t=1),this._rotateByStep(t))},flipX:function(){this.disableRotation\|\|this.disabled\|\|this._setOrientation(2)},flipY:function(){this.disableRotation\|\|this.disabled\|\|this._setOrientation(4)},refresh:function(){this.$nextTick(this._initialize)},hasImage:function(){return!!this.imageSet},applyMetadata:function(t){if(t){this.userMetadata=t;var i=t.orientation\|\|this.orientation\|\|1;this._setOrientation(i,!0)}},generateDataUrl:function(t,i){return this.hasImage()?this.canvas.toDataURL(t,i):""},generateBlob:function(t,i,e){this.hasImage()\|\|t(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.hasImage())return{};var t=this.imgData;return{startX:t.startX,startY:t.startY,scale:this.scaleRatio,orientation:this.orientation}},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}},chooseFile:function(){this.$refs.fileInput.click()},remove:function(){this._setPlaceholders();var t=null!=this.img;this.originalImage=null,this.img=null,this.$refs.fileInput.value="",this.imgData={width:0,height:0,startX:0,startY:0},this.orientation=1,this.scaleRatio=null,this.userMetadata=null,this.imageSet=!1,this.loading=!1,t&&this.$emit(o.IMAGE_REMOVE_EVENT)},_initialize:function(){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.imageSet=!1,this._setInitial(),this.$emit(o.INIT_EVENT,this)},_setSize:function(){this.canvas.width=this.outputWidth,this.canvas.height=this.outputHeight,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._setOrientation(i)},_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 s=function(){t.ctx.drawImage(i,0,0,t.outputWidth,t.outputHeight)};e.imageLoaded(i)?s():i.onload=s}},_setTextPlaceholder:function(){var t=this.ctx;t.textBaseline="middle",t.textAlign="center";var i=this.outputWidth(2/3)/this.placeholder.length,e=this.computedPlaceholderFontSize&&0!=this.computedPlaceholderFontSize?this.computedPlaceholderFontSize:i;t.font=e+"px sans-serif",t.fillStyle=this.placeholderColor&&"default"!=this.placeholderColor?this.placeholderColor:"#606060",t.fillText(this.placeholder,this.outputWidth/2,this.outputHeight/2)},_setPlaceholders:function(){this._paintBackground(),this._setImagePlaceholder(),this._setTextPlaceholder()},_setInitial:function(){var t=this,i=void 0,a=void 0;if(this.$slots.initial&&this.$slots.initial[0]){var n=this.$slots.initial[0],o=n.tag,r=n.elm;"img"==o&&r&&(a=r)}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"===s(this.initialImage)&&this.initialImage instanceof Image&&(a=this.initialImage),i\|\|a?(this.currentIsInitial=!0,e.imageLoaded(a)?this._onload(a,+a.dataset.exifOrientation,!0):(this.loading=!0,a.onload=function(){t._onload(a,+a.dataset.exifOrientation,!0)},a.onerror=function(){t._setPlaceholders()})):this._setPlaceholders()},_onload:function(t){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1,e=arguments[2];this.originalImage=t,this.img=t,isNaN(i)&&(i=1),this._setOrientation(i),e&&this.$emit(o.INITIAL_IMAGE_LOADED_EVENT)},_handleClick:function(){this.hasImage()\|\|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.currentIsInitial=!1,this.loading=!0,this.$emit(o.FILE_CHOOSE_EVENT,t),!this._fileSizeIsValid(t))throw this.loading=!1,this.$emit(o.FILE_SIZE_EXCEED_EVENT,t),new Error("File size exceeds limit which is "+this.fileSizeLimit+" bytes.");if(!this._fileTypeIsValid(t)){this.loading=!1,this.$emit(o.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 n=new FileReader;n.onload=function(t){var a=t.target.result,n=1;try{n=e.getFileOrientation(e.base64ToArrayBuffer(a))}catch(t){}n<1&&(n=1);var s=new Image;s.src=a,s.onload=function(){i._onload(s,n),i.$emit(o.NEW_IMAGE)}},n.readAsDataURL(t)}},_fileSizeIsValid:function(t){return!!t&&(!this.fileSizeLimit\|\|0==this.fileSizeLimit\|\|t.size<this.fileSizeLimit)},_fileTypeIsValid:function(t){if(!this.accepct)return!0;for(var i=this.accept,e=i.replace(/\/.$/,""),a=i.split(","),n=0,o=a.length;n<o;n++){var s=a[n],r=s.trim();if("."==r.charAt(0)){if(t.name.toLowerCase().split(".").pop()===r.toLowerCase().slice(1))return!0}else if(/\/\$/.test(r)){if(t.type.replace(/\/.$/,"")===e)return!0}else if(t.type===s)return!0}return!1},_placeImage:function(t){if(this.img){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.preventWhiteSpace?this._aspectFill():this.imageSet?(this.imgData.width=this.naturalWidththis.scaleRatio,this.imgData.height=this.naturalHeightthis.scaleRatio):"contain"==this.initialSize?this._aspectFit():"natural"==this.initialSize?this._naturalSize():this._aspectFill(),!this.imageSet&&(/top/.test(this.initialPosition)?i.startY=0:/bottom/.test(this.initialPosition)&&(i.startY=this.outputHeight-i.height),/left/.test(this.initialPosition)?i.startX=0:/right/.test(this.initialPosition)&&(i.startX=this.outputWidth-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.outputWidth-i.width),i.startY=o*(this.outputHeight-i.height)}t&&this._applyMetadata(),t&&this.preventWhiteSpace?this.zoom(!1,0):(this.move({x:0,y:0}),this._draw())}},_aspectFill:function(){var t=this.naturalWidth,i=this.naturalHeight,e=this.outputWidth/this.outputHeight,a=void 0;this.aspectRatio>e?(a=i/this.outputHeight,this.imgData.width=t/a,this.imgData.height=this.outputHeight,this.imgData.startX=-(this.imgData.width-this.outputWidth)/2,this.imgData.startY=0):(a=t/this.outputWidth,this.imgData.height=i/a,this.imgData.width=this.outputWidth,this.imgData.startY=-(this.imgData.height-this.outputHeight)/2,this.imgData.startX=0)},_aspectFit:function(){var t=this.naturalWidth,i=this.naturalHeight,e=this.outputWidth/this.outputHeight,a=void 0;this.aspectRatio>e?(a=t/this.outputWidth,this.imgData.height=i/a,this.imgData.width=this.outputWidth,this.imgData.startY=-(this.imgData.height-this.outputHeight)/2):(a=i/this.outputHeight,this.imgData.width=t/a,this.imgData.height=this.outputHeight,this.imgData.startX=-(this.imgData.width-this.outputWidth)/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.outputWidth)/2,this.imgData.startY=-(this.imgData.height-this.outputHeight)/2},_handlePointerStart:function(t){this.supportTouch=!0,this.pointerMoved=!1;var i=e.getPointerCoords(t,this);if(this.pointerStartCoord=i,!this.disabled)if(this.hasImage()\|\|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,s=n.length;o<s;o++){var r=n[o];document.addEventListener(r,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.hasImage()&&!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.hasImage()){var i=e.getPointerCoords(t,this);if(this.currentPointerCoord=i,!this.disabled&&!this.disableDragToMove){if(t.preventDefault(),!t.touches\|\|1===t.touches.length){if(!this.dragging)return;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,1),this.pinchDistance=a}}}},_handlePointerLeave:function(){this.currentPointerCoord=null},_handleWheel:function(t){var i=this;this.disabled\|\|this.disableScrollToZoom\|\|!this.hasImage()\|\|(t.preventDefault(),this.scrolling=!0,t.wheelDelta<0\|\|t.deltaY>0\|\|t.detail>0?this.zoom(this.reverseScrollToZoom):(t.wheelDelta>0\|\|t.deltaY<0\|\|t.detail<0)&&this.zoom(!this.reverseScrollToZoom),this.$nextTick(function(){i.scrolling=!1}))},_handleDragEnter:function(t){this.disabled\|\|this.disableDragAndDrop\|\|this.hasImage()\|\|!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 s=a.items[n];if("file"==s.kind){i=s.getAsFile();break}}else i=a.files[0];i&&this._onNewFileIn(i)}}},_preventMovingToWhiteSpace:function(){this.imgData.startX>0&&(this.imgData.startX=0),this.imgData.startY>0&&(this.imgData.startY=0),this.outputWidth-this.imgData.startX>this.imgData.width&&(this.imgData.startX=-(this.imgData.width-this.outputWidth)),this.outputHeight-this.imgData.startY>this.imgData.height&&(this.imgData.startY=-(this.imgData.height-this.outputHeight))},_preventZoomingToWhiteSpace:function(){this.imgData.width<this.outputWidth&&(this.scaleRatio=this.outputWidth/this.naturalWidth),this.imgData.height<this.outputHeight&&(this.scaleRatio=this.outputHeight/this.naturalHeight)},_setOrientation:function(){var t=this,i=arguments.length>0&&void 0!==arguments[0]?arguments[0]:6,a=arguments[1],n=a;if(i>1\|\|n){if(!this.img)return;this.rotating=!0;var o=e.getRotatedImage(n?this.originalImage:this.img,i);o.onload=function(){t.img=o,t._placeImage(a)}}else this._placeImage(a);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,n&&(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.outputWidth,this.outputHeight),this.ctx.fillRect(0,0,this.outputWidth,this.outputHeight)},_draw:function(){var t=this;this.$nextTick(function(){t.img&&(window.requestAnimationFrame?requestAnimationFrame(t._drawFrame):t._drawFrame())})},_drawFrame:function(){this.loading=!1;var t=this.ctx,i=this.imgData,e=i.startX,a=i.startY,n=i.width,s=i.height;this._paintBackground(),t.drawImage(this.img,e,a,n,s),this.$emit(o.DRAW,t),this.imageSet\|\|(this.imageSet=!0,this.$emit(o.NEW_IMAGE_DRAWN)),this.rotating=!1},_applyMetadata:function(){var t=this;if(this.userMetadata){var i=this.userMetadata,a=i.startX,n=i.startY,o=i.scale;e.numberValid(a)&&(this.imgData.startX=a),e.numberValid(n)&&(this.imgData.startY=n),e.numberValid(o)&&(this.scaleRatio=o),this.$nextTick(function(){t.userMetadata=null})}},onDimensionChange:function(){this.img?(this.preventWhiteSpace&&(this.imageSet=!1),this._setSize(),this._placeImage()):this._initialize()}}},h=Object.getOwnPropertySymbols,l=Object.prototype.hasOwnProperty,u=Object.prototype.propertyIsEnumerable,c=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),s=1;s<arguments.length;s++){a=Object(arguments[s]);for(var r in a)l.call(a,r)&&(o[r]=a[r]);if(h){n=h(a);for(var c=0;c<n.length;c++)u.call(a,n[c])&&(o[n[c]]=a[n[c]])}}return o},d={componentName:"croppa"};return{install:function(t,i){i=c({},d,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 s=document.createElement("canvas"),r=s.getContext("2d");switch(s.width=n,s.height=o,r.save(),+i){case 1:break;case 2:r.translate(n,0),r.scale(-1,1);break;case 3:r.translate(n,o),r.rotate(1Math.PI);break;case 4:r.translate(0,o),r.scale(1,-1);break;case 5:s.width=o,s.height=n,r.rotate(.5Math.PI),r.scale(1,-1);break;case 6:s.width=o,s.height=n,r.rotate(.5Math.PI),r.translate(0,-o);break;case 7:s.width=o,s.height=n,r.rotate(1.5Math.PI),r.translate(-n,o),r.scale(1,-1);break;case 8:s.width=o,s.height=n,r.translate(0,n),r.rotate(1.5Math.PI)}return r.drawImage(t,e,a,n,o),r.restore(),s}return{drawImage:t}})}),e={onePointCoord:function(t,i){var e=i.canvas,a=i.quality,n=e.getBoundingClientRect(),o=t.clientX,s=t.clientY;return{x:(o-n.left)a,y:(s-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 s=0;s<i;s++)e[s]=t.charCodeAt(s);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 s=i.getUint16(a,o);a+=2;for(var r=0;r<s;r++)if(274==i.getUint16(a+12r,o))return i.getUint16(a+12r+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=String;window&&window.Image&&(a=[String,Image]);var n={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 t>0}},zoomSpeed:{default:3,type:Number,validator:function(t){return t>0}},accept:String,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:a,initialSize:{type:String,default:"cover",validator:function(t){return"cover"===t\|\|"contain"===t\|\|"natural"===t}},initialPosition:{type:String,default:"center",validator:function(t){var i=["center","top","bottom","left","right"];return t.split(" ").every(function(t){return i.indexOf(t)>=0})\|\|/^-?\d+% -?\d+%$/.test(t)}},inputAttrs:Object,showLoading:Boolean,loadingSize:{type:Number,default:20},loadingColor:{type:String,default:"#606060"}},o={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",NEW_IMAGE_DRAWN:"new-image-drawn",IMAGE_REMOVE_EVENT:"image-remove",MOVE_EVENT:"move",ZOOM_EVENT:"zoom",DRAW:"draw",INITIAL_IMAGE_LOADED_EVENT:"initial-image-loaded",LOADING_START:"loading-start",LOADING_END:"loading-end"},s="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",t._b({ref:"fileInput",staticStyle:{height:"1px",width:"1px",overflow:"hidden","margin-left":"-99999px",position:"absolute"},attrs:{type:"file",accept:t.accept,disabled:t.disabled},on:{change:t._handleInputChange}},"input",t.inputAttrs)),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)},pointerleave:function(i){i.stopPropagation(),i.preventDefault(),t._handlePointerLeave(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(),t.showLoading&&t.loading?e("div",{staticClass:"sk-fading-circle",style:t.loadingStyle},t._l(12,function(i){return e("div",{key:i,class:"sk-circle"+i+" sk-circle"},[e("div",{staticClass:"sk-circle-indicator",style:{backgroundColor:t.loadingColor}})])})):t._e(),t._t("default")],2)},staticRenderFns:[],model:{prop:"value",event:o.INIT_EVENT},props:n,data:function(){return{canvas:null,ctx:null,originalImage:null,img:null,dragging:!1,lastMovingCoord:null,imgData:{width:0,height:0,startX:0,startY:0},fileDraggedOver:!1,tabStart:0,scrolling:!1,pinching:!1,rotating:!1,pinchDistance:0,supportTouch:!1,pointerMoved:!1,pointerStartCoord:null,naturalWidth:0,naturalHeight:0,scaleRatio:null,orientation:1,userMetadata:null,imageSet:!1,currentPointerCoord:null,currentIsInitial:!1,loading:!1}},computed:{outputWidth:function(){return this.widththis.quality},outputHeight:function(){return this.heightthis.quality},computedPlaceholderFontSize:function(){return this.placeholderFontSizethis.quality},aspectRatio:function(){return this.naturalWidth/this.naturalHeight},loadingStyle:function(){return{width:this.loadingSize+"px",height:this.loadingSize+"px",right:"15px",bottom:"10px"}}},mounted:function(){this._initialize(),e.rAFPolyfill(),e.toBlobPolyfill(),this.supportDetection().basic\|\|console.warn("Your browser does not support vue-croppa functionality.")},watch:{outputWidth:function(){this.onDimensionChange()},outputHeight:function(){this.onDimensionChange()},canvasColor:function(){this.img?this._draw():this._setPlaceholders()},placeholder:function(){this.img\|\|this._setPlaceholders()},placeholderColor:function(){this.img\|\|this._setPlaceholders()},computedPlaceholderFontSize:function(){this.img\|\|this._setPlaceholders()},preventWhiteSpace:function(t){t&&(this.imageSet=!1),this._placeImage()},scaleRatio:function(t,i){if(this.img&&e.numberValid(t)){var a=1;e.numberValid(i)&&0!==i&&(a=t/i);var n=this.currentPointerCoord\|\|{x:this.imgData.startX+this.imgData.width/2,y:this.imgData.startY+this.imgData.height/2};if(this.imgData.width=this.naturalWidtht,this.imgData.height=this.naturalHeightt,this.preventWhiteSpace&&(this._preventZoomingToWhiteSpace(),this._preventMovingToWhiteSpace()),!this.userMetadata&&this.imageSet&&!this.rotating){var o=(a-1)(n.x-this.imgData.startX),s=(a-1)(n.y-this.imgData.startY);this.imgData.startX=this.imgData.startX-o,this.imgData.startY=this.imgData.startY-s}}},"imgData.width":function(t,i){e.numberValid(t)&&(this.scaleRatio=t/this.naturalWidth,this.hasImage()&&Math.abs(t-i)>1e-5t&&(this.$emit(o.ZOOM_EVENT),this._draw()))},"imgData.height":function(t){e.numberValid(t)&&(this.scaleRatio=t/this.naturalHeight)},loading:function(t){t?this.$emit(o.LOADING_START):this.$emit(o.LOADING_END)}},methods:{getCanvas:function(){return this.canvas},getContext:function(){return this.ctx},getChosenFile:function(){return this.$refs.fileInput.files[0]},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(o.MOVE_EVENT),this._draw())}},moveUpwards:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1;this.move({x:0,y:-t})},moveDownwards:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1;this.move({x:0,y:t})},moveLeftwards:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1;this.move({x:-t,y:0})},moveRightwards:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1;this.move({x:t,y:0})},zoom:function(){var t=!(arguments.length>0&&void 0!==arguments[0])\|\|arguments[0],i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1,e=this.zoomSpeedi,a=1e-5this.outputWidthe,n=1;t?n=1+a:this.imgData.width>10&&(n=1-a),this.scaleRatio=n},zoomIn:function(){this.zoom(!0)},zoomOut:function(){this.zoom(!1)},rotate:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1;this.disableRotation\|\|this.disabled\|\|(t=parseInt(t),(isNaN(t)\|\|t>3\|\|t<-3)&&(console.warn("Invalid argument for rotate() method. It should one of the integers from -3 to 3."),t=1),this._rotateByStep(t))},flipX:function(){this.disableRotation\|\|this.disabled\|\|this._setOrientation(2)},flipY:function(){this.disableRotation\|\|this.disabled\|\|this._setOrientation(4)},refresh:function(){this.$nextTick(this._initialize)},hasImage:function(){return!!this.imageSet},applyMetadata:function(t){if(t){this.userMetadata=t;var i=t.orientation\|\|this.orientation\|\|1;this._setOrientation(i,!0)}},generateDataUrl:function(t,i){return this.hasImage()?this.canvas.toDataURL(t,i):""},generateBlob:function(t,i,e){this.hasImage()?this.canvas.toBlob(t,i,e):t(null)},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.hasImage())return{};var t=this.imgData;return{startX:t.startX,startY:t.startY,scale:this.scaleRatio,orientation:this.orientation}},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}},chooseFile:function(){this.$refs.fileInput.click()},remove:function(){this._setPlaceholders();var t=null!=this.img;this.originalImage=null,this.img=null,this.$refs.fileInput.value="",this.imgData={width:0,height:0,startX:0,startY:0},this.orientation=1,this.scaleRatio=null,this.userMetadata=null,this.imageSet=!1,this.loading=!1,t&&this.$emit(o.IMAGE_REMOVE_EVENT)},_initialize:function(){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.imageSet=!1,this._setInitial(),this.$emit(o.INIT_EVENT,this)},_setSize:function(){this.canvas.width=this.outputWidth,this.canvas.height=this.outputHeight,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._setOrientation(i)},_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 s=function(){t.ctx.drawImage(i,0,0,t.outputWidth,t.outputHeight)};e.imageLoaded(i)?s():i.onload=s}},_setTextPlaceholder:function(){var t=this.ctx;t.textBaseline="middle",t.textAlign="center";var i=this.outputWidth(2/3)/this.placeholder.length,e=this.computedPlaceholderFontSize&&0!=this.computedPlaceholderFontSize?this.computedPlaceholderFontSize:i;t.font=e+"px sans-serif",t.fillStyle=this.placeholderColor&&"default"!=this.placeholderColor?this.placeholderColor:"#606060",t.fillText(this.placeholder,this.outputWidth/2,this.outputHeight/2)},_setPlaceholders:function(){this._paintBackground(),this._setImagePlaceholder(),this._setTextPlaceholder()},_setInitial:function(){var t=this,i=void 0,a=void 0;if(this.$slots.initial&&this.$slots.initial[0]){var n=this.$slots.initial[0],o=n.tag,r=n.elm;"img"==o&&r&&(a=r)}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"===s(this.initialImage)&&this.initialImage instanceof Image&&(a=this.initialImage),i\|\|a?(this.currentIsInitial=!0,e.imageLoaded(a)?this._onload(a,+a.dataset.exifOrientation,!0):(this.loading=!0,a.onload=function(){t._onload(a,+a.dataset.exifOrientation,!0)},a.onerror=function(){t._setPlaceholders()})):this._setPlaceholders()},_onload:function(t){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1,e=arguments[2];this.originalImage=t,this.img=t,isNaN(i)&&(i=1),this._setOrientation(i),e&&this.$emit(o.INITIAL_IMAGE_LOADED_EVENT)},_handleClick:function(){this.hasImage()\|\|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.currentIsInitial=!1,this.loading=!0,this.$emit(o.FILE_CHOOSE_EVENT,t),!this._fileSizeIsValid(t))throw this.loading=!1,this.$emit(o.FILE_SIZE_EXCEED_EVENT,t),new Error("File size exceeds limit which is "+this.fileSizeLimit+" bytes.");if(!this._fileTypeIsValid(t)){this.loading=!1,this.$emit(o.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 n=new FileReader;n.onload=function(t){var a=t.target.result,n=1;try{n=e.getFileOrientation(e.base64ToArrayBuffer(a))}catch(t){}n<1&&(n=1);var s=new Image;s.src=a,s.onload=function(){i._onload(s,n),i.$emit(o.NEW_IMAGE)}},n.readAsDataURL(t)}},_fileSizeIsValid:function(t){return!!t&&(!this.fileSizeLimit\|\|0==this.fileSizeLimit\|\|t.size<this.fileSizeLimit)},_fileTypeIsValid:function(t){if(!this.accepct)return!0;for(var i=this.accept,e=i.replace(/\/.$/,""),a=i.split(","),n=0,o=a.length;n<o;n++){var s=a[n],r=s.trim();if("."==r.charAt(0)){if(t.name.toLowerCase().split(".").pop()===r.toLowerCase().slice(1))return!0}else if(/\/\$/.test(r)){if(t.type.replace(/\/.$/,"")===e)return!0}else if(t.type===s)return!0}return!1},_placeImage:function(t){if(this.img){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.preventWhiteSpace?this._aspectFill():this.imageSet?(this.imgData.width=this.naturalWidththis.scaleRatio,this.imgData.height=this.naturalHeightthis.scaleRatio):"contain"==this.initialSize?this._aspectFit():"natural"==this.initialSize?this._naturalSize():this._aspectFill(),!this.imageSet&&(/top/.test(this.initialPosition)?i.startY=0:/bottom/.test(this.initialPosition)&&(i.startY=this.outputHeight-i.height),/left/.test(this.initialPosition)?i.startX=0:/right/.test(this.initialPosition)&&(i.startX=this.outputWidth-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.outputWidth-i.width),i.startY=o*(this.outputHeight-i.height)}t&&this._applyMetadata(),t&&this.preventWhiteSpace?this.zoom(!1,0):(this.move({x:0,y:0}),this._draw())}},_aspectFill:function(){var t=this.naturalWidth,i=this.naturalHeight,e=this.outputWidth/this.outputHeight,a=void 0;this.aspectRatio>e?(a=i/this.outputHeight,this.imgData.width=t/a,this.imgData.height=this.outputHeight,this.imgData.startX=-(this.imgData.width-this.outputWidth)/2,this.imgData.startY=0):(a=t/this.outputWidth,this.imgData.height=i/a,this.imgData.width=this.outputWidth,this.imgData.startY=-(this.imgData.height-this.outputHeight)/2,this.imgData.startX=0)},_aspectFit:function(){var t=this.naturalWidth,i=this.naturalHeight,e=this.outputWidth/this.outputHeight,a=void 0;this.aspectRatio>e?(a=t/this.outputWidth,this.imgData.height=i/a,this.imgData.width=this.outputWidth,this.imgData.startY=-(this.imgData.height-this.outputHeight)/2):(a=i/this.outputHeight,this.imgData.width=t/a,this.imgData.height=this.outputHeight,this.imgData.startX=-(this.imgData.width-this.outputWidth)/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.outputWidth)/2,this.imgData.startY=-(this.imgData.height-this.outputHeight)/2},_handlePointerStart:function(t){this.supportTouch=!0,this.pointerMoved=!1;var i=e.getPointerCoords(t,this);if(this.pointerStartCoord=i,!this.disabled)if(this.hasImage()\|\|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,s=n.length;o<s;o++){var r=n[o];document.addEventListener(r,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.hasImage()&&!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.hasImage()){var i=e.getPointerCoords(t,this);if(this.currentPointerCoord=i,!this.disabled&&!this.disableDragToMove){if(t.preventDefault(),!t.touches\|\|1===t.touches.length){if(!this.dragging)return;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,1),this.pinchDistance=a}}}},_handlePointerLeave:function(){this.currentPointerCoord=null},_handleWheel:function(t){var i=this;this.disabled\|\|this.disableScrollToZoom\|\|!this.hasImage()\|\|(t.preventDefault(),this.scrolling=!0,t.wheelDelta<0\|\|t.deltaY>0\|\|t.detail>0?this.zoom(this.reverseScrollToZoom):(t.wheelDelta>0\|\|t.deltaY<0\|\|t.detail<0)&&this.zoom(!this.reverseScrollToZoom),this.$nextTick(function(){i.scrolling=!1}))},_handleDragEnter:function(t){this.disabled\|\|this.disableDragAndDrop\|\|this.hasImage()\|\|!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 s=a.items[n];if("file"==s.kind){i=s.getAsFile();break}}else i=a.files[0];i&&this._onNewFileIn(i)}}},_preventMovingToWhiteSpace:function(){this.imgData.startX>0&&(this.imgData.startX=0),this.imgData.startY>0&&(this.imgData.startY=0),this.outputWidth-this.imgData.startX>this.imgData.width&&(this.imgData.startX=-(this.imgData.width-this.outputWidth)),this.outputHeight-this.imgData.startY>this.imgData.height&&(this.imgData.startY=-(this.imgData.height-this.outputHeight))},_preventZoomingToWhiteSpace:function(){this.imgData.width<this.outputWidth&&(this.scaleRatio=this.outputWidth/this.naturalWidth),this.imgData.height<this.outputHeight&&(this.scaleRatio=this.outputHeight/this.naturalHeight)},_setOrientation:function(){var t=this,i=arguments.length>0&&void 0!==arguments[0]?arguments[0]:6,a=arguments[1],n=a;if(i>1\|\|n){if(!this.img)return;this.rotating=!0;var o=e.getRotatedImage(n?this.originalImage:this.img,i);o.onload=function(){t.img=o,t._placeImage(a)}}else this._placeImage(a);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,n&&(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.outputWidth,this.outputHeight),this.ctx.fillRect(0,0,this.outputWidth,this.outputHeight)},_draw:function(){var t=this;this.$nextTick(function(){t.img&&(window.requestAnimationFrame?requestAnimationFrame(t._drawFrame):t._drawFrame())})},_drawFrame:function(){this.loading=!1;var t=this.ctx,i=this.imgData,e=i.startX,a=i.startY,n=i.width,s=i.height;this._paintBackground(),t.drawImage(this.img,e,a,n,s),this.$emit(o.DRAW,t),this.imageSet\|\|(this.imageSet=!0,this.$emit(o.NEW_IMAGE_DRAWN)),this.rotating=!1},_applyMetadata:function(){var t=this;if(this.userMetadata){var i=this.userMetadata,a=i.startX,n=i.startY,o=i.scale;e.numberValid(a)&&(this.imgData.startX=a),e.numberValid(n)&&(this.imgData.startY=n),e.numberValid(o)&&(this.scaleRatio=o),this.$nextTick(function(){t.userMetadata=null})}},onDimensionChange:function(){this.img?(this.preventWhiteSpace&&(this.imageSet=!1),this._setSize(),this._placeImage()):this._initialize()}}},h=Object.getOwnPropertySymbols,l=Object.prototype.hasOwnProperty,u=Object.prototype.propertyIsEnumerable,c=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),s=1;s<arguments.length;s++){a=Object(arguments[s]);for(var r in a)l.call(a,r)&&(o[r]=a[r]);if(h){n=h(a);for(var c=0;c<n.length;c++)u.call(a,n[c])&&(o[n[c]]=a[n[c]])}}return o},d={componentName:"croppa"};return{install:function(t,i){i=c({},d,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}});

package.json

		{
		"name": "vue-croppa",
		"version": "1.1.1",
		"version": "1.1.2",
		"description": "A simple straightforward customizable lightweight mobile-friendly image cropper for Vue 2.0.",
		@@ -5,0 +5,0 @@ "main": "dist/vue-croppa.js",

README.md

		@@ -591,2 +591,3 @@ # vue-croppa
		- [ ] Add unit test.
		- [ ] Big image rotation optimizations.
		- [ ] Big image rotation optimizations (blob url?).
		- [ ] Doc about blob.

src/cropper.vue

Sorry, the diff of this file is not supported yet

vue-croppa - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics