diff --git a/dist/vue-croppa.js b/dist/vue-croppa.js index 8742723..13f0508 100644 --- a/dist/vue-croppa.js +++ b/dist/vue-croppa.js @@ -1,5 +1,5 @@ /* - * vue-croppa v1.2.0 + * vue-croppa v1.2.1 * https://github.com/zhanziyang/vue-croppa * * Copyright (c) 2018 zhanziyang @@ -1069,13 +1069,13 @@ var component = { render: function render() { if (!this._fileSizeIsValid(file)) { this.loading = false; this.$emit(events.FILE_SIZE_EXCEED_EVENT, file); - throw new Error('File size exceeds limit which is ' + this.fileSizeLimit + ' bytes.'); + return false; } if (!this._fileTypeIsValid(file)) { this.loading = false; this.$emit(events.FILE_TYPE_MISMATCH_EVENT, file); var type = file.type || file.name.toLowerCase().split('.').pop(); - throw new Error('File type (' + type + ') mimatches (' + this.accept + ').'); + return false; } if (typeof window !== 'undefined' && typeof window.FileReader !== 'undefined') { var fr = new FileReader(); diff --git a/dist/vue-croppa.min.js b/dist/vue-croppa.min.js index 4b4a1d4..9282158 100644 --- a/dist/vue-croppa.min.js +++ b/dist/vue-croppa.min.js @@ -1,8 +1,8 @@ /* - * vue-croppa v1.2.0 + * vue-croppa v1.2.1 * https://github.com/zhanziyang/vue-croppa * * Copyright (c) 2018 zhanziyang * Released under the ISC license */ -!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(1*Math.PI);break;case 4:r.translate(0,o),r.scale(1,-1);break;case 5:s.width=o,s.height=n,r.rotate(.5*Math.PI),r.scale(1,-1);break;case 6:s.width=o,s.height=n,r.rotate(.5*Math.PI),r.translate(0,-o);break;case 7:s.width=o,s.height=n,r.rotate(1.5*Math.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.5*Math.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;e0}},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"},replaceDrop:Boolean,passive:Boolean,imageBorderRadius:{type:[Number,String],default:0}},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=["imgData","img","imgSet","originalImage","naturalHeight","naturalWidth","orientation","scaleRatio"],h={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.passive?"croppa--passive":"")+" "+(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&&!t.passive?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.width*this.quality},outputHeight:function(){return this.height*this.quality},computedPlaceholderFontSize:function(){return this.placeholderFontSize*this.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(){var t=this;this._initialize(),e.rAFPolyfill(),e.toBlobPolyfill(),this.supportDetection().basic||console.warn("Your browser does not support vue-croppa functionality."),this.passive&&this.$watch("value._data",function(i){var e=!1;if(i){for(var a in i)if(r.indexOf(a)>=0){var n=i[a];n!==t[a]&&(t.$set(t,a,n),e=!0)}e&&(t.img?t.$nextTick(function(){t._draw()}):t.remove())}},{deep:!0})},watch:{outputWidth:function(){this.onDimensionChange()},outputHeight:function(){this.onDimensionChange()},canvasColor:function(){this.img?this._draw():this._setPlaceholders()},imageBorderRadius:function(){this.img&&this._draw()},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.passive&&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.naturalWidth*t,this.imgData.height=this.naturalHeight*t,!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}this.preventWhiteSpace&&(this._preventZoomingToWhiteSpace(),this._preventMovingToWhiteSpace())}},"imgData.width":function(t,i){e.numberValid(t)&&(this.scaleRatio=t/this.naturalWidth,this.hasImage()&&Math.abs(t-i)>1e-5*t&&(this.$emit(o.ZOOM_EVENT),this._draw()))},"imgData.height":function(t){e.numberValid(t)&&(this.scaleRatio=t/this.naturalHeight)},"imgData.startX":function(t){this.hasImage()&&this.$nextTick(this._draw)},"imgData.startY":function(t){this.hasImage()&&this.$nextTick(this._draw)},loading:function(t){this.passive||(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&&!this.passive){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;if(!this.passive){var e=this.zoomSpeed*i,a=1e-5*this.outputWidth*e,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||this.passive||(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.passive||this._setOrientation(2)},flipY:function(){this.disableRotation||this.disabled||this.passive||this._setOrientation(4)},refresh:function(){this.$nextTick(this._initialize)},hasImage:function(){return!!this.imageSet},applyMetadata:function(t){if(t&&!this.passive){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;a1&&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.passive||this.chooseFile()},_handleInputChange:function(){var t=this.$refs.fileInput;if(t.files.length&&!this.passive){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+") mimatches ("+this.accept+").")}if("undefined"!=typeof window&&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.sizee?(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){if(!this.passive){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;o0,1),this.pinchDistance=a}}}},_handlePointerLeave:function(){this.passive||(this.currentPointerCoord=null)},_handleWheel:function(t){var i=this;this.passive||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.passive||this.disabled||this.disableDragAndDrop||!e.eventHasFile(t)||this.hasImage()&&!this.replaceDrop||(this.fileDraggedOver=!0)},_handleDragLeave:function(t){this.passive||this.fileDraggedOver&&e.eventHasFile(t)&&(this.fileDraggedOver=!1)},_handleDragOver:function(t){},_handleDrop:function(t){if(!this.passive&&this.fileDraggedOver&&e.eventHasFile(t)){this.hasImage()&&this.replaceDrop&&this.remove(),this.fileDraggedOver=!1;var i=void 0,a=t.dataTransfer;if(a){if(a.items)for(var n=0,o=a.items.length;n0&&(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.width0&&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&&("undefined"!=typeof window&&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.preventWhiteSpace&&this._clip(this._createContainerClipPath),this.$emit(o.DRAW,t),this.imageSet||(this.imageSet=!0,this.$emit(o.NEW_IMAGE_DRAWN)),this.rotating=!1},_clipPathFactory:function(t,i,e,a){var n=this.ctx,o="number"==typeof this.imageBorderRadius?this.imageBorderRadius:isNaN(Number(this.imageBorderRadius))?0:Number(this.imageBorderRadius);n.beginPath(),n.moveTo(t+o,i),n.lineTo(t+e-o,i),n.quadraticCurveTo(t+e,i,t+e,i+o),n.lineTo(t+e,i+a-o),n.quadraticCurveTo(t+e,i+a,t+e-o,i+a),n.lineTo(t+o,i+a),n.quadraticCurveTo(t,i+a,t,i+a-o),n.lineTo(t,i+o),n.quadraticCurveTo(t,i,t+o,i),n.closePath()},_createContainerClipPath:function(){var t=this;this._clipPathFactory(0,0,this.outputWidth,this.outputHeight),this.clipPlugins&&this.clipPlugins.length&&this.clipPlugins.forEach(function(i){i(t.ctx,0,0,t.outputWidth,t.outputHeight)})},_clip:function(t){var i=this.ctx;i.save(),i.fillStyle="#fff",i.globalCompositeOperation="destination-in",t(),i.fill(),i.restore()},_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()}}},l=Object.getOwnPropertySymbols,u=Object.prototype.hasOwnProperty,c=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),s=1;s0}},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"},replaceDrop:Boolean,passive:Boolean,imageBorderRadius:{type:[Number,String],default:0}},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=["imgData","img","imgSet","originalImage","naturalHeight","naturalWidth","orientation","scaleRatio"],h={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.passive?"croppa--passive":"")+" "+(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&&!t.passive?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.width*this.quality},outputHeight:function(){return this.height*this.quality},computedPlaceholderFontSize:function(){return this.placeholderFontSize*this.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(){var t=this;this._initialize(),e.rAFPolyfill(),e.toBlobPolyfill(),this.supportDetection().basic||console.warn("Your browser does not support vue-croppa functionality."),this.passive&&this.$watch("value._data",function(i){var e=!1;if(i){for(var a in i)if(r.indexOf(a)>=0){var n=i[a];n!==t[a]&&(t.$set(t,a,n),e=!0)}e&&(t.img?t.$nextTick(function(){t._draw()}):t.remove())}},{deep:!0})},watch:{outputWidth:function(){this.onDimensionChange()},outputHeight:function(){this.onDimensionChange()},canvasColor:function(){this.img?this._draw():this._setPlaceholders()},imageBorderRadius:function(){this.img&&this._draw()},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.passive&&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.naturalWidth*t,this.imgData.height=this.naturalHeight*t,!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}this.preventWhiteSpace&&(this._preventZoomingToWhiteSpace(),this._preventMovingToWhiteSpace())}},"imgData.width":function(t,i){e.numberValid(t)&&(this.scaleRatio=t/this.naturalWidth,this.hasImage()&&Math.abs(t-i)>1e-5*t&&(this.$emit(o.ZOOM_EVENT),this._draw()))},"imgData.height":function(t){e.numberValid(t)&&(this.scaleRatio=t/this.naturalHeight)},"imgData.startX":function(t){this.hasImage()&&this.$nextTick(this._draw)},"imgData.startY":function(t){this.hasImage()&&this.$nextTick(this._draw)},loading:function(t){this.passive||(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&&!this.passive){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;if(!this.passive){var e=this.zoomSpeed*i,a=1e-5*this.outputWidth*e,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||this.passive||(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.passive||this._setOrientation(2)},flipY:function(){this.disableRotation||this.disabled||this.passive||this._setOrientation(4)},refresh:function(){this.$nextTick(this._initialize)},hasImage:function(){return!!this.imageSet},applyMetadata:function(t){if(t&&!this.passive){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;a1&&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.passive||this.chooseFile()},_handleInputChange:function(){var t=this.$refs.fileInput;if(t.files.length&&!this.passive){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))return this.loading=!1,this.$emit(o.FILE_SIZE_EXCEED_EVENT,t),!1;if(!this._fileTypeIsValid(t)){this.loading=!1,this.$emit(o.FILE_TYPE_MISMATCH_EVENT,t);t.type||t.name.toLowerCase().split(".").pop();return!1}if("undefined"!=typeof window&&void 0!==window.FileReader){var a=new FileReader;a.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)}},a.readAsDataURL(t)}},_fileSizeIsValid:function(t){return!!t&&(!this.fileSizeLimit||0==this.fileSizeLimit||t.sizee?(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){if(!this.passive){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;o0,1),this.pinchDistance=a}}}},_handlePointerLeave:function(){this.passive||(this.currentPointerCoord=null)},_handleWheel:function(t){var i=this;this.passive||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.passive||this.disabled||this.disableDragAndDrop||!e.eventHasFile(t)||this.hasImage()&&!this.replaceDrop||(this.fileDraggedOver=!0)},_handleDragLeave:function(t){this.passive||this.fileDraggedOver&&e.eventHasFile(t)&&(this.fileDraggedOver=!1)},_handleDragOver:function(t){},_handleDrop:function(t){if(!this.passive&&this.fileDraggedOver&&e.eventHasFile(t)){this.hasImage()&&this.replaceDrop&&this.remove(),this.fileDraggedOver=!1;var i=void 0,a=t.dataTransfer;if(a){if(a.items)for(var n=0,o=a.items.length;n0&&(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.width0&&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&&("undefined"!=typeof window&&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.preventWhiteSpace&&this._clip(this._createContainerClipPath),this.$emit(o.DRAW,t),this.imageSet||(this.imageSet=!0,this.$emit(o.NEW_IMAGE_DRAWN)),this.rotating=!1},_clipPathFactory:function(t,i,e,a){var n=this.ctx,o="number"==typeof this.imageBorderRadius?this.imageBorderRadius:isNaN(Number(this.imageBorderRadius))?0:Number(this.imageBorderRadius);n.beginPath(),n.moveTo(t+o,i),n.lineTo(t+e-o,i),n.quadraticCurveTo(t+e,i,t+e,i+o),n.lineTo(t+e,i+a-o),n.quadraticCurveTo(t+e,i+a,t+e-o,i+a),n.lineTo(t+o,i+a),n.quadraticCurveTo(t,i+a,t,i+a-o),n.lineTo(t,i+o),n.quadraticCurveTo(t,i,t+o,i),n.closePath()},_createContainerClipPath:function(){var t=this;this._clipPathFactory(0,0,this.outputWidth,this.outputHeight),this.clipPlugins&&this.clipPlugins.length&&this.clipPlugins.forEach(function(i){i(t.ctx,0,0,t.outputWidth,t.outputHeight)})},_clip:function(t){var i=this.ctx;i.save(),i.fillStyle="#fff",i.globalCompositeOperation="destination-in",t(),i.fill(),i.restore()},_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()}}},l=Object.getOwnPropertySymbols,u=Object.prototype.hasOwnProperty,c=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),s=1;s