vue-croppa
Advanced tools
Comparing version 0.0.21 to 0.0.22
/* | ||
* vue-croppa v0.0.21 | ||
* vue-croppa v0.0.22 | ||
* https://github.com/zhanziyang/vue-croppa | ||
@@ -561,3 +561,3 @@ * | ||
handleDragLeave: function handleDragLeave(evt) { | ||
if (this.disabled || this.disableDragAndDrop || this.img) return; | ||
if (!this.fileDraggedOver) return; | ||
this.fileDraggedOver = false; | ||
@@ -567,6 +567,8 @@ }, | ||
handleDrop: function handleDrop(evt) { | ||
if (this.disabled || this.disableDragAndDrop || this.img) return; | ||
if (!this.fileDraggedOver) return; | ||
this.fileDraggedOver = false; | ||
if (!evt.dataTransfer || !evt.dataTransfer.files.length) return; | ||
this.fileDraggedOver = false; | ||
var file = evt.dataTransfer.files[0]; | ||
this.onNewFileIn(file); | ||
@@ -616,2 +618,3 @@ }, | ||
var offsetY = (x - 1) * (pos.y - this.imgData.startY); | ||
console.log(offsetX, offsetY); | ||
this.imgData.startX = this.imgData.startX - offsetX; | ||
@@ -618,0 +621,0 @@ this.imgData.startY = this.imgData.startY - offsetY; |
/* | ||
* vue-croppa v0.0.21 | ||
* vue-croppa v0.0.22 | ||
* 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";var t={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=t.touches?t.touches[0]:t;return 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},touchDetect:function(){window.addEventListener("touchstart",function t(){window.USER_IS_TOUCHING=!0,window.removeEventListener("touchstart",t,!1)},!1)},rAFPolyfill:function(){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)}}};Number.isInteger=Number.isInteger||function(t){return"number"==typeof t&&isFinite(t)&&Math.floor(t)===t};var i={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:"#e6e6e6"},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:"image/*"},fileSizeLimit:{type:Number,default:0,validator:function(t){return t>=0}},disabled:Boolean,disableDragAndDrop:Boolean,disableClickToChoose:Boolean,disableDragToMove:Boolean,disableScrollToZoom:Boolean,disablePinchToZoom:Boolean,reverseZoomingGesture:Boolean,reverseScrollToZoom:Boolean,preventWhiteSpace:Boolean,showRemoveButton:{type:Boolean,default:!0},removeButtonColor:{type:String,default:"red"},removeButtonSize:{type:Number}};t.rAFPolyfill(),t.touchDetect();var e={render:function(){var t=this,i=t.$createElement,e=t._self._c||i;return e("div",{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:"initial",staticStyle:{width:"0",height:"0",visibility:"hidden"}},[t._t("initial")],2),e("canvas",{ref:"canvas",on:{click:function(i){i.stopPropagation(),i.preventDefault(),t.handleClick(i)},touchstart:function(i){i.stopPropagation(),i.preventDefault(),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(),i.preventDefault(),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(),i.preventDefault(),t.handleWheel(i)},wheel:function(i){i.stopPropagation(),i.preventDefault(),t.handleWheel(i)},mousewheel:function(i){i.stopPropagation(),i.preventDefault(),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.unset}},[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:i,data:function(){return{instance:null,canvas:null,ctx:null,img:null,dragging:!1,lastMovingCoord:null,imgData:{},dataUrl:"",fileDraggedOver:!1,tabStart:0,pinching:!1,pinchDistance:0}},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()},watch:{value:function(t){this.instance=t},realWidth:"init",realHeight:"init",canvasColor:"init",placeholder:"init",placeholderColor:"init",realPlaceholderFontSize:"init",preventWhiteSpace:"imgContentInit"},methods:{init:function(){var t=this;this.canvas=this.$refs.canvas,this.canvas.width=this.realWidth,this.canvas.height=this.realHeight,this.canvas.style.width=this.width+"px",this.canvas.style.height=this.height+"px",this.canvas.style.backgroundColor=this.canvasColor&&"default"!=this.canvasColor?"string"==typeof this.canvasColor?this.canvasColor:"":"#e6e6e6",this.ctx=this.canvas.getContext("2d"),this.$slots.initial&&this.$slots.initial[0]?this.setInitial():this.unset(),this.$emit("init",{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)},refresh:function(){t.$nextTick(t.init)},reset:this.unset,chooseFile:this.chooseFile,generateDataUrl:this.generateDataUrl,generateBlob:this.generateBlob,promisedBlob:this.promisedBlob})},unset:function(){var t=this.ctx;this.paintBackground(),t.textBaseline="middle",t.textAlign="center";var i=this.realWidth/1.5/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.img=null,this.$refs.fileInput.value="",this.imgData={},a&&this.$emit("image-remove")},setInitial:function(){var i=this,e=this.$slots.initial[0],a=e.tag,n=e.elm;"img"===a&&n&&n.src?t.imageLoaded(n)?(this.img=n,this.imgContentInit()):(n.onload=function(){i.$emit("initial-image-load"),i.img=n,i.imgContentInit()},n.onerror=function(){i.$emit("initial-image-error"),i.unset()}):this.unset()},chooseFile:function(){this.$refs.fileInput.click()},handleClick:function(){this.img||this.disableClickToChoose||this.disabled||!window.USER_IS_TOUCHING||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("file-choose",t),!this.fileSizeIsValid(t))throw this.$emit("file-size-exceed",t),new Error("File size exceeds limit which is "+this.fileSizeLimit+" bytes.");var e=new FileReader;e.onload=function(t){var e=t.target.result,a=new Image;a.src=e,a.onload=function(){i.img=a,i.imgContentInit()}},e.readAsDataURL(t)},fileSizeIsValid:function(t){return!!t&&(!this.fileSizeLimit||0==this.fileSizeLimit||t.size<this.fileSizeLimit)},imgContentInit:function(){this.imgData.startX=0,this.imgData.startY=0;var t=this.img.naturalWidth,i=this.img.naturalHeight;if(i/t<this.realHeight/this.realWidth){var e=i/this.realHeight;this.imgData.width=t/e,this.imgData.startX=-(this.imgData.width-this.realWidth)/2,this.imgData.height=this.realHeight}else{var a=t/this.realWidth;this.imgData.height=i/a,this.imgData.startY=-(this.imgData.height-this.realHeight)/2,this.imgData.width=this.realWidth}this.draw()},handlePointerStart:function(i){if(!this.disabled)if(this.img||this.disableClickToChoose){if(!(i.which&&i.which>1)){if(!i.touches||1===i.touches.length){this.dragging=!0,this.pinching=!1;var e=t.getPointerCoords(i,this);this.lastMovingCoord=e}if(i.touches&&2===i.touches.length&&!this.disablePinchToZoom&&(this.dragging=!1,this.pinching=!0,this.pinchDistance=t.getPinchDistance(i,this)),document){var a=["mouseup","touchend","touchcancel","pointerend","pointercancel"],n=!0,o=!1,r=void 0;try{for(var s,h=a[Symbol.iterator]();!(n=(s=h.next()).done);n=!0){var l=s.value;document.addEventListener(l,this.handlePointerEnd)}}catch(t){o=!0,r=t}finally{try{!n&&h.return&&h.return()}finally{if(o)throw r}}}}}else this.tabStart=(new Date).valueOf()},handlePointerEnd:function(t){if(!this.disabled){if(!this.img&&!this.disableClickToChoose)return(new Date).valueOf()-this.tabStart<1e3&&this.chooseFile(),void(this.tabStart=0);this.dragging=!1,this.pinching=!1,this.pinchDistance=0,this.lastMovingCoord=null}},handlePointerMove:function(i){if(!this.disabled&&!this.disableDragToMove&&this.img){if(!i.touches||1===i.touches.length){if(!this.dragging)return;var e=t.getPointerCoords(i,this);this.lastMovingCoord&&this.move({x:e.x-this.lastMovingCoord.x,y:e.y-this.lastMovingCoord.y}),this.lastMovingCoord=e}if(i.touches&&2===i.touches.length&&!this.disablePinchToZoom){if(!this.pinching)return;var a=t.getPinchDistance(i,this),n=a-this.pinchDistance;this.zoom(n>0,null,2),this.pinchDistance=a}}},handleWheel:function(i){if(!this.disabled&&!this.disableScrollToZoom&&this.img){var e=t.getPointerCoords(i,this);i.wheelDelta<0||i.deltaY>0||i.detail>0?this.zoom(this.reverseZoomingGesture||this.reverseScrollToZoom,e):(i.wheelDelta>0||i.deltaY<0||i.detail<0)&&this.zoom(!this.reverseZoomingGesture&&!this.reverseScrollToZoom,e)}},handleDragEnter:function(t){this.disabled||this.disableDragAndDrop||this.img||(this.fileDraggedOver=!0)},handleDragLeave:function(t){this.disabled||this.disableDragAndDrop||this.img||(this.fileDraggedOver=!1)},handleDragOver:function(t){},handleDrop:function(t){if(!(this.disabled||this.disableDragAndDrop||this.img)&&t.dataTransfer&&t.dataTransfer.files.length){this.fileDraggedOver=!1;var i=t.dataTransfer.files[0];this.onNewFileIn(i)}},move:function(t){t&&(this.imgData.startX+=t.x,this.imgData.startY+=t.y,this.preventWhiteSpace&&this.preventMovingToWhiteSpace(),this.$emit("move"),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.realWidth/1e5*this.zoomSpeed*e,n=1;t?n=1+a:this.imgData.width>20&&(n=1-a),this.imgData.width=this.imgData.width*n,this.imgData.height=this.imgData.height*n;var o=(n-1)*(i.x-this.imgData.startX),r=(n-1)*(i.y-this.imgData.startY);if(this.imgData.startX=this.imgData.startX-o,this.imgData.startY=this.imgData.startY-r,this.preventWhiteSpace){if(this.imgData.width<this.realWidth){var s=this.realWidth/this.imgData.width;this.imgData.width=this.realWidth,this.imgData.height=this.imgData.height*s}if(this.imgData.height<this.realHeight){var h=this.realHeight/this.imgData.height;this.imgData.height=this.realHeight,this.imgData.width=this.imgData.width*h}this.preventMovingToWhiteSpace()}this.$emit("zoom"),this.draw()},paintBackground:function(){var t=this.canvasColor&&"default"!=this.canvasColor?this.canvasColor:"#e6e6e6";this.ctx.fillStyle=t,this.ctx.fillRect(0,0,this.realWidth,this.realHeight)},draw:function(){var t=this,i=this.ctx;if(this.img){var e=this.imgData,a=e.startX,n=e.startY,o=e.width,r=e.height;requestAnimationFrame(function(){t.paintBackground(),i.drawImage(t.img,a,n,o,r)})}},generateDataUrl:function(t){return this.img?this.canvas.toDataURL(t):""},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];return new Promise(function(i,a){try{t.generateBlob(function(t){i(t)},e)}catch(t){a(t)}})}}};return{install:function(t,i){t.component("croppa",e)}}}); | ||
!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";var t={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=t.touches?t.touches[0]:t;return 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},touchDetect:function(){window.addEventListener("touchstart",function t(){window.USER_IS_TOUCHING=!0,window.removeEventListener("touchstart",t,!1)},!1)},rAFPolyfill:function(){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)}}};Number.isInteger=Number.isInteger||function(t){return"number"==typeof t&&isFinite(t)&&Math.floor(t)===t};var i={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:"#e6e6e6"},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:"image/*"},fileSizeLimit:{type:Number,default:0,validator:function(t){return t>=0}},disabled:Boolean,disableDragAndDrop:Boolean,disableClickToChoose:Boolean,disableDragToMove:Boolean,disableScrollToZoom:Boolean,disablePinchToZoom:Boolean,reverseZoomingGesture:Boolean,reverseScrollToZoom:Boolean,preventWhiteSpace:Boolean,showRemoveButton:{type:Boolean,default:!0},removeButtonColor:{type:String,default:"red"},removeButtonSize:{type:Number}};t.rAFPolyfill(),t.touchDetect();var e={render:function(){var t=this,i=t.$createElement,e=t._self._c||i;return e("div",{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:"initial",staticStyle:{width:"0",height:"0",visibility:"hidden"}},[t._t("initial")],2),e("canvas",{ref:"canvas",on:{click:function(i){i.stopPropagation(),i.preventDefault(),t.handleClick(i)},touchstart:function(i){i.stopPropagation(),i.preventDefault(),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(),i.preventDefault(),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(),i.preventDefault(),t.handleWheel(i)},wheel:function(i){i.stopPropagation(),i.preventDefault(),t.handleWheel(i)},mousewheel:function(i){i.stopPropagation(),i.preventDefault(),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.unset}},[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:i,data:function(){return{instance:null,canvas:null,ctx:null,img:null,dragging:!1,lastMovingCoord:null,imgData:{},dataUrl:"",fileDraggedOver:!1,tabStart:0,pinching:!1,pinchDistance:0}},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()},watch:{value:function(t){this.instance=t},realWidth:"init",realHeight:"init",canvasColor:"init",placeholder:"init",placeholderColor:"init",realPlaceholderFontSize:"init",preventWhiteSpace:"imgContentInit"},methods:{init:function(){var t=this;this.canvas=this.$refs.canvas,this.canvas.width=this.realWidth,this.canvas.height=this.realHeight,this.canvas.style.width=this.width+"px",this.canvas.style.height=this.height+"px",this.canvas.style.backgroundColor=this.canvasColor&&"default"!=this.canvasColor?"string"==typeof this.canvasColor?this.canvasColor:"":"#e6e6e6",this.ctx=this.canvas.getContext("2d"),this.$slots.initial&&this.$slots.initial[0]?this.setInitial():this.unset(),this.$emit("init",{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)},refresh:function(){t.$nextTick(t.init)},reset:this.unset,chooseFile:this.chooseFile,generateDataUrl:this.generateDataUrl,generateBlob:this.generateBlob,promisedBlob:this.promisedBlob})},unset:function(){var t=this.ctx;this.paintBackground(),t.textBaseline="middle",t.textAlign="center";var i=this.realWidth/1.5/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.img=null,this.$refs.fileInput.value="",this.imgData={},a&&this.$emit("image-remove")},setInitial:function(){var i=this,e=this.$slots.initial[0],a=e.tag,n=e.elm;"img"===a&&n&&n.src?t.imageLoaded(n)?(this.img=n,this.imgContentInit()):(n.onload=function(){i.$emit("initial-image-load"),i.img=n,i.imgContentInit()},n.onerror=function(){i.$emit("initial-image-error"),i.unset()}):this.unset()},chooseFile:function(){this.$refs.fileInput.click()},handleClick:function(){this.img||this.disableClickToChoose||this.disabled||!window.USER_IS_TOUCHING||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("file-choose",t),!this.fileSizeIsValid(t))throw this.$emit("file-size-exceed",t),new Error("File size exceeds limit which is "+this.fileSizeLimit+" bytes.");var e=new FileReader;e.onload=function(t){var e=t.target.result,a=new Image;a.src=e,a.onload=function(){i.img=a,i.imgContentInit()}},e.readAsDataURL(t)},fileSizeIsValid:function(t){return!!t&&(!this.fileSizeLimit||0==this.fileSizeLimit||t.size<this.fileSizeLimit)},imgContentInit:function(){this.imgData.startX=0,this.imgData.startY=0;var t=this.img.naturalWidth,i=this.img.naturalHeight;if(i/t<this.realHeight/this.realWidth){var e=i/this.realHeight;this.imgData.width=t/e,this.imgData.startX=-(this.imgData.width-this.realWidth)/2,this.imgData.height=this.realHeight}else{var a=t/this.realWidth;this.imgData.height=i/a,this.imgData.startY=-(this.imgData.height-this.realHeight)/2,this.imgData.width=this.realWidth}this.draw()},handlePointerStart:function(i){if(!this.disabled)if(this.img||this.disableClickToChoose){if(!(i.which&&i.which>1)){if(!i.touches||1===i.touches.length){this.dragging=!0,this.pinching=!1;var e=t.getPointerCoords(i,this);this.lastMovingCoord=e}if(i.touches&&2===i.touches.length&&!this.disablePinchToZoom&&(this.dragging=!1,this.pinching=!0,this.pinchDistance=t.getPinchDistance(i,this)),document){var a=["mouseup","touchend","touchcancel","pointerend","pointercancel"],n=!0,o=!1,r=void 0;try{for(var s,h=a[Symbol.iterator]();!(n=(s=h.next()).done);n=!0){var l=s.value;document.addEventListener(l,this.handlePointerEnd)}}catch(t){o=!0,r=t}finally{try{!n&&h.return&&h.return()}finally{if(o)throw r}}}}}else this.tabStart=(new Date).valueOf()},handlePointerEnd:function(t){if(!this.disabled){if(!this.img&&!this.disableClickToChoose)return(new Date).valueOf()-this.tabStart<1e3&&this.chooseFile(),void(this.tabStart=0);this.dragging=!1,this.pinching=!1,this.pinchDistance=0,this.lastMovingCoord=null}},handlePointerMove:function(i){if(!this.disabled&&!this.disableDragToMove&&this.img){if(!i.touches||1===i.touches.length){if(!this.dragging)return;var e=t.getPointerCoords(i,this);this.lastMovingCoord&&this.move({x:e.x-this.lastMovingCoord.x,y:e.y-this.lastMovingCoord.y}),this.lastMovingCoord=e}if(i.touches&&2===i.touches.length&&!this.disablePinchToZoom){if(!this.pinching)return;var a=t.getPinchDistance(i,this),n=a-this.pinchDistance;this.zoom(n>0,null,2),this.pinchDistance=a}}},handleWheel:function(i){if(!this.disabled&&!this.disableScrollToZoom&&this.img){var e=t.getPointerCoords(i,this);i.wheelDelta<0||i.deltaY>0||i.detail>0?this.zoom(this.reverseZoomingGesture||this.reverseScrollToZoom,e):(i.wheelDelta>0||i.deltaY<0||i.detail<0)&&this.zoom(!this.reverseZoomingGesture&&!this.reverseScrollToZoom,e)}},handleDragEnter:function(t){this.disabled||this.disableDragAndDrop||this.img||(this.fileDraggedOver=!0)},handleDragLeave:function(t){this.fileDraggedOver&&(this.fileDraggedOver=!1)},handleDragOver:function(t){},handleDrop:function(t){if(this.fileDraggedOver&&(this.fileDraggedOver=!1,t.dataTransfer&&t.dataTransfer.files.length)){var i=t.dataTransfer.files[0];this.onNewFileIn(i)}},move:function(t){t&&(this.imgData.startX+=t.x,this.imgData.startY+=t.y,this.preventWhiteSpace&&this.preventMovingToWhiteSpace(),this.$emit("move"),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.realWidth/1e5*this.zoomSpeed*e,n=1;t?n=1+a:this.imgData.width>20&&(n=1-a),this.imgData.width=this.imgData.width*n,this.imgData.height=this.imgData.height*n;var o=(n-1)*(i.x-this.imgData.startX),r=(n-1)*(i.y-this.imgData.startY);if(console.log(o,r),this.imgData.startX=this.imgData.startX-o,this.imgData.startY=this.imgData.startY-r,this.preventWhiteSpace){if(this.imgData.width<this.realWidth){var s=this.realWidth/this.imgData.width;this.imgData.width=this.realWidth,this.imgData.height=this.imgData.height*s}if(this.imgData.height<this.realHeight){var h=this.realHeight/this.imgData.height;this.imgData.height=this.realHeight,this.imgData.width=this.imgData.width*h}this.preventMovingToWhiteSpace()}this.$emit("zoom"),this.draw()},paintBackground:function(){var t=this.canvasColor&&"default"!=this.canvasColor?this.canvasColor:"#e6e6e6";this.ctx.fillStyle=t,this.ctx.fillRect(0,0,this.realWidth,this.realHeight)},draw:function(){var t=this,i=this.ctx;if(this.img){var e=this.imgData,a=e.startX,n=e.startY,o=e.width,r=e.height;requestAnimationFrame(function(){t.paintBackground(),i.drawImage(t.img,a,n,o,r)})}},generateDataUrl:function(t){return this.img?this.canvas.toDataURL(t):""},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];return new Promise(function(i,a){try{t.generateBlob(function(t){i(t)},e)}catch(t){a(t)}})}}};return{install:function(t,i){t.component("croppa",e)}}}); |
{ | ||
"name": "vue-croppa", | ||
"version": "0.0.21", | ||
"version": "0.0.22", | ||
"description": "A simple straightforward customizable image cropper for vue.js.", | ||
@@ -57,2 +57,3 @@ "main": "dist/vue-croppa.js", | ||
"file-loader": "^0.11.2", | ||
"lodash": "^4.17.4", | ||
"postcss": "^6.0.2", | ||
@@ -74,5 +75,3 @@ "postcss-clean": "^1.0.2", | ||
}, | ||
"dependencies": { | ||
"lodash": "^4.17.4" | ||
} | ||
"dependencies": {} | ||
} |
@@ -27,3 +27,3 @@ # vue-croppa | ||
:prevent-white-space="false" | ||
:reverse-zooming-gesture="false" | ||
:reverse-scroll-to-zoom="false" | ||
:show-remove-button="true" | ||
@@ -182,3 +182,3 @@ :remove-button-color="'red'" | ||
#### <s>reverse-zooming-gesture</s> | ||
**Deprecated** @v0.0.20+ Please use `reverse-scroll-to-zoom` instead. Because this doesn't reverse pinch to zoom. | ||
**Deprecated** @v0.0.20+ Please use `reverse-scroll-to-zoom` instead. The name isn't proper because you can not reverse pinch to zoom. | ||
@@ -227,6 +227,2 @@ Reverses the zoom-in/zoom-out direction when scrolling. | ||
- related: | ||
- [`initial-image-load` event](#initial-image-load) | ||
- [`initial-image-error` event](#initial-image-error) | ||
--- | ||
@@ -304,6 +300,18 @@ | ||
#### initial-image-load | ||
#### <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. | ||
#### initial-image-error | ||
- emitted when initial image is [provided](#initial) and failed loading. | ||
#### <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. | ||
## To Do List | ||
- [ ] File type filter on drag and drop. Add a `file-type-mismatch` event. | ||
- [ ] Fix remove button shadow. | ||
- [x] Deprecation warning of unnecessary `initial-image-load` and `initial-image-error` events. | ||
- [ ] Add a method `hasImage()` to represent whether currently there is a image. | ||
- [ ] Add more method examples in docs. | ||
- [ ] Add a showcase with different customization use cases. | ||
- [ ] Doc about css styling. |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
251893
0
16
5641
314
28
- Removedlodash@^4.17.4
- Removedlodash@4.17.21(transitive)