Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
vue-croppa
Advanced tools
vue-croppa - npm Package Compare versions
Comparing version 0.3.1 to 0.3.2
| /* | ||
| * vue-croppa v0.3.1 | ||
| * vue-croppa v0.3.2 | ||
| * https://github.com/zhanziyang/vue-croppa | ||
@@ -413,3 +413,4 @@ * | ||
| ZOOM_EVENT: 'zoom', | ||
| DRAW: 'draw' | ||
| DRAW: 'draw', | ||
| INITIAL_IMAGE_LOADED_EVENT: 'initial-image-loaded' | ||
| }; | ||
@@ -429,3 +430,3 @@ | ||
| var PINCH_ACCELERATION = 2; // The amount of times by which the pinching is more sensitive than the scolling | ||
| var DEBUG = false; | ||
| // const DEBUG = false | ||
@@ -780,5 +781,7 @@ var component = { render: function render() { | ||
| this._onload(img, +img.dataset['exifOrientation']); | ||
| this.$emit(events.INITIAL_IMAGE_LOADED_EVENT); | ||
| } else { | ||
| img.onload = function () { | ||
| _this3._onload(img, +img.dataset['exifOrientation']); | ||
| _this3.$emit(events.INITIAL_IMAGE_LOADED_EVENT); | ||
| }; | ||
@@ -803,10 +806,4 @@ | ||
| handleClick: function handleClick() { | ||
| if (DEBUG) { | ||
| console.log('click'); | ||
| } | ||
| if (!this.img && !this.disableClickToChoose && !this.disabled && !this.supportTouch) { | ||
| this.chooseFile(); | ||
| if (DEBUG) { | ||
| console.log('trigger by click'); | ||
| } | ||
| } | ||
@@ -877,3 +874,3 @@ }, | ||
| }, | ||
| imgContentInit: function imgContentInit() { | ||
| imgContentInit: function imgContentInit(applyMetadata) { | ||
| this.naturalWidth = this.img.naturalWidth; | ||
@@ -913,3 +910,3 @@ this.naturalHeight = this.img.naturalHeight; | ||
| this.applyMetadata(); | ||
| applyMetadata && this.applyMetadata(); | ||
@@ -967,5 +964,2 @@ if (this.preventWhiteSpace) { | ||
| handlePointerStart: function handlePointerStart(evt) { | ||
| if (DEBUG) { | ||
| console.log('touch start'); | ||
| } | ||
| this.supportTouch = true; | ||
@@ -1005,5 +999,2 @@ this.pointerMoved = false; | ||
| handlePointerEnd: function handlePointerEnd(evt) { | ||
| if (DEBUG) { | ||
| console.log('touch end'); | ||
| } | ||
| var pointerMoveDistance = 0; | ||
@@ -1019,5 +1010,2 @@ if (this.pointerStartCoord) { | ||
| this.chooseFile(); | ||
| if (DEBUG) { | ||
| console.log('trigger by touch'); | ||
| } | ||
| } | ||
@@ -1191,6 +1179,6 @@ this.tabStart = 0; | ||
| _this5.img = _img; | ||
| _this5.imgContentInit(); | ||
| _this5.imgContentInit(useOriginal); | ||
| }; | ||
| } else { | ||
| this.imgContentInit(); | ||
| this.imgContentInit(useOriginal); | ||
| } | ||
@@ -1197,0 +1185,0 @@ |
| /* | ||
| * vue-croppa v0.3.1 | ||
| * vue-croppa v0.3.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 r=document.createElement("canvas"),s=r.getContext("2d");switch(r.width=n,r.height=o,s.save(),+i){case 1:break;case 2:s.translate(n,0),s.scale(-1,1);break;case 3:s.translate(n,o),s.rotate(1*Math.PI);break;case 4:s.translate(0,o),s.scale(1,-1);break;case 5:r.width=o,r.height=n,s.rotate(.5*Math.PI),s.scale(1,-1);break;case 6:r.width=o,r.height=n,s.rotate(.5*Math.PI),s.translate(0,-o);break;case 7:r.width=o,r.height=n,s.rotate(1.5*Math.PI),s.translate(-n,o),s.scale(1,-1);break;case 8:r.width=o,r.height=n,s.translate(0,n),s.rotate(1.5*Math.PI)}return s.drawImage(t,e,a,n,o),s.restore(),r}return{drawImage:t}})}),e={onePointCoord:function(t,i){var e=i.canvas,a=i.quality,n=e.getBoundingClientRect(),o=t.clientX,r=t.clientY;return{x:(o-n.left)*a,y:(r-n.top)*a}},getPointerCoords:function(t,i){var e=void 0;return e=t.touches&&t.touches[0]?t.touches[0]:t.changedTouches&&t.changedTouches[0]?t.changedTouches[0]:t,this.onePointCoord(e,i)},getPinchDistance:function(t,i){var e=t.touches[0],a=t.touches[1],n=this.onePointCoord(e,i),o=this.onePointCoord(a,i);return Math.sqrt(Math.pow(n.x-o.x,2)+Math.pow(n.y-o.y,2))},getPinchCenterCoord:function(t,i){var e=t.touches[0],a=t.touches[1],n=this.onePointCoord(e,i),o=this.onePointCoord(a,i);return{x:(n.x+o.x)/2,y:(n.y+o.y)/2}},imageLoaded:function(t){return t.complete&&0!==t.naturalWidth},rAFPolyfill:function(){if("undefined"!=typeof document&&"undefined"!=typeof window){for(var t=0,i=["webkit","moz"],e=0;e<i.length&&!window.requestAnimationFrame;++e)window.requestAnimationFrame=window[i[e]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[i[e]+"CancelAnimationFrame"]||window[i[e]+"CancelRequestAnimationFrame"];window.requestAnimationFrame||(window.requestAnimationFrame=function(i){var e=(new Date).getTime(),a=Math.max(0,16.7-(e-t)),n=window.setTimeout(function(){i(e+a)},a);return t=e+a,n}),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(t){clearTimeout(t)}),Array.isArray=function(t){return"[object Array]"===Object.prototype.toString.call(t)}}},toBlobPolyfill:function(){if("undefined"!=typeof document&&"undefined"!=typeof window&&HTMLCanvasElement){var t,i,e;HTMLCanvasElement.prototype.toBlob||Object.defineProperty(HTMLCanvasElement.prototype,"toBlob",{value:function(a,n,o){t=atob(this.toDataURL(n,o).split(",")[1]),i=t.length,e=new Uint8Array(i);for(var r=0;r<i;r++)e[r]=t.charCodeAt(r);a(new Blob([e],{type:n||"image/png"}))}})}},eventHasFile:function(t){var i=t.dataTransfer||t.originalEvent.dataTransfer;if(i.types)for(var e=0,a=i.types.length;e<a;e++)if("Files"==i.types[e])return!0;return!1},getFileOrientation:function(t){var i=new DataView(t);if(65496!=i.getUint16(0,!1))return-2;for(var e=i.byteLength,a=2;a<e;){var n=i.getUint16(a,!1);if(a+=2,65505==n){if(1165519206!=i.getUint32(a+=2,!1))return-1;var o=18761==i.getUint16(a+=6,!1);a+=i.getUint32(a+4,o);var r=i.getUint16(a,o);a+=2;for(var s=0;s<r;s++)if(274==i.getUint16(a+12*s,o))return i.getUint16(a+12*s+8,o)}else{if(65280!=(65280&n))break;a+=i.getUint16(a,!1)}}return-1},base64ToArrayBuffer:function(t){t=t.replace(/^data:([^;]+);base64,/gim,"");for(var i=atob(t),e=i.length,a=new Uint8Array(e),n=0;n<e;n++)a[n]=i.charCodeAt(n);return a.buffer},getRotatedImage:function(t,e){var a=i.drawImage(t,e),n=new Image;return n.src=a.toDataURL(),n},flipX:function(t){return t%2==0?t-1:t+1},flipY:function(t){return{1:4,4:1,2:3,3:2,5:8,8:5,6:7,7:6}[t]},rotate90:function(t){return{1:6,2:7,3:8,4:5,5:2,6:3,7:4,8:1}[t]}};Number.isInteger=Number.isInteger||function(t){return"number"==typeof t&&isFinite(t)&&Math.floor(t)===t};var a={value:Object,width:{type:Number,default:200,validator:function(t){return t>0}},height:{type:Number,default:200,validator:function(t){return t>0}},placeholder:{type:String,default:"Choose an image"},placeholderColor:{default:"#606060"},placeholderFontSize:{type:Number,default:0,validator:function(t){return t>=0}},canvasColor:{default:"transparent"},quality:{type:Number,default:2,validator:function(t){return Number.isInteger(t)&&t>0}},zoomSpeed:{default:3,type:Number,validator:function(t){return t>0}},accept:{type:String,default:".jpg,.jpeg,.png,.gif,.bmp,.webp,.svg,.tiff"},fileSizeLimit:{type:Number,default:0,validator:function(t){return t>=0}},disabled:Boolean,disableDragAndDrop:Boolean,disableClickToChoose:Boolean,disableDragToMove:Boolean,disableScrollToZoom:Boolean,disablePinchToZoom:Boolean,disableRotation:Boolean,reverseScrollToZoom:Boolean,preventWhiteSpace:Boolean,showRemoveButton:{type:Boolean,default:!0},removeButtonColor:{type:String,default:"red"},removeButtonSize:{type:Number},initialImage:[String,HTMLImageElement],initialSize:{type:String,default:"cover",validator:function(t){return"cover"===t||"contain"===t||"natural"===t}},initialPosition:{type:String,default:"center",validator:function(t){return["center","top","bottom","left","right","top left","top right","bottom left","bottom right","left top","right top","left bottom","right bottom"].indexOf(t)>=0||/^-?\d+% -?\d+%$/.test(t)}}},n={INIT_EVENT:"init",FILE_CHOOSE_EVENT:"file-choose",FILE_SIZE_EXCEED_EVENT:"file-size-exceed",FILE_TYPE_MISMATCH_EVENT:"file-type-mismatch",NEW_IMAGE:"new-image",IMAGE_REMOVE_EVENT:"image-remove",MOVE_EVENT:"move",ZOOM_EVENT:"zoom",DRAW:"draw"},o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},r={render:function(){var t=this,i=t.$createElement,e=t._self._c||i;return e("div",{ref:"wrapper",class:"croppa-container "+(t.img?"croppa--has-target":"")+" "+(t.disabled?"croppa--disabled":"")+" "+(t.disableClickToChoose?"croppa--disabled-cc":"")+" "+(t.disableDragToMove&&t.disableScrollToZoom?"croppa--disabled-mz":"")+" "+(t.fileDraggedOver?"croppa--dropzone":""),on:{dragenter:function(i){i.stopPropagation(),i.preventDefault(),t.handleDragEnter(i)},dragleave:function(i){i.stopPropagation(),i.preventDefault(),t.handleDragLeave(i)},dragover:function(i){i.stopPropagation(),i.preventDefault(),t.handleDragOver(i)},drop:function(i){i.stopPropagation(),i.preventDefault(),t.handleDrop(i)}}},[e("input",{ref:"fileInput",attrs:{type:"file",accept:t.accept,disabled:t.disabled,hidden:""},on:{change:t.handleInputChange}}),e("div",{staticClass:"slots",staticStyle:{width:"0",height:"0",visibility:"hidden"}},[t._t("initial"),t._t("placeholder")],2),e("canvas",{ref:"canvas",on:{click:function(i){i.stopPropagation(),i.preventDefault(),t.handleClick(i)},touchstart:function(i){i.stopPropagation(),t.handlePointerStart(i)},mousedown:function(i){i.stopPropagation(),i.preventDefault(),t.handlePointerStart(i)},pointerstart:function(i){i.stopPropagation(),i.preventDefault(),t.handlePointerStart(i)},touchend:function(i){i.stopPropagation(),i.preventDefault(),t.handlePointerEnd(i)},touchcancel:function(i){i.stopPropagation(),i.preventDefault(),t.handlePointerEnd(i)},mouseup:function(i){i.stopPropagation(),i.preventDefault(),t.handlePointerEnd(i)},pointerend:function(i){i.stopPropagation(),i.preventDefault(),t.handlePointerEnd(i)},pointercancel:function(i){i.stopPropagation(),i.preventDefault(),t.handlePointerEnd(i)},touchmove:function(i){i.stopPropagation(),t.handlePointerMove(i)},mousemove:function(i){i.stopPropagation(),i.preventDefault(),t.handlePointerMove(i)},pointermove:function(i){i.stopPropagation(),i.preventDefault(),t.handlePointerMove(i)},DOMMouseScroll:function(i){i.stopPropagation(),t.handleWheel(i)},wheel:function(i){i.stopPropagation(),t.handleWheel(i)},mousewheel:function(i){i.stopPropagation(),t.handleWheel(i)}}}),t.showRemoveButton&&t.img?e("svg",{staticClass:"icon icon-remove",style:"top: -"+t.height/40+"px; right: -"+t.width/40+"px",attrs:{viewBox:"0 0 1024 1024",version:"1.1",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink",width:t.removeButtonSize||t.width/10,height:t.removeButtonSize||t.width/10},on:{click:t.remove}},[e("path",{attrs:{d:"M511.921231 0C229.179077 0 0 229.257846 0 512 0 794.702769 229.179077 1024 511.921231 1024 794.781538 1024 1024 794.702769 1024 512 1024 229.257846 794.781538 0 511.921231 0ZM732.041846 650.633846 650.515692 732.081231C650.515692 732.081231 521.491692 593.683692 511.881846 593.683692 502.429538 593.683692 373.366154 732.081231 373.366154 732.081231L291.761231 650.633846C291.761231 650.633846 430.316308 523.500308 430.316308 512.196923 430.316308 500.696615 291.761231 373.523692 291.761231 373.523692L373.366154 291.918769C373.366154 291.918769 503.453538 430.395077 511.881846 430.395077 520.349538 430.395077 650.515692 291.918769 650.515692 291.918769L732.041846 373.523692C732.041846 373.523692 593.447385 502.547692 593.447385 512.196923 593.447385 521.412923 732.041846 650.633846 732.041846 650.633846Z",fill:t.removeButtonColor}})]):t._e()])},staticRenderFns:[],model:{prop:"value",event:"init"},props:a,data:function(){return{instance:null,canvas:null,ctx:null,originalImage:null,img:null,dragging:!1,lastMovingCoord:null,imgData:{},dataUrl:"",fileDraggedOver:!1,tabStart:0,pinching:!1,pinchDistance:0,supportTouch:!1,pointerMoved:!1,pointerStartCoord:null,naturalWidth:0,naturalHeight:0,scaleRatio:1,orientation:1,userMetadata:null}},computed:{realWidth:function(){return this.width*this.quality},realHeight:function(){return this.height*this.quality},realPlaceholderFontSize:function(){return this.placeholderFontSize*this.quality}},mounted:function(){this.init(),e.rAFPolyfill(),e.toBlobPolyfill(),this.supportDetection().basic||console.warn("Your browser does not support vue-croppa functionality.")},watch:{value:function(t){this.instance=t},realWidth:function(){this.img?(this.setSize(),this.imgContentInit()):this.init()},realHeight:function(){this.img?(this.setSize(),this.imgContentInit()):this.init()},canvasColor:function(){this.img?this.draw():this.init()},placeholder:function(){this.img||this.init()},placeholderColor:function(){this.img||this.init()},realPlaceholderFontSize:function(){this.img||this.init()},preventWhiteSpace:function(){this.imgContentInit()}},methods:{init:function(){var t=this;this.canvas=this.$refs.canvas,this.setSize(),this.canvas.style.backgroundColor=this.canvasColor&&"default"!=this.canvasColor?"string"==typeof this.canvasColor?this.canvasColor:"":"transparent",this.ctx=this.canvas.getContext("2d"),this.originalImage=null,this.img=null,this.setInitial(),this.$emit(n.INIT_EVENT,{getCanvas:function(){return t.canvas},getContext:function(){return t.ctx},getChosenFile:function(){return t.$refs.fileInput.files[0]},getActualImageSize:function(){return{width:t.realWidth,height:t.realHeight}},moveUpwards:function(i){t.move({x:0,y:-i})},moveDownwards:function(i){t.move({x:0,y:i})},moveLeftwards:function(i){t.move({x:-i,y:0})},moveRightwards:function(i){t.move({x:i,y:0})},zoomIn:function(){t.zoom(!0)},zoomOut:function(){t.zoom(!1)},rotate:function(){var i=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1;t.disableRotation||t.disabled||(i=parseInt(i),(isNaN(i)||i>3||i<-3)&&(console.warn("Invalid argument for rotate() method. It should one of the integers from -3 to 3."),i=1),t.rotateByStep(i))},flipX:function(){t.disableRotation||t.disabled||t.rotate(2)},flipY:function(){t.disableRotation||t.disabled||t.rotate(4)},refresh:function(){t.$nextTick(t.init)},hasImage:function(){return!!t.img},remove:this.remove,chooseFile:this.chooseFile,generateDataUrl:this.generateDataUrl,generateBlob:this.generateBlob,promisedBlob:this.promisedBlob,supportDetection:this.supportDetection,getMetadata:this.getMetadata,applyMetadata:function(i){i&&t.img&&(t.userMetadata=i,t.rotate(i.orientation||t.orientation,!0))}})},setSize:function(){this.canvas.width=this.realWidth,this.canvas.height=this.realHeight,this.canvas.style.width=this.width+"px",this.canvas.style.height=this.height+"px"},rotateByStep:function(t){var i=1;switch(t){case 1:i=6;break;case 2:i=3;break;case 3:case-1:i=8;break;case-2:i=3;break;case-3:i=6}this.rotate(i)},supportDetection:function(){var t=document.createElement("div");return{basic:window.requestAnimationFrame&&window.File&&window.FileReader&&window.FileList&&window.Blob,dnd:"ondragstart"in t&&"ondrop"in t}},remove:function(){var t=this.ctx;this.paintBackground(),this.setImagePlaceholder(),t.textBaseline="middle",t.textAlign="center";var i=this.realWidth*(2/3)/this.placeholder.length,e=this.realPlaceholderFontSize&&0!=this.realPlaceholderFontSize?this.realPlaceholderFontSize:i;t.font=e+"px sans-serif",t.fillStyle=this.placeholderColor&&"default"!=this.placeholderColor?this.placeholderColor:"#606060",t.fillText(this.placeholder,this.realWidth/2,this.realHeight/2);var a=null!=this.img;this.originalImage=null,this.img=null,this.$refs.fileInput.value="",this.imgData={},this.orientation=1,this.userMetadata=null,a&&this.$emit(n.IMAGE_REMOVE_EVENT)},setImagePlaceholder:function(){var t=this,i=void 0;if(this.$slots.placeholder&&this.$slots.placeholder[0]){var a=this.$slots.placeholder[0],n=a.tag,o=a.elm;"img"==n&&o&&(i=o)}if(i){var r=function(){t.ctx.drawImage(i,0,0,t.realWidth,t.realHeight)};e.imageLoaded(i)?r():i.onload=r}},setInitial:function(){var t=this,i=void 0,a=void 0;if(this.$slots.initial&&this.$slots.initial[0]){var n=this.$slots.initial[0],r=n.tag,s=n.elm;"img"==r&&s&&(a=s)}this.initialImage&&"string"==typeof this.initialImage?(i=this.initialImage,a=new Image,/^data:/.test(i)||/^blob:/.test(i)||a.setAttribute("crossOrigin","anonymous"),a.src=i):"object"===o(this.initialImage)&&this.initialImage instanceof Image&&(a=this.initialImage),i||a?e.imageLoaded(a)?this._onload(a,+a.dataset.exifOrientation):(a.onload=function(){t._onload(a,+a.dataset.exifOrientation)},a.onerror=function(){t.remove()}):this.remove()},_onload:function(t){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1;this.originalImage=t,this.img=t,this.rotate(i)},chooseFile:function(){this.$refs.fileInput.click()},handleClick:function(){this.img||this.disableClickToChoose||this.disabled||this.supportTouch||this.chooseFile()},handleInputChange:function(){var t=this.$refs.fileInput;if(t.files.length){var i=t.files[0];this.onNewFileIn(i)}},onNewFileIn:function(t){var i=this;if(this.$emit(n.FILE_CHOOSE_EVENT,t),!this.fileSizeIsValid(t))throw this.$emit(n.FILE_SIZE_EXCEED_EVENT,t),new Error("File size exceeds limit which is "+this.fileSizeLimit+" bytes.");if(!this.fileTypeIsValid(t)){this.$emit(n.FILE_TYPE_MISMATCH_EVENT,t);var a=t.type||t.name.toLowerCase().split(".").pop();throw new Error("File type ("+a+") does not match what you specified ("+this.accept+").")}if(void 0!==window.FileReader){var o=new FileReader;o.onload=function(t){var a=t.target.result,o=e.getFileOrientation(e.base64ToArrayBuffer(a));o<1&&(o=1);var r=new Image;r.src=a,r.onload=function(){i._onload(r,o),i.$emit(n.NEW_IMAGE)}},o.readAsDataURL(t)}},fileSizeIsValid:function(t){return!!t&&(!this.fileSizeLimit||0==this.fileSizeLimit||t.size<this.fileSizeLimit)},fileTypeIsValid:function(t){for(var i=this.accept||"image/*",e=i.replace(/\/.*$/,""),a=i.split(","),n=0,o=a.length;n<o;n++){var r=a[n],s=r.trim();if("."==s.charAt(0)){if(t.name.toLowerCase().split(".").pop()===s.toLowerCase().slice(1))return!0}else if(/\/\*$/.test(s)){if(t.type.replace(/\/.*$/,"")===e)return!0}else if(t.type===r)return!0}return!1},imgContentInit:function(){if(this.naturalWidth=this.img.naturalWidth,this.naturalHeight=this.img.naturalHeight,this.imgData.startX=0,this.imgData.startY=0,this.preventWhiteSpace||"contain"!=this.initialSize?this.preventWhiteSpace||"natural"!=this.initialSize?this.aspectFill():this.naturalSize():this.aspectFit(),this.scaleRatio=this.imgData.width/this.naturalWidth,/top/.test(this.initialPosition)?this.imgData.startY=0:/bottom/.test(this.initialPosition)&&(this.imgData.startY=this.realHeight-this.imgData.height),/left/.test(this.initialPosition)?this.imgData.startX=0:/right/.test(this.initialPosition)&&(this.imgData.startX=this.realWidth-this.imgData.width),/^-?\d+% -?\d+%$/.test(this.initialPosition)){var t=/^(-?\d+)% (-?\d+)%$/.exec(this.initialPosition),i=+t[1]/100,e=+t[2]/100;this.imgData.startX=i*(this.realWidth-this.imgData.width),this.imgData.startY=e*(this.realHeight-this.imgData.height)}this.applyMetadata(),this.preventWhiteSpace&&this.preventMovingToWhiteSpace(),this.draw()},aspectFill:function(){var t=this.naturalWidth,i=this.naturalHeight,e=void 0;i/t<this.realHeight/this.realWidth?(e=i/this.realHeight,this.imgData.width=t/e,this.imgData.height=this.realHeight,this.imgData.startX=-(this.imgData.width-this.realWidth)/2):(e=t/this.realWidth,this.imgData.height=i/e,this.imgData.width=this.realWidth,this.imgData.startY=-(this.imgData.height-this.realHeight)/2)},aspectFit:function(){var t=this.naturalWidth,i=this.naturalHeight,e=void 0;i/t<this.realHeight/this.realWidth?(e=t/this.realWidth,this.imgData.height=i/e,this.imgData.width=this.realWidth,this.imgData.startY=-(this.imgData.height-this.realHeight)/2):(e=i/this.realHeight,this.imgData.width=t/e,this.imgData.height=this.realHeight,this.imgData.startX=-(this.imgData.width-this.realWidth)/2)},naturalSize:function(){var t=this.naturalWidth,i=this.naturalHeight;this.imgData.width=t,this.imgData.height=i,this.imgData.startX=-(this.imgData.width-this.realWidth)/2,this.imgData.startY=-(this.imgData.height-this.realHeight)/2},handlePointerStart:function(t){this.supportTouch=!0,this.pointerMoved=!1;var i=e.getPointerCoords(t,this);if(this.pointerStartCoord=i,!this.disabled)if(this.img||this.disableClickToChoose){if(!(t.which&&t.which>1)){if(!t.touches||1===t.touches.length){this.dragging=!0,this.pinching=!1;var a=e.getPointerCoords(t,this);this.lastMovingCoord=a}t.touches&&2===t.touches.length&&!this.disablePinchToZoom&&(this.dragging=!1,this.pinching=!0,this.pinchDistance=e.getPinchDistance(t,this));for(var n=["mouseup","touchend","touchcancel","pointerend","pointercancel"],o=0,r=n.length;o<r;o++){var s=n[o];document.addEventListener(s,this.handlePointerEnd)}}}else this.tabStart=(new Date).valueOf()},handlePointerEnd:function(t){var i=0;if(this.pointerStartCoord){var a=e.getPointerCoords(t,this);i=Math.sqrt(Math.pow(a.x-this.pointerStartCoord.x,2)+Math.pow(a.y-this.pointerStartCoord.y,2))||0}if(!this.disabled){if(!this.img&&!this.disableClickToChoose){var n=(new Date).valueOf();return i<100&&n-this.tabStart<500&&this.supportTouch&&this.chooseFile(),void(this.tabStart=0)}this.dragging=!1,this.pinching=!1,this.pinchDistance=0,this.lastMovingCoord=null,this.pointerMoved=!1,this.pointerStartCoord=null}},handlePointerMove:function(t){if(this.pointerMoved=!0,!this.disabled&&!this.disableDragToMove&&this.img){if(t.preventDefault(),!t.touches||1===t.touches.length){if(!this.dragging)return;var i=e.getPointerCoords(t,this);this.lastMovingCoord&&this.move({x:i.x-this.lastMovingCoord.x,y:i.y-this.lastMovingCoord.y}),this.lastMovingCoord=i}if(t.touches&&2===t.touches.length&&!this.disablePinchToZoom){if(!this.pinching)return;var a=e.getPinchDistance(t,this),n=a-this.pinchDistance;this.zoom(n>0,null,2),this.pinchDistance=a}}},handleWheel:function(t){if(!this.disabled&&!this.disableScrollToZoom&&this.img){t.preventDefault();var i=e.getPointerCoords(t,this);t.wheelDelta<0||t.deltaY>0||t.detail>0?this.zoom(this.reverseScrollToZoom,i):(t.wheelDelta>0||t.deltaY<0||t.detail<0)&&this.zoom(!this.reverseScrollToZoom,i)}},handleDragEnter:function(t){this.disabled||this.disableDragAndDrop||this.img||!e.eventHasFile(t)||(this.fileDraggedOver=!0)},handleDragLeave:function(t){this.fileDraggedOver&&e.eventHasFile(t)&&(this.fileDraggedOver=!1)},handleDragOver:function(t){},handleDrop:function(t){if(this.fileDraggedOver&&e.eventHasFile(t)){this.fileDraggedOver=!1;var i=void 0,a=t.dataTransfer;if(a){if(a.items)for(var n=0,o=a.items.length;n<o;n++){var r=a.items[n];if("file"==r.kind){i=r.getAsFile();break}}else i=a.files[0];i&&this.onNewFileIn(i)}}},move:function(t){if(t){var i=this.imgData.startX,e=this.imgData.startY;this.imgData.startX+=t.x,this.imgData.startY+=t.y,this.preventWhiteSpace&&this.preventMovingToWhiteSpace(),this.imgData.startX===i&&this.imgData.startY===e||(this.$emit(n.MOVE_EVENT),this.draw())}},preventMovingToWhiteSpace:function(){this.imgData.startX>0&&(this.imgData.startX=0),this.imgData.startY>0&&(this.imgData.startY=0),this.realWidth-this.imgData.startX>this.imgData.width&&(this.imgData.startX=-(this.imgData.width-this.realWidth)),this.realHeight-this.imgData.startY>this.imgData.height&&(this.imgData.startY=-(this.imgData.height-this.realHeight))},zoom:function(t,i){var e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:1;i=i||{x:this.imgData.startX+this.imgData.width/2,y:this.imgData.startY+this.imgData.height/2};var a=this.zoomSpeed*e,o=1e-5*this.realWidth*a,r=1;t?r=1+o:this.imgData.width>10&&(r=1-o);var s=this.imgData.width,h=this.imgData.height;if(this.imgData.width=this.imgData.width*r,this.imgData.height=this.imgData.height*r,this.preventWhiteSpace){if(this.imgData.width<this.realWidth){var l=this.realWidth/this.imgData.width;this.imgData.width=this.realWidth,this.imgData.height=this.imgData.height*l}if(this.imgData.height<this.realHeight){var d=this.realHeight/this.imgData.height;this.imgData.height=this.realHeight,this.imgData.width=this.imgData.width*d}}if(s.toFixed(2)!==this.imgData.width.toFixed(2)||h.toFixed(2)!==this.imgData.height.toFixed(2)){var c=(r-1)*(i.x-this.imgData.startX),g=(r-1)*(i.y-this.imgData.startY);this.imgData.startX=this.imgData.startX-c,this.imgData.startY=this.imgData.startY-g,this.preventWhiteSpace&&this.preventMovingToWhiteSpace(),this.$emit(n.ZOOM_EVENT),this.draw(),this.scaleRatio=this.imgData.width/this.naturalWidth}},rotate:function(){var t=this,i=arguments.length>0&&void 0!==arguments[0]?arguments[0]:6,a=arguments[1];if(this.img){if(i>1){var n=e.getRotatedImage(a?this.originalImage:this.img,i);n.onload=function(){t.img=n,t.imgContentInit()}}else this.imgContentInit();this.orientation=2==i?e.flipX(this.orientation):4==i?e.flipY(this.orientation):6==i?e.rotate90(this.orientation):3==i?e.rotate90(e.rotate90(this.orientation)):8==i?e.rotate90(e.rotate90(e.rotate90(this.orientation))):i,a&&(this.orientation=i)}},paintBackground:function(){var t=this.canvasColor&&"default"!=this.canvasColor?this.canvasColor:"transparent";this.ctx.fillStyle=t,this.ctx.clearRect(0,0,this.realWidth,this.realHeight),this.ctx.fillRect(0,0,this.realWidth,this.realHeight)},draw:function(){this.img&&(window.requestAnimationFrame?requestAnimationFrame(this._drawFrame):this._drawFrame())},_drawFrame:function(){var t=this.ctx,i=this.imgData,e=i.startX,a=i.startY,o=i.width,r=i.height;this.paintBackground(),t.drawImage(this.img,e,a,o,r),this.$emit(n.DRAW,t)},generateDataUrl:function(t,i){return this.img?this.canvas.toDataURL(t,i):""},generateBlob:function(t,i,e){if(!this.img)return null;this.canvas.toBlob(t,i,e)},promisedBlob:function(){for(var t=this,i=arguments.length,e=Array(i),a=0;a<i;a++)e[a]=arguments[a];if("undefined"!=typeof Promise)return new Promise(function(i,a){try{t.generateBlob(function(t){i(t)},e)}catch(t){a(t)}});console.warn("No Promise support. Please add Promise polyfill if you want to use this method.")},getMetadata:function(){if(!this.img)return{};var t=this.imgData;return{startX:t.startX,startY:t.startY,scale:this.scaleRatio,orientation:this.orientation}},applyMetadata:function(){if(this.userMetadata){var t=this.userMetadata,i=t.startX,e=t.startY,a=t.scale;i=+i,e=+e,a=+a,isNaN(i)||(this.imgData.startX=i),isNaN(e)||(this.imgData.startY=e),isNaN(a)||(this.imgData.width=this.naturalWidth*a,this.imgData.height=this.naturalHeight*a,this.scaleRatio=a)}}}},s=Object.getOwnPropertySymbols,h=Object.prototype.hasOwnProperty,l=Object.prototype.propertyIsEnumerable,d=function(){try{if(!Object.assign)return!1;var t=new String("abc");if(t[5]="de","5"===Object.getOwnPropertyNames(t)[0])return!1;for(var i={},e=0;e<10;e++)i["_"+String.fromCharCode(e)]=e;if("0123456789"!==Object.getOwnPropertyNames(i).map(function(t){return i[t]}).join(""))return!1;var a={};return"abcdefghijklmnopqrst".split("").forEach(function(t){a[t]=t}),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},a)).join("")}catch(t){return!1}}()?Object.assign:function(i,e){for(var a,n,o=t(i),r=1;r<arguments.length;r++){a=Object(arguments[r]);for(var d in a)h.call(a,d)&&(o[d]=a[d]);if(s){n=s(a);for(var c=0;c<n.length;c++)l.call(a,n[c])&&(o[n[c]]=a[n[c]])}}return o},c={componentName:"croppa"};return{install:function(t,i){i=d({},c,i);var e=Number(t.version.split(".")[0]);if(e<2)throw new Error("vue-croppa supports vue version 2.0 and above. You are using Vue@"+e+". Please upgrade to the latest version of Vue.");var a=i.componentName||"croppa";t.component(a,r)},component:r}}); | ||
| !function(t,i){"object"==typeof exports&&"undefined"!=typeof module?module.exports=i():"function"==typeof define&&define.amd?define(i):t.Croppa=i()}(this,function(){"use strict";function t(t){if(null===t||void 0===t)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(t)}"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self&&self;var i=function(t,i){return i={exports:{}},t(i,i.exports),i.exports}(function(t,i){!function(i,e){t.exports=e()}(0,function(){function t(t,i,e,a,n,o){if(!/^[1-8]$/.test(i))throw new Error("orientation should be [1-8]");null==e&&(e=0),null==a&&(a=0),null==n&&(n=t.width),null==o&&(o=t.height);var r=document.createElement("canvas"),s=r.getContext("2d");switch(r.width=n,r.height=o,s.save(),+i){case 1:break;case 2:s.translate(n,0),s.scale(-1,1);break;case 3:s.translate(n,o),s.rotate(1*Math.PI);break;case 4:s.translate(0,o),s.scale(1,-1);break;case 5:r.width=o,r.height=n,s.rotate(.5*Math.PI),s.scale(1,-1);break;case 6:r.width=o,r.height=n,s.rotate(.5*Math.PI),s.translate(0,-o);break;case 7:r.width=o,r.height=n,s.rotate(1.5*Math.PI),s.translate(-n,o),s.scale(1,-1);break;case 8:r.width=o,r.height=n,s.translate(0,n),s.rotate(1.5*Math.PI)}return s.drawImage(t,e,a,n,o),s.restore(),r}return{drawImage:t}})}),e={onePointCoord:function(t,i){var e=i.canvas,a=i.quality,n=e.getBoundingClientRect(),o=t.clientX,r=t.clientY;return{x:(o-n.left)*a,y:(r-n.top)*a}},getPointerCoords:function(t,i){var e=void 0;return e=t.touches&&t.touches[0]?t.touches[0]:t.changedTouches&&t.changedTouches[0]?t.changedTouches[0]:t,this.onePointCoord(e,i)},getPinchDistance:function(t,i){var e=t.touches[0],a=t.touches[1],n=this.onePointCoord(e,i),o=this.onePointCoord(a,i);return Math.sqrt(Math.pow(n.x-o.x,2)+Math.pow(n.y-o.y,2))},getPinchCenterCoord:function(t,i){var e=t.touches[0],a=t.touches[1],n=this.onePointCoord(e,i),o=this.onePointCoord(a,i);return{x:(n.x+o.x)/2,y:(n.y+o.y)/2}},imageLoaded:function(t){return t.complete&&0!==t.naturalWidth},rAFPolyfill:function(){if("undefined"!=typeof document&&"undefined"!=typeof window){for(var t=0,i=["webkit","moz"],e=0;e<i.length&&!window.requestAnimationFrame;++e)window.requestAnimationFrame=window[i[e]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[i[e]+"CancelAnimationFrame"]||window[i[e]+"CancelRequestAnimationFrame"];window.requestAnimationFrame||(window.requestAnimationFrame=function(i){var e=(new Date).getTime(),a=Math.max(0,16.7-(e-t)),n=window.setTimeout(function(){i(e+a)},a);return t=e+a,n}),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(t){clearTimeout(t)}),Array.isArray=function(t){return"[object Array]"===Object.prototype.toString.call(t)}}},toBlobPolyfill:function(){if("undefined"!=typeof document&&"undefined"!=typeof window&&HTMLCanvasElement){var t,i,e;HTMLCanvasElement.prototype.toBlob||Object.defineProperty(HTMLCanvasElement.prototype,"toBlob",{value:function(a,n,o){t=atob(this.toDataURL(n,o).split(",")[1]),i=t.length,e=new Uint8Array(i);for(var r=0;r<i;r++)e[r]=t.charCodeAt(r);a(new Blob([e],{type:n||"image/png"}))}})}},eventHasFile:function(t){var i=t.dataTransfer||t.originalEvent.dataTransfer;if(i.types)for(var e=0,a=i.types.length;e<a;e++)if("Files"==i.types[e])return!0;return!1},getFileOrientation:function(t){var i=new DataView(t);if(65496!=i.getUint16(0,!1))return-2;for(var e=i.byteLength,a=2;a<e;){var n=i.getUint16(a,!1);if(a+=2,65505==n){if(1165519206!=i.getUint32(a+=2,!1))return-1;var o=18761==i.getUint16(a+=6,!1);a+=i.getUint32(a+4,o);var r=i.getUint16(a,o);a+=2;for(var s=0;s<r;s++)if(274==i.getUint16(a+12*s,o))return i.getUint16(a+12*s+8,o)}else{if(65280!=(65280&n))break;a+=i.getUint16(a,!1)}}return-1},base64ToArrayBuffer:function(t){t=t.replace(/^data:([^;]+);base64,/gim,"");for(var i=atob(t),e=i.length,a=new Uint8Array(e),n=0;n<e;n++)a[n]=i.charCodeAt(n);return a.buffer},getRotatedImage:function(t,e){var a=i.drawImage(t,e),n=new Image;return n.src=a.toDataURL(),n},flipX:function(t){return t%2==0?t-1:t+1},flipY:function(t){return{1:4,4:1,2:3,3:2,5:8,8:5,6:7,7:6}[t]},rotate90:function(t){return{1:6,2:7,3:8,4:5,5:2,6:3,7:4,8:1}[t]}};Number.isInteger=Number.isInteger||function(t){return"number"==typeof t&&isFinite(t)&&Math.floor(t)===t};var a={value:Object,width:{type:Number,default:200,validator:function(t){return t>0}},height:{type:Number,default:200,validator:function(t){return t>0}},placeholder:{type:String,default:"Choose an image"},placeholderColor:{default:"#606060"},placeholderFontSize:{type:Number,default:0,validator:function(t){return t>=0}},canvasColor:{default:"transparent"},quality:{type:Number,default:2,validator:function(t){return Number.isInteger(t)&&t>0}},zoomSpeed:{default:3,type:Number,validator:function(t){return t>0}},accept:{type:String,default:".jpg,.jpeg,.png,.gif,.bmp,.webp,.svg,.tiff"},fileSizeLimit:{type:Number,default:0,validator:function(t){return t>=0}},disabled:Boolean,disableDragAndDrop:Boolean,disableClickToChoose:Boolean,disableDragToMove:Boolean,disableScrollToZoom:Boolean,disablePinchToZoom:Boolean,disableRotation:Boolean,reverseScrollToZoom:Boolean,preventWhiteSpace:Boolean,showRemoveButton:{type:Boolean,default:!0},removeButtonColor:{type:String,default:"red"},removeButtonSize:{type:Number},initialImage:[String,HTMLImageElement],initialSize:{type:String,default:"cover",validator:function(t){return"cover"===t||"contain"===t||"natural"===t}},initialPosition:{type:String,default:"center",validator:function(t){return["center","top","bottom","left","right","top left","top right","bottom left","bottom right","left top","right top","left bottom","right bottom"].indexOf(t)>=0||/^-?\d+% -?\d+%$/.test(t)}}},n={INIT_EVENT:"init",FILE_CHOOSE_EVENT:"file-choose",FILE_SIZE_EXCEED_EVENT:"file-size-exceed",FILE_TYPE_MISMATCH_EVENT:"file-type-mismatch",NEW_IMAGE:"new-image",IMAGE_REMOVE_EVENT:"image-remove",MOVE_EVENT:"move",ZOOM_EVENT:"zoom",DRAW:"draw",INITIAL_IMAGE_LOADED_EVENT:"initial-image-loaded"},o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},r={render:function(){var t=this,i=t.$createElement,e=t._self._c||i;return e("div",{ref:"wrapper",class:"croppa-container "+(t.img?"croppa--has-target":"")+" "+(t.disabled?"croppa--disabled":"")+" "+(t.disableClickToChoose?"croppa--disabled-cc":"")+" "+(t.disableDragToMove&&t.disableScrollToZoom?"croppa--disabled-mz":"")+" "+(t.fileDraggedOver?"croppa--dropzone":""),on:{dragenter:function(i){i.stopPropagation(),i.preventDefault(),t.handleDragEnter(i)},dragleave:function(i){i.stopPropagation(),i.preventDefault(),t.handleDragLeave(i)},dragover:function(i){i.stopPropagation(),i.preventDefault(),t.handleDragOver(i)},drop:function(i){i.stopPropagation(),i.preventDefault(),t.handleDrop(i)}}},[e("input",{ref:"fileInput",attrs:{type:"file",accept:t.accept,disabled:t.disabled,hidden:""},on:{change:t.handleInputChange}}),e("div",{staticClass:"slots",staticStyle:{width:"0",height:"0",visibility:"hidden"}},[t._t("initial"),t._t("placeholder")],2),e("canvas",{ref:"canvas",on:{click:function(i){i.stopPropagation(),i.preventDefault(),t.handleClick(i)},touchstart:function(i){i.stopPropagation(),t.handlePointerStart(i)},mousedown:function(i){i.stopPropagation(),i.preventDefault(),t.handlePointerStart(i)},pointerstart:function(i){i.stopPropagation(),i.preventDefault(),t.handlePointerStart(i)},touchend:function(i){i.stopPropagation(),i.preventDefault(),t.handlePointerEnd(i)},touchcancel:function(i){i.stopPropagation(),i.preventDefault(),t.handlePointerEnd(i)},mouseup:function(i){i.stopPropagation(),i.preventDefault(),t.handlePointerEnd(i)},pointerend:function(i){i.stopPropagation(),i.preventDefault(),t.handlePointerEnd(i)},pointercancel:function(i){i.stopPropagation(),i.preventDefault(),t.handlePointerEnd(i)},touchmove:function(i){i.stopPropagation(),t.handlePointerMove(i)},mousemove:function(i){i.stopPropagation(),i.preventDefault(),t.handlePointerMove(i)},pointermove:function(i){i.stopPropagation(),i.preventDefault(),t.handlePointerMove(i)},DOMMouseScroll:function(i){i.stopPropagation(),t.handleWheel(i)},wheel:function(i){i.stopPropagation(),t.handleWheel(i)},mousewheel:function(i){i.stopPropagation(),t.handleWheel(i)}}}),t.showRemoveButton&&t.img?e("svg",{staticClass:"icon icon-remove",style:"top: -"+t.height/40+"px; right: -"+t.width/40+"px",attrs:{viewBox:"0 0 1024 1024",version:"1.1",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink",width:t.removeButtonSize||t.width/10,height:t.removeButtonSize||t.width/10},on:{click:t.remove}},[e("path",{attrs:{d:"M511.921231 0C229.179077 0 0 229.257846 0 512 0 794.702769 229.179077 1024 511.921231 1024 794.781538 1024 1024 794.702769 1024 512 1024 229.257846 794.781538 0 511.921231 0ZM732.041846 650.633846 650.515692 732.081231C650.515692 732.081231 521.491692 593.683692 511.881846 593.683692 502.429538 593.683692 373.366154 732.081231 373.366154 732.081231L291.761231 650.633846C291.761231 650.633846 430.316308 523.500308 430.316308 512.196923 430.316308 500.696615 291.761231 373.523692 291.761231 373.523692L373.366154 291.918769C373.366154 291.918769 503.453538 430.395077 511.881846 430.395077 520.349538 430.395077 650.515692 291.918769 650.515692 291.918769L732.041846 373.523692C732.041846 373.523692 593.447385 502.547692 593.447385 512.196923 593.447385 521.412923 732.041846 650.633846 732.041846 650.633846Z",fill:t.removeButtonColor}})]):t._e()])},staticRenderFns:[],model:{prop:"value",event:"init"},props:a,data:function(){return{instance:null,canvas:null,ctx:null,originalImage:null,img:null,dragging:!1,lastMovingCoord:null,imgData:{},dataUrl:"",fileDraggedOver:!1,tabStart:0,pinching:!1,pinchDistance:0,supportTouch:!1,pointerMoved:!1,pointerStartCoord:null,naturalWidth:0,naturalHeight:0,scaleRatio:1,orientation:1,userMetadata:null}},computed:{realWidth:function(){return this.width*this.quality},realHeight:function(){return this.height*this.quality},realPlaceholderFontSize:function(){return this.placeholderFontSize*this.quality}},mounted:function(){this.init(),e.rAFPolyfill(),e.toBlobPolyfill(),this.supportDetection().basic||console.warn("Your browser does not support vue-croppa functionality.")},watch:{value:function(t){this.instance=t},realWidth:function(){this.img?(this.setSize(),this.imgContentInit()):this.init()},realHeight:function(){this.img?(this.setSize(),this.imgContentInit()):this.init()},canvasColor:function(){this.img?this.draw():this.init()},placeholder:function(){this.img||this.init()},placeholderColor:function(){this.img||this.init()},realPlaceholderFontSize:function(){this.img||this.init()},preventWhiteSpace:function(){this.imgContentInit()}},methods:{init:function(){var t=this;this.canvas=this.$refs.canvas,this.setSize(),this.canvas.style.backgroundColor=this.canvasColor&&"default"!=this.canvasColor?"string"==typeof this.canvasColor?this.canvasColor:"":"transparent",this.ctx=this.canvas.getContext("2d"),this.originalImage=null,this.img=null,this.setInitial(),this.$emit(n.INIT_EVENT,{getCanvas:function(){return t.canvas},getContext:function(){return t.ctx},getChosenFile:function(){return t.$refs.fileInput.files[0]},getActualImageSize:function(){return{width:t.realWidth,height:t.realHeight}},moveUpwards:function(i){t.move({x:0,y:-i})},moveDownwards:function(i){t.move({x:0,y:i})},moveLeftwards:function(i){t.move({x:-i,y:0})},moveRightwards:function(i){t.move({x:i,y:0})},zoomIn:function(){t.zoom(!0)},zoomOut:function(){t.zoom(!1)},rotate:function(){var i=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1;t.disableRotation||t.disabled||(i=parseInt(i),(isNaN(i)||i>3||i<-3)&&(console.warn("Invalid argument for rotate() method. It should one of the integers from -3 to 3."),i=1),t.rotateByStep(i))},flipX:function(){t.disableRotation||t.disabled||t.rotate(2)},flipY:function(){t.disableRotation||t.disabled||t.rotate(4)},refresh:function(){t.$nextTick(t.init)},hasImage:function(){return!!t.img},remove:this.remove,chooseFile:this.chooseFile,generateDataUrl:this.generateDataUrl,generateBlob:this.generateBlob,promisedBlob:this.promisedBlob,supportDetection:this.supportDetection,getMetadata:this.getMetadata,applyMetadata:function(i){i&&t.img&&(t.userMetadata=i,t.rotate(i.orientation||t.orientation,!0))}})},setSize:function(){this.canvas.width=this.realWidth,this.canvas.height=this.realHeight,this.canvas.style.width=this.width+"px",this.canvas.style.height=this.height+"px"},rotateByStep:function(t){var i=1;switch(t){case 1:i=6;break;case 2:i=3;break;case 3:case-1:i=8;break;case-2:i=3;break;case-3:i=6}this.rotate(i)},supportDetection:function(){var t=document.createElement("div");return{basic:window.requestAnimationFrame&&window.File&&window.FileReader&&window.FileList&&window.Blob,dnd:"ondragstart"in t&&"ondrop"in t}},remove:function(){var t=this.ctx;this.paintBackground(),this.setImagePlaceholder(),t.textBaseline="middle",t.textAlign="center";var i=this.realWidth*(2/3)/this.placeholder.length,e=this.realPlaceholderFontSize&&0!=this.realPlaceholderFontSize?this.realPlaceholderFontSize:i;t.font=e+"px sans-serif",t.fillStyle=this.placeholderColor&&"default"!=this.placeholderColor?this.placeholderColor:"#606060",t.fillText(this.placeholder,this.realWidth/2,this.realHeight/2);var a=null!=this.img;this.originalImage=null,this.img=null,this.$refs.fileInput.value="",this.imgData={},this.orientation=1,this.userMetadata=null,a&&this.$emit(n.IMAGE_REMOVE_EVENT)},setImagePlaceholder:function(){var t=this,i=void 0;if(this.$slots.placeholder&&this.$slots.placeholder[0]){var a=this.$slots.placeholder[0],n=a.tag,o=a.elm;"img"==n&&o&&(i=o)}if(i){var r=function(){t.ctx.drawImage(i,0,0,t.realWidth,t.realHeight)};e.imageLoaded(i)?r():i.onload=r}},setInitial:function(){var t=this,i=void 0,a=void 0;if(this.$slots.initial&&this.$slots.initial[0]){var r=this.$slots.initial[0],s=r.tag,h=r.elm;"img"==s&&h&&(a=h)}this.initialImage&&"string"==typeof this.initialImage?(i=this.initialImage,a=new Image,/^data:/.test(i)||/^blob:/.test(i)||a.setAttribute("crossOrigin","anonymous"),a.src=i):"object"===o(this.initialImage)&&this.initialImage instanceof Image&&(a=this.initialImage),i||a?e.imageLoaded(a)?(this._onload(a,+a.dataset.exifOrientation),this.$emit(n.INITIAL_IMAGE_LOADED_EVENT)):(a.onload=function(){t._onload(a,+a.dataset.exifOrientation),t.$emit(n.INITIAL_IMAGE_LOADED_EVENT)},a.onerror=function(){t.remove()}):this.remove()},_onload:function(t){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1;this.originalImage=t,this.img=t,this.rotate(i)},chooseFile:function(){this.$refs.fileInput.click()},handleClick:function(){this.img||this.disableClickToChoose||this.disabled||this.supportTouch||this.chooseFile()},handleInputChange:function(){var t=this.$refs.fileInput;if(t.files.length){var i=t.files[0];this.onNewFileIn(i)}},onNewFileIn:function(t){var i=this;if(this.$emit(n.FILE_CHOOSE_EVENT,t),!this.fileSizeIsValid(t))throw this.$emit(n.FILE_SIZE_EXCEED_EVENT,t),new Error("File size exceeds limit which is "+this.fileSizeLimit+" bytes.");if(!this.fileTypeIsValid(t)){this.$emit(n.FILE_TYPE_MISMATCH_EVENT,t);var a=t.type||t.name.toLowerCase().split(".").pop();throw new Error("File type ("+a+") does not match what you specified ("+this.accept+").")}if(void 0!==window.FileReader){var o=new FileReader;o.onload=function(t){var a=t.target.result,o=e.getFileOrientation(e.base64ToArrayBuffer(a));o<1&&(o=1);var r=new Image;r.src=a,r.onload=function(){i._onload(r,o),i.$emit(n.NEW_IMAGE)}},o.readAsDataURL(t)}},fileSizeIsValid:function(t){return!!t&&(!this.fileSizeLimit||0==this.fileSizeLimit||t.size<this.fileSizeLimit)},fileTypeIsValid:function(t){for(var i=this.accept||"image/*",e=i.replace(/\/.*$/,""),a=i.split(","),n=0,o=a.length;n<o;n++){var r=a[n],s=r.trim();if("."==s.charAt(0)){if(t.name.toLowerCase().split(".").pop()===s.toLowerCase().slice(1))return!0}else if(/\/\*$/.test(s)){if(t.type.replace(/\/.*$/,"")===e)return!0}else if(t.type===r)return!0}return!1},imgContentInit:function(t){if(this.naturalWidth=this.img.naturalWidth,this.naturalHeight=this.img.naturalHeight,this.imgData.startX=0,this.imgData.startY=0,this.preventWhiteSpace||"contain"!=this.initialSize?this.preventWhiteSpace||"natural"!=this.initialSize?this.aspectFill():this.naturalSize():this.aspectFit(),this.scaleRatio=this.imgData.width/this.naturalWidth,/top/.test(this.initialPosition)?this.imgData.startY=0:/bottom/.test(this.initialPosition)&&(this.imgData.startY=this.realHeight-this.imgData.height),/left/.test(this.initialPosition)?this.imgData.startX=0:/right/.test(this.initialPosition)&&(this.imgData.startX=this.realWidth-this.imgData.width),/^-?\d+% -?\d+%$/.test(this.initialPosition)){var i=/^(-?\d+)% (-?\d+)%$/.exec(this.initialPosition),e=+i[1]/100,a=+i[2]/100;this.imgData.startX=e*(this.realWidth-this.imgData.width),this.imgData.startY=a*(this.realHeight-this.imgData.height)}t&&this.applyMetadata(),this.preventWhiteSpace&&this.preventMovingToWhiteSpace(),this.draw()},aspectFill:function(){var t=this.naturalWidth,i=this.naturalHeight,e=void 0;i/t<this.realHeight/this.realWidth?(e=i/this.realHeight,this.imgData.width=t/e,this.imgData.height=this.realHeight,this.imgData.startX=-(this.imgData.width-this.realWidth)/2):(e=t/this.realWidth,this.imgData.height=i/e,this.imgData.width=this.realWidth,this.imgData.startY=-(this.imgData.height-this.realHeight)/2)},aspectFit:function(){var t=this.naturalWidth,i=this.naturalHeight,e=void 0;i/t<this.realHeight/this.realWidth?(e=t/this.realWidth,this.imgData.height=i/e,this.imgData.width=this.realWidth,this.imgData.startY=-(this.imgData.height-this.realHeight)/2):(e=i/this.realHeight,this.imgData.width=t/e,this.imgData.height=this.realHeight,this.imgData.startX=-(this.imgData.width-this.realWidth)/2)},naturalSize:function(){var t=this.naturalWidth,i=this.naturalHeight;this.imgData.width=t,this.imgData.height=i,this.imgData.startX=-(this.imgData.width-this.realWidth)/2,this.imgData.startY=-(this.imgData.height-this.realHeight)/2},handlePointerStart:function(t){this.supportTouch=!0,this.pointerMoved=!1;var i=e.getPointerCoords(t,this);if(this.pointerStartCoord=i,!this.disabled)if(this.img||this.disableClickToChoose){if(!(t.which&&t.which>1)){if(!t.touches||1===t.touches.length){this.dragging=!0,this.pinching=!1;var a=e.getPointerCoords(t,this);this.lastMovingCoord=a}t.touches&&2===t.touches.length&&!this.disablePinchToZoom&&(this.dragging=!1,this.pinching=!0,this.pinchDistance=e.getPinchDistance(t,this));for(var n=["mouseup","touchend","touchcancel","pointerend","pointercancel"],o=0,r=n.length;o<r;o++){var s=n[o];document.addEventListener(s,this.handlePointerEnd)}}}else this.tabStart=(new Date).valueOf()},handlePointerEnd:function(t){var i=0;if(this.pointerStartCoord){var a=e.getPointerCoords(t,this);i=Math.sqrt(Math.pow(a.x-this.pointerStartCoord.x,2)+Math.pow(a.y-this.pointerStartCoord.y,2))||0}if(!this.disabled){if(!this.img&&!this.disableClickToChoose){var n=(new Date).valueOf();return i<100&&n-this.tabStart<500&&this.supportTouch&&this.chooseFile(),void(this.tabStart=0)}this.dragging=!1,this.pinching=!1,this.pinchDistance=0,this.lastMovingCoord=null,this.pointerMoved=!1,this.pointerStartCoord=null}},handlePointerMove:function(t){if(this.pointerMoved=!0,!this.disabled&&!this.disableDragToMove&&this.img){if(t.preventDefault(),!t.touches||1===t.touches.length){if(!this.dragging)return;var i=e.getPointerCoords(t,this);this.lastMovingCoord&&this.move({x:i.x-this.lastMovingCoord.x,y:i.y-this.lastMovingCoord.y}),this.lastMovingCoord=i}if(t.touches&&2===t.touches.length&&!this.disablePinchToZoom){if(!this.pinching)return;var a=e.getPinchDistance(t,this),n=a-this.pinchDistance;this.zoom(n>0,null,2),this.pinchDistance=a}}},handleWheel:function(t){if(!this.disabled&&!this.disableScrollToZoom&&this.img){t.preventDefault();var i=e.getPointerCoords(t,this);t.wheelDelta<0||t.deltaY>0||t.detail>0?this.zoom(this.reverseScrollToZoom,i):(t.wheelDelta>0||t.deltaY<0||t.detail<0)&&this.zoom(!this.reverseScrollToZoom,i)}},handleDragEnter:function(t){this.disabled||this.disableDragAndDrop||this.img||!e.eventHasFile(t)||(this.fileDraggedOver=!0)},handleDragLeave:function(t){this.fileDraggedOver&&e.eventHasFile(t)&&(this.fileDraggedOver=!1)},handleDragOver:function(t){},handleDrop:function(t){if(this.fileDraggedOver&&e.eventHasFile(t)){this.fileDraggedOver=!1;var i=void 0,a=t.dataTransfer;if(a){if(a.items)for(var n=0,o=a.items.length;n<o;n++){var r=a.items[n];if("file"==r.kind){i=r.getAsFile();break}}else i=a.files[0];i&&this.onNewFileIn(i)}}},move:function(t){if(t){var i=this.imgData.startX,e=this.imgData.startY;this.imgData.startX+=t.x,this.imgData.startY+=t.y,this.preventWhiteSpace&&this.preventMovingToWhiteSpace(),this.imgData.startX===i&&this.imgData.startY===e||(this.$emit(n.MOVE_EVENT),this.draw())}},preventMovingToWhiteSpace:function(){this.imgData.startX>0&&(this.imgData.startX=0),this.imgData.startY>0&&(this.imgData.startY=0),this.realWidth-this.imgData.startX>this.imgData.width&&(this.imgData.startX=-(this.imgData.width-this.realWidth)),this.realHeight-this.imgData.startY>this.imgData.height&&(this.imgData.startY=-(this.imgData.height-this.realHeight))},zoom:function(t,i){var e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:1;i=i||{x:this.imgData.startX+this.imgData.width/2,y:this.imgData.startY+this.imgData.height/2};var a=this.zoomSpeed*e,o=1e-5*this.realWidth*a,r=1;t?r=1+o:this.imgData.width>10&&(r=1-o);var s=this.imgData.width,h=this.imgData.height;if(this.imgData.width=this.imgData.width*r,this.imgData.height=this.imgData.height*r,this.preventWhiteSpace){if(this.imgData.width<this.realWidth){var l=this.realWidth/this.imgData.width;this.imgData.width=this.realWidth,this.imgData.height=this.imgData.height*l}if(this.imgData.height<this.realHeight){var d=this.realHeight/this.imgData.height;this.imgData.height=this.realHeight,this.imgData.width=this.imgData.width*d}}if(s.toFixed(2)!==this.imgData.width.toFixed(2)||h.toFixed(2)!==this.imgData.height.toFixed(2)){var c=(r-1)*(i.x-this.imgData.startX),g=(r-1)*(i.y-this.imgData.startY);this.imgData.startX=this.imgData.startX-c,this.imgData.startY=this.imgData.startY-g,this.preventWhiteSpace&&this.preventMovingToWhiteSpace(),this.$emit(n.ZOOM_EVENT),this.draw(),this.scaleRatio=this.imgData.width/this.naturalWidth}},rotate:function(){var t=this,i=arguments.length>0&&void 0!==arguments[0]?arguments[0]:6,a=arguments[1];if(this.img){if(i>1){var n=e.getRotatedImage(a?this.originalImage:this.img,i);n.onload=function(){t.img=n,t.imgContentInit(a)}}else this.imgContentInit(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,a&&(this.orientation=i)}},paintBackground:function(){var t=this.canvasColor&&"default"!=this.canvasColor?this.canvasColor:"transparent";this.ctx.fillStyle=t,this.ctx.clearRect(0,0,this.realWidth,this.realHeight),this.ctx.fillRect(0,0,this.realWidth,this.realHeight)},draw:function(){this.img&&(window.requestAnimationFrame?requestAnimationFrame(this._drawFrame):this._drawFrame())},_drawFrame:function(){var t=this.ctx,i=this.imgData,e=i.startX,a=i.startY,o=i.width,r=i.height;this.paintBackground(),t.drawImage(this.img,e,a,o,r),this.$emit(n.DRAW,t)},generateDataUrl:function(t,i){return this.img?this.canvas.toDataURL(t,i):""},generateBlob:function(t,i,e){if(!this.img)return null;this.canvas.toBlob(t,i,e)},promisedBlob:function(){for(var t=this,i=arguments.length,e=Array(i),a=0;a<i;a++)e[a]=arguments[a];if("undefined"!=typeof Promise)return new Promise(function(i,a){try{t.generateBlob(function(t){i(t)},e)}catch(t){a(t)}});console.warn("No Promise support. Please add Promise polyfill if you want to use this method.")},getMetadata:function(){if(!this.img)return{};var t=this.imgData;return{startX:t.startX,startY:t.startY,scale:this.scaleRatio,orientation:this.orientation}},applyMetadata:function(){if(this.userMetadata){var t=this.userMetadata,i=t.startX,e=t.startY,a=t.scale;i=+i,e=+e,a=+a,isNaN(i)||(this.imgData.startX=i),isNaN(e)||(this.imgData.startY=e),isNaN(a)||(this.imgData.width=this.naturalWidth*a,this.imgData.height=this.naturalHeight*a,this.scaleRatio=a)}}}},s=Object.getOwnPropertySymbols,h=Object.prototype.hasOwnProperty,l=Object.prototype.propertyIsEnumerable,d=function(){try{if(!Object.assign)return!1;var t=new String("abc");if(t[5]="de","5"===Object.getOwnPropertyNames(t)[0])return!1;for(var i={},e=0;e<10;e++)i["_"+String.fromCharCode(e)]=e;if("0123456789"!==Object.getOwnPropertyNames(i).map(function(t){return i[t]}).join(""))return!1;var a={};return"abcdefghijklmnopqrst".split("").forEach(function(t){a[t]=t}),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},a)).join("")}catch(t){return!1}}()?Object.assign:function(i,e){for(var a,n,o=t(i),r=1;r<arguments.length;r++){a=Object(arguments[r]);for(var d in a)h.call(a,d)&&(o[d]=a[d]);if(s){n=s(a);for(var c=0;c<n.length;c++)l.call(a,n[c])&&(o[n[c]]=a[n[c]])}}return o},c={componentName:"croppa"};return{install:function(t,i){i=d({},c,i);var e=Number(t.version.split(".")[0]);if(e<2)throw new Error("vue-croppa supports vue version 2.0 and above. You are using Vue@"+e+". Please upgrade to the latest version of Vue.");var a=i.componentName||"croppa";t.component(a,r)},component:r}}); |
| { | ||
| "name": "vue-croppa", | ||
| "version": "0.3.1", | ||
| "version": "0.3.2", | ||
| "description": "A simple straightforward customizable lightweight mobile-friendly image cropper for Vue 2.0.", | ||
@@ -5,0 +5,0 @@ "main": "dist/vue-croppa.js", |
@@ -9,3 +9,3 @@ # vue-croppa | ||
| - **Highly customizable**: You can almost customize anything except the core functionalities | ||
| - **Lightweight**: 24kb in total | ||
| - **Lightweight**: 24kb in total (33kb since v0.3.0) | ||
| - **Mobile-friendly**: Supports drag to move and pinch with two fingers to zoom on mobile devices | ||
@@ -482,10 +482,4 @@ - **EXIF orientation**: v0.2.0+ Support correctly show image with EXIF orientation | ||
| #### <s>initial-image-load</s> | ||
| - **Deprecated** Don't use this. It will be removed soon since you can directly listen to native `@load` event on img tag. | ||
| - emitted when initial image is [provided](#initial) and successully loaded. | ||
| #### <s>initial-image-error</s> | ||
| - **Deprecated** Don't use this. It will be removed soon since you can directly listen to native `@error` event on img tag. | ||
| - emitted when initial image is [provided](#initial) and failed loading. | ||
| #### initial-image-loaded | ||
| - emitted when initial image loaded. It can be useful when you provide initial image with the `initial-image` prop. | ||
| --- | ||
@@ -498,26 +492,31 @@ | ||
| ## To Do List | ||
| ## Development | ||
| - [x] File type filter on drag and drop. Add a `file-type-mismatch` event. | ||
| - [x] Keep default scrolling behavior when there is no image. | ||
| - [x] Browser support detection. | ||
| - [x] Sopport dataTransferItemList interface on drop for better compatibility. | ||
| - [x] Optimize doc page bundle size. | ||
| - [x] Fix remove button shadow. | ||
| - [x] Deprecation warning of unnecessary `initial-image-load` and `initial-image-error` events. | ||
| - [x] Add a method `hasImage()` to represent whether currently there is a image. | ||
| - [x] SSR compatibility. | ||
| - [x] Deprecation warning of `reset()` method. | ||
| - [x] Ignore non-file dragging. | ||
| - [x] Change `accept` default value. | ||
| - [x] Replace `for of` with tranditional `for` loop for better compatibility. | ||
| - [x] Expose component itself. | ||
| - [ ] <s>Make container optionally resizable.</s> | ||
| - [x] Make default position customizable. | ||
| - [x] Rotation support. | ||
| - [x] `toDataUrl()`s second argument to specify compression rate. | ||
| - [x] Doc about file compression. | ||
| - [x] Add examples to doc. | ||
| - [x] Download example. | ||
| - [x] Image placeholder. | ||
| - [x] ondraw event. | ||
| #### 1. Fork and clone the repo. | ||
| #### 2. Install dependencies. | ||
| ```bash | ||
| $ cd vue-croppa | ||
| $ npm install | ||
| ``` | ||
| ```bash | ||
| $ cd docs | ||
| $ npm install | ||
| ``` | ||
| #### 3. Start developing. | ||
| ```bash | ||
| # under vue-croppa/ | ||
| $ npm run dev | ||
| ``` | ||
| ```bash | ||
| # under vue-croppa/docs/ | ||
| $ npm run dev | ||
| ``` | ||
| Edit file `./docs/simple-test.html` and open http://localhost:3000/simple-test.html to test while developing. | ||
| #### 4. Build | ||
| ```bash | ||
| # under vue-croppa/ | ||
| $ npm run build | ||
| ``` |
@@ -10,3 +10,4 @@ export default { | ||
| ZOOM_EVENT: 'zoom', | ||
| DRAW: 'draw' | ||
| } | ||
| DRAW: 'draw', | ||
| INITIAL_IMAGE_LOADED_EVENT: 'initial-image-loaded' | ||
| } |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-0.76%
136286
- Lines of code
- decreased by-0.54%
1855
- Number of lines in readme file
- decreased by-0.38%
519
No dependency changes