vue-croppa - npm Package Compare versions

Comparing version 0.0.13 to 0.0.14

dist/vue-croppa.js

@@ -116,5 +116,7 @@ /*
 var ZOOM_EVENT = 'zoom';
+var INITIAL_IMAGE_LOAD = 'initial-image-load';
+var INITIAL_IMAGE_ERROR = 'initial-image-error';
 
 var cropper = { render: function render() {
-    var _vm = this;var _h = _vm.$createElement;var _c = _vm._self._c || _h;return _c('div', { class: 'croppa-container ' + (_vm.img ? 'croppa--has-target' : '') + ' ' + (_vm.disabled ? 'croppa--disabled' : '') + ' ' + (_vm.disableClickToChoose ? 'croppa--disabled-cc' : '') + ' ' + (_vm.disableDragToMove && _vm.disableScrollToZoom ? 'croppa--disabled-mz' : '') }, [_c('input', { ref: "fileInput", attrs: { "type": "file", "accept": _vm.accept, "disabled": _vm.disabled, "hidden": "" }, on: { "change": _vm.handleInputChange } }), _c('canvas', { ref: "canvas", on: { "click": function click($event) {
+    var _vm = this;var _h = _vm.$createElement;var _c = _vm._self._c || _h;return _c('div', { class: 'croppa-container ' + (_vm.img ? 'croppa--has-target' : '') + ' ' + (_vm.disabled ? 'croppa--disabled' : '') + ' ' + (_vm.disableClickToChoose ? 'croppa--disabled-cc' : '') + ' ' + (_vm.disableDragToMove && _vm.disableScrollToZoom ? 'croppa--disabled-mz' : '') }, [_c('input', { ref: "fileInput", attrs: { "type": "file", "accept": _vm.accept, "disabled": _vm.disabled, "hidden": "" }, on: { "change": _vm.handleInputChange } }), _c('div', { staticClass: "initial", staticStyle: { "width": "0", "height": "0", "visibility": "hidden" } }, [_vm._t("initial")], 2), _c('canvas', { ref: "canvas", on: { "click": function click($event) {
           !_vm.disabled && _vm.chooseFile();
@@ -165,3 +167,4 @@ }, "touchstart": function touchstart($event) {
       imgData: {},
-      dataUrl: ''
+      dataUrl: '',
+      initialLoading: false
     };
@@ -212,3 +215,7 @@ },
       this.ctx = this.canvas.getContext('2d');
-      this.unset();
+      if (this.$slots.initial && this.$slots.initial[0]) {
+        this.setInitial();
+      } else {
+        this.unset();
+      }
       this.$emit(INIT_EVENT, {
@@ -254,2 +261,3 @@ getCanvas: function getCanvas() {
         },
+        refresh: this.init,
         reset: this.unset,
@@ -276,2 +284,24 @@ chooseFile: this.chooseFile,
     },
+    setInitial: function setInitial() {
+      var _this2 = this;
+
+      var vNode = this.$slots.initial[0];
+      var tag = vNode.tag,
+          elm = vNode.elm;
+
+      if (tag !== 'img' || !elm || !elm.src) {
+        this.unset();
+      }
+      this.initialLoading = true;
+      elm.onload = function () {
+        _this2.$emit(INITIAL_IMAGE_LOAD);
+        _this2.img = elm;
+        _this2.imgContentInit();
+      };
+
+      elm.onerror = function () {
+        _this2.$emit(INITIAL_IMAGE_ERROR);
+        _this2.unset();
+      };
+    },
     chooseFile: function chooseFile() {
@@ -282,3 +312,3 @@ if (this.img || this.disableClickToChoose) return;
     handleInputChange: function handleInputChange() {
-      var _this2 = this;
+      var _this3 = this;
 
@@ -300,4 +330,4 @@ var input = this.$refs.fileInput;
         img.onload = function () {
-          _this2.img = img;
-          _this2.imgContentInit();
+          _this3.img = img;
+          _this3.imgContentInit();
         };
@@ -304,0 +334,0 @@ };

dist/vue-croppa.min.js

@@ -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={getPointerCoords:function(t,i){var e=i.canvas,a=i.quality,n=e.getBoundingClientRect(),o=t.touches?t.touches[0].clientX:t.clientX,h=t.touches?t.touches[0].clientY:t.clientY;return{x:(o-n.left)*a,y:(h-n.top)*a}}};Number.isInteger=Number.isInteger||function(t){return"number"==typeof t&&isFinite(t)&&Math.floor(t)===t};var i={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":"")},[e("input",{ref:"fileInput",attrs:{type:"file",accept:t.accept,disabled:t.disabled,hidden:""},on:{change:t.handleInputChange}}),e("canvas",{ref:"canvas",on:{click:function(i){!t.disabled&&t.chooseFile()},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)},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:{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,disableClickToChoose:Boolean,disableDragToMove:Boolean,disableScrollToZoom:Boolean,reverseZoomingGesture:Boolean,preventWhiteSpace:Boolean,showRemoveButton:{type:Boolean,default:!0},removeButtonColor:{type:String,default:"red"},removeButtonSize:{type:Number}},data:function(){return{instance:null,canvas:null,ctx:null,img:null,dragging:!1,lastMovingCoord:null,imgData:{},dataUrl:""}},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.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,{x:t.imgData.startX+t.imgData.width/2,y:t.imgData.startY+t.imgData.height/2})},zoomOut:function(){t.zoom(!1,{x:t.imgData.startX+t.imgData.width/2,y:t.imgData.startY+t.imgData.height/2})},reset:this.unset,chooseFile:this.chooseFile,generateDataUrl:this.generateDataUrl,generateBlob:this.generateBlob})},unset:function(){var t=this.ctx;t.clearRect(0,0,this.realWidth,this.realHeight),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),this.img=null,this.$refs.fileInput.value="",this.imgData={}},chooseFile:function(){this.img||this.disableClickToChoose||this.$refs.fileInput.click()},handleInputChange:function(){var t=this,i=this.$refs.fileInput;if(i.files.length){var e=i.files[0];if(this.$emit("file-choose",e),!this.fileSizeIsValid(e))throw this.$emit("file-size-exceed",e),new Error("File size exceeds limit which is "+this.fileSizeLimit+" bytes.");var a=new FileReader;a.onload=function(i){var e=i.target.result,a=new Image;a.src=e,a.onload=function(){t.img=a,t.imgContentInit()}},a.readAsDataURL(e)}},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(t){if(!this.disabled&&!(t.which&&t.which>1)&&(this.dragging=!0,document)){var i=["mouseup","touchend","touchcancel","pointerend","pointercancel"],e=!0,a=!1,n=void 0;try{for(var o,h=i[Symbol.iterator]();!(e=(o=h.next()).done);e=!0){var r=o.value;document.addEventListener(r,this.handlePointerEnd)}}catch(t){a=!0,n=t}finally{try{!e&&h.return&&h.return()}finally{if(a)throw n}}}},handlePointerEnd:function(t){this.disabled||(this.dragging=!1,this.lastMovingCoord=null)},handlePointerMove:function(i){if(!this.disabled&&!this.disableDragToMove&&this.dragging){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}},handleWheel:function(i){if(!this.disabled&&!this.disableScrollToZoom){var e=t.getPointerCoords(i,this);i.wheelDelta<0||i.detail<0?this.zoom(this.reverseZoomingGesture,e):(i.wheelDelta>0||i.detail>0)&&this.zoom(!this.reverseZoomingGesture,e)}},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=this.realWidth/1e5*this.zoomSpeed,a=1;t?a=1+e:this.imgData.width>20&&(a=1-e),this.imgData.width=this.imgData.width*a,this.imgData.height=this.imgData.height*a;var n=(a-1)*(i.x-this.imgData.startX),o=(a-1)*(i.y-this.imgData.startY);if(this.imgData.startX=this.imgData.startX-n,this.imgData.startY=this.imgData.startY-o,this.preventWhiteSpace){if(this.imgData.width<this.realWidth){var h=this.realWidth/this.imgData.width;this.imgData.width=this.realWidth,this.imgData.height=this.imgData.height*h}if(this.imgData.height<this.realHeight){var r=this.realHeight/this.imgData.height;this.imgData.height=this.realHeight,this.imgData.width=this.imgData.width*r}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.ctx;if(this.img){var i=this.imgData,e=i.startX,a=i.startY,n=i.width,o=i.height;t.clearRect(0,0,this.realWidth,this.realHeight),this.paintBackground(),t.drawImage(this.img,e,a,n,o)}},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)}}};return{install:function(t,e){t.component("croppa",i)}}});
+!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={getPointerCoords:function(t,i){var e=i.canvas,a=i.quality,n=e.getBoundingClientRect(),o=t.touches?t.touches[0].clientX:t.clientX,h=t.touches?t.touches[0].clientY:t.clientY;return{x:(o-n.left)*a,y:(h-n.top)*a}}};Number.isInteger=Number.isInteger||function(t){return"number"==typeof t&&isFinite(t)&&Math.floor(t)===t};var i={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":"")},[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){!t.disabled&&t.chooseFile()},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)},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:{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,disableClickToChoose:Boolean,disableDragToMove:Boolean,disableScrollToZoom:Boolean,reverseZoomingGesture:Boolean,preventWhiteSpace:Boolean,showRemoveButton:{type:Boolean,default:!0},removeButtonColor:{type:String,default:"red"},removeButtonSize:{type:Number}},data:function(){return{instance:null,canvas:null,ctx:null,img:null,dragging:!1,lastMovingCoord:null,imgData:{},dataUrl:"",initialLoading:!1}},computed:{realWidth:function(){return this.width*this.quality},realHeight:function(){return this.height*this.quality},realPlaceholderFontSize:function(){return this.placeholderFontSize*this.quality}},mounted:function(){this.init()},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,{x:t.imgData.startX+t.imgData.width/2,y:t.imgData.startY+t.imgData.height/2})},zoomOut:function(){t.zoom(!1,{x:t.imgData.startX+t.imgData.width/2,y:t.imgData.startY+t.imgData.height/2})},refresh:this.init,reset:this.unset,chooseFile:this.chooseFile,generateDataUrl:this.generateDataUrl,generateBlob:this.generateBlob})},unset:function(){var t=this.ctx;t.clearRect(0,0,this.realWidth,this.realHeight),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),this.img=null,this.$refs.fileInput.value="",this.imgData={}},setInitial:function(){var t=this,i=this.$slots.initial[0],e=i.tag,a=i.elm;"img"===e&&a&&a.src||this.unset(),this.initialLoading=!0,a.onload=function(){t.$emit("initial-image-load"),t.img=a,t.imgContentInit()},a.onerror=function(){t.$emit("initial-image-error"),t.unset()}},chooseFile:function(){this.img||this.disableClickToChoose||this.$refs.fileInput.click()},handleInputChange:function(){var t=this,i=this.$refs.fileInput;if(i.files.length){var e=i.files[0];if(this.$emit("file-choose",e),!this.fileSizeIsValid(e))throw this.$emit("file-size-exceed",e),new Error("File size exceeds limit which is "+this.fileSizeLimit+" bytes.");var a=new FileReader;a.onload=function(i){var e=i.target.result,a=new Image;a.src=e,a.onload=function(){t.img=a,t.imgContentInit()}},a.readAsDataURL(e)}},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(t){if(!this.disabled&&!(t.which&&t.which>1)&&(this.dragging=!0,document)){var i=["mouseup","touchend","touchcancel","pointerend","pointercancel"],e=!0,a=!1,n=void 0;try{for(var o,h=i[Symbol.iterator]();!(e=(o=h.next()).done);e=!0){var s=o.value;document.addEventListener(s,this.handlePointerEnd)}}catch(t){a=!0,n=t}finally{try{!e&&h.return&&h.return()}finally{if(a)throw n}}}},handlePointerEnd:function(t){this.disabled||(this.dragging=!1,this.lastMovingCoord=null)},handlePointerMove:function(i){if(!this.disabled&&!this.disableDragToMove&&this.dragging){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}},handleWheel:function(i){if(!this.disabled&&!this.disableScrollToZoom){var e=t.getPointerCoords(i,this);i.wheelDelta<0||i.detail<0?this.zoom(this.reverseZoomingGesture,e):(i.wheelDelta>0||i.detail>0)&&this.zoom(!this.reverseZoomingGesture,e)}},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=this.realWidth/1e5*this.zoomSpeed,a=1;t?a=1+e:this.imgData.width>20&&(a=1-e),this.imgData.width=this.imgData.width*a,this.imgData.height=this.imgData.height*a;var n=(a-1)*(i.x-this.imgData.startX),o=(a-1)*(i.y-this.imgData.startY);if(this.imgData.startX=this.imgData.startX-n,this.imgData.startY=this.imgData.startY-o,this.preventWhiteSpace){if(this.imgData.width<this.realWidth){var h=this.realWidth/this.imgData.width;this.imgData.width=this.realWidth,this.imgData.height=this.imgData.height*h}if(this.imgData.height<this.realHeight){var s=this.realHeight/this.imgData.height;this.imgData.height=this.realHeight,this.imgData.width=this.imgData.width*s}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.ctx;if(this.img){var i=this.imgData,e=i.startX,a=i.startY,n=i.width,o=i.height;t.clearRect(0,0,this.realWidth,this.realHeight),this.paintBackground(),t.drawImage(this.img,e,a,n,o)}},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)}}};return{install:function(t,e){t.component("croppa",i)}}});

package.json

 {
   "name": "vue-croppa",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "description": "A simple straightforward customizable image cropper for vue.js.",
@@ -5,0 +5,0 @@ "main": "dist/vue-croppa.js",

README.md

@@ -193,4 +193,21 @@ # vue-croppa
 
+
 ---
 
+### 🌱 Slots
+
+#### initial
+- You can provide an initial image by putting an `<img>` node as a named slot `initial`. For example:
+```html
+<croppa v-model="myCroppa">
+  <img slot="initial" :src="initialImageUrl" />
+</croppa>
+```
+
+- related:
+  - [`initial-image-load` event](#initial-image-load)
+  - [`initial-image-error` event](#initial-image-error)
+
+---
+
 ### 🌱 Methods
@@ -227,2 +244,5 @@
 
+#### myCroppa.refresh()
+- Reinitialize the component.
+
 #### myCroppa.generateDataUrl( type: string )
@@ -254,2 +274,8 @@ - Returns a data-URL containing a representation of the image in the format specified by the type parameter (defaults to  png).
 
-#### zoom
+#### zoom
+
+#### initial-image-load
+- emitted when initial image is [provided](#initial) and successully loaded.
+
+#### initial-image-error
+- emitted when initial image is [provided](#initial) and failed loading.

New alerts

License Policy Violation

License

This 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

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

202117

increased by1.47%

Lines of code

4707

increased by0.62%

Number of lines in readme file

278

increased by10.32%

No dependency changes