vue-croppa - npm Package Compare versions

Comparing version 0.1.0 to 0.1.2

dist/vue-croppa.js

 /*
- * vue-croppa v0.1.0
+ * vue-croppa v0.1.1
  * https://github.com/zhanziyang/vue-croppa
@@ -180,3 +180,3 @@ *
     type: String,
-    default: '.jpg,.png,.gif,.bmp,.webp,.svg,.tiff'
+    default: '.jpg,.jpeg,.png,.gif,.bmp,.webp,.svg,.tiff'
   },
@@ -231,3 +231,3 @@ fileSizeLimit: {
 
-var cropper = { render: function render() {
+var component = { 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' : '') + ' ' + (_vm.fileDraggedOver ? 'croppa--dropzone' : ''), on: { "dragenter": function dragenter($event) {
@@ -837,5 +837,99 @@ $event.stopPropagation();$event.preventDefault();_vm.handleDragEnter($event);
 
+/*
+object-assign
+(c) Sindre Sorhus
+@license MIT
+*/
+
+/* eslint-disable no-unused-vars */
+var getOwnPropertySymbols = Object.getOwnPropertySymbols;
+var hasOwnProperty = Object.prototype.hasOwnProperty;
+var propIsEnumerable = Object.prototype.propertyIsEnumerable;
+
+function toObject(val) {
+	if (val === null || val === undefined) {
+		throw new TypeError('Object.assign cannot be called with null or undefined');
+	}
+
+	return Object(val);
+}
+
+function shouldUseNative() {
+	try {
+		if (!Object.assign) {
+			return false;
+		}
+
+		// Detect buggy property enumeration order in older V8 versions.
+
+		// https://bugs.chromium.org/p/v8/issues/detail?id=4118
+		var test1 = new String('abc');  // eslint-disable-line no-new-wrappers
+		test1[5] = 'de';
+		if (Object.getOwnPropertyNames(test1)[0] === '5') {
+			return false;
+		}
+
+		// https://bugs.chromium.org/p/v8/issues/detail?id=3056
+		var test2 = {};
+		for (var i = 0; i < 10; i++) {
+			test2['_' + String.fromCharCode(i)] = i;
+		}
+		var order2 = Object.getOwnPropertyNames(test2).map(function (n) {
+			return test2[n];
+		});
+		if (order2.join('') !== '0123456789') {
+			return false;
+		}
+
+		// https://bugs.chromium.org/p/v8/issues/detail?id=3056
+		var test3 = {};
+		'abcdefghijklmnopqrst'.split('').forEach(function (letter) {
+			test3[letter] = letter;
+		});
+		if (Object.keys(Object.assign({}, test3)).join('') !==
+				'abcdefghijklmnopqrst') {
+			return false;
+		}
+
+		return true;
+	} catch (err) {
+		// We don't expect any of the above to throw, but better to be safe.
+		return false;
+	}
+}
+
+var index = shouldUseNative() ? Object.assign : function (target, source) {
+	var from;
+	var to = toObject(target);
+	var symbols;
+
+	for (var s = 1; s < arguments.length; s++) {
+		from = Object(arguments[s]);
+
+		for (var key in from) {
+			if (hasOwnProperty.call(from, key)) {
+				to[key] = from[key];
+			}
+		}
+
+		if (getOwnPropertySymbols) {
+			symbols = getOwnPropertySymbols(from);
+			for (var i = 0; i < symbols.length; i++) {
+				if (propIsEnumerable.call(from, symbols[i])) {
+					to[symbols[i]] = from[symbols[i]];
+				}
+			}
+		}
+	}
+
+	return to;
+};
+
+var defaultOptions = {
+  componentName: 'croppa'
+};
+
 var VueCroppa = {
   install: function install(Vue, options) {
-    options = options || {};
+    options = index({}, defaultOptions, options);
     var version = Number(Vue.version.split('.')[0]);
@@ -846,4 +940,8 @@ if (version < 2) {
     var componentName = options.componentName || 'croppa';
-    Vue.component(componentName, cropper);
-  }
+
+    // registration
+    Vue.component(componentName, component);
+  },
+
+  component: component
 };
@@ -850,0 +948,0 @@

dist/vue-croppa.min.js

 /*
- * vue-croppa v0.1.0
+ * vue-croppa v0.1.1
  * 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,o=e.getBoundingClientRect(),n=t.clientX,r=t.clientY;return{x:(n-o.left)*a,y:(r-o.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],o=this.onePointCoord(e,i),n=this.onePointCoord(a,i);return Math.sqrt(Math.pow(o.x-n.x,2)+Math.pow(o.y-n.y,2))},getPinchCenterCoord:function(t,i){var e=t.touches[0],a=t.touches[1],o=this.onePointCoord(e,i),n=this.onePointCoord(a,i);return{x:(o.x+n.x)/2,y:(o.y+n.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)),o=window.setTimeout(function(){i(e+a)},a);return t=e+a,o}),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,o,n){t=atob(this.toDataURL(o,n).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:o||"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}};Number.isInteger=Number.isInteger||function(t){return"number"==typeof t&&isFinite(t)&&Math.floor(t)===t};var i={INIT_EVENT:"init",FILE_CHOOSE_EVENT:"file-choose",FILE_SIZE_EXCEED_EVENT:"file-size-exceed",FILE_TYPE_MISMATCH_EVENT:"file-type-mismatch",IMAGE_REMOVE_EVENT:"image-remove",MOVE_EVENT:"move",ZOOM_EVENT:"zoom"},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(),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:{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:".jpg,.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,reverseZoomingGesture:Boolean,reverseScrollToZoom:Boolean,preventWhiteSpace:Boolean,showRemoveButton:{type:Boolean,default:!0},removeButtonColor:{type:String,default:"red"},removeButtonSize:{type:Number},initialImage:String},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,supportTouch:!1,pointerMoved:!1,pointerStartCoord: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(),t.rAFPolyfill(),t.toBlobPolyfill(),(this.$options._parentListeners["initial-image-load"]||this.$options._parentListeners["initial-image-error"])&&console.warn("initial-image-load and initial-image-error events are already deprecated. Please bind them directly on the <img> tag (the slot)."),this.supportDetection().basic||console.warn("Your browser does not support vue-croppa functionality.")},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.img=null,this.setInitial(),this.$emit(i.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)},refresh:function(){t.$nextTick(t.init)},hasImage:function(){return!!t.img},reset:function(){console.warn('"reset()" method will be deprecated in the near future due to misnaming. Please use "remove()" instead. They have the same effect.'),t.remove()},remove:this.remove,chooseFile:this.chooseFile,generateDataUrl:this.generateDataUrl,generateBlob:this.generateBlob,promisedBlob:this.promisedBlob,supportDetection:this.supportDetection})},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(),t.textBaseline="middle",t.textAlign="center";var e=this.realWidth*(2/3)/this.placeholder.length,a=this.realPlaceholderFontSize&&0!=this.realPlaceholderFontSize?this.realPlaceholderFontSize:e;t.font=a+"px sans-serif",t.fillStyle=this.placeholderColor&&"default"!=this.placeholderColor?this.placeholderColor:"#606060",t.fillText(this.placeholder,this.realWidth/2,this.realHeight/2);var o=null!=this.img;this.img=null,this.$refs.fileInput.value="",this.imgData={},o&&this.$emit(i.IMAGE_REMOVE_EVENT)},setInitial:function(){var i=this,e=void 0;if(this.$slots.initial&&this.$slots.initial[0]){var a=this.$slots.initial[0],o=a.tag,n=a.elm;"img"==o&&n&&n.src&&(e=n.src)}if(!e&&this.initialImage&&(e=this.initialImage),e){var r=new Image;r.setAttribute("crossOrigin","anonymous"),r.src=e,t.imageLoaded(r)?(this.img=r,this.imgContentInit()):(r.onload=function(){i.img=r,i.imgContentInit()},r.onerror=function(){i.remove()})}else this.remove()},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 e=this;if(this.$emit(i.FILE_CHOOSE_EVENT,t),!this.fileSizeIsValid(t))throw this.$emit(i.FILE_SIZE_EXCEED_EVENT,t),new Error("File size exceeds limit which is "+this.fileSizeLimit+" bytes.");if(!this.fileTypeIsValid(t)){this.$emit(i.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 i=t.target.result,a=new Image;a.src=i,a.crossOrigin="Anonymous",a.onload=function(){e.img=a,e.imgContentInit()}},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(","),o=0,n=a.length;o<n;o++){var r=a[o],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(){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){this.supportTouch=!0,this.pointerMoved=!1;var e=t.getPointerCoords(i,this);if(this.pointerStartCoord=e,!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 a=t.getPointerCoords(i,this);this.lastMovingCoord=a}i.touches&&2===i.touches.length&&!this.disablePinchToZoom&&(this.dragging=!1,this.pinching=!0,this.pinchDistance=t.getPinchDistance(i,this));for(var o=["mouseup","touchend","touchcancel","pointerend","pointercancel"],n=0,r=o.length;n<r;n++){var s=o[n];document.addEventListener(s,this.handlePointerEnd)}}}else this.tabStart=(new Date).valueOf()},handlePointerEnd:function(i){var e=0;if(this.pointerStartCoord){var a=t.getPointerCoords(i,this);e=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 o=(new Date).valueOf();return e<100&&o-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(i){if(this.pointerMoved=!0,!this.disabled&&!this.disableDragToMove&&this.img){if(i.preventDefault(),!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),o=a-this.pinchDistance;this.zoom(o>0,null,2),this.pinchDistance=a}}},handleWheel:function(i){if(!this.disabled&&!this.disableScrollToZoom&&this.img){i.preventDefault();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(i){this.disabled||this.disableDragAndDrop||this.img||!t.eventHasFile(i)||(this.fileDraggedOver=!0)},handleDragLeave:function(i){this.fileDraggedOver&&t.eventHasFile(i)&&(this.fileDraggedOver=!1)},handleDragOver:function(t){},handleDrop:function(i){if(this.fileDraggedOver&&t.eventHasFile(i)){this.fileDraggedOver=!1;var e=void 0,a=i.dataTransfer;if(a){if(a.items)for(var o=0,n=a.items.length;o<n;o++){var r=a.items[o];if("file"==r.kind){e=r.getAsFile();break}}else e=a.files[0];e&&this.onNewFileIn(e)}}},move:function(t){if(t){var e=this.imgData.startX,a=this.imgData.startY;this.imgData.startX+=t.x,this.imgData.startY+=t.y,this.preventWhiteSpace&&this.preventMovingToWhiteSpace(),this.imgData.startX===e&&this.imgData.startY===a||(this.$emit(i.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,e){var a=arguments.length>2&&void 0!==arguments[2]?arguments[2]:1;e=e||{x:this.imgData.startX+this.imgData.width/2,y:this.imgData.startY+this.imgData.height/2};var o=this.zoomSpeed*a,n=1e-5*this.realWidth*o,r=1;t?r=1+n:this.imgData.width>10&&(r=1-n);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)*(e.x-this.imgData.startX),u=(r-1)*(e.y-this.imgData.startY);this.imgData.startX=this.imgData.startX-c,this.imgData.startY=this.imgData.startY-u,this.preventWhiteSpace&&this.preventMovingToWhiteSpace(),this.$emit(i.ZOOM_EVENT),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,o=e.startY,n=e.width,r=e.height;window.requestAnimationFrame?requestAnimationFrame(function(){t.paintBackground(),i.drawImage(t.img,a,o,n,r)}):(this.paintBackground(),i.drawImage(this.img,a,o,n,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];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.")}}};return{install:function(t,i){i=i||{};var a=Number(t.version.split(".")[0]);if(a<2)throw new Error("vue-croppa supports vue version 2.0 and above. You are using Vue@"+a+". Please upgrade to the latest version of Vue.");var o=i.componentName||"croppa";t.component(o,e)}}});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.Croppa=e()}(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)}var e={onePointCoord:function(t,e){var i=e.canvas,a=e.quality,n=i.getBoundingClientRect(),o=t.clientX,r=t.clientY;return{x:(o-n.left)*a,y:(r-n.top)*a}},getPointerCoords:function(t,e){var i=void 0;return i=t.touches&&t.touches[0]?t.touches[0]:t.changedTouches&&t.changedTouches[0]?t.changedTouches[0]:t,this.onePointCoord(i,e)},getPinchDistance:function(t,e){var i=t.touches[0],a=t.touches[1],n=this.onePointCoord(i,e),o=this.onePointCoord(a,e);return Math.sqrt(Math.pow(n.x-o.x,2)+Math.pow(n.y-o.y,2))},getPinchCenterCoord:function(t,e){var i=t.touches[0],a=t.touches[1],n=this.onePointCoord(i,e),o=this.onePointCoord(a,e);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,e=["webkit","moz"],i=0;i<e.length&&!window.requestAnimationFrame;++i)window.requestAnimationFrame=window[e[i]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[e[i]+"CancelAnimationFrame"]||window[e[i]+"CancelRequestAnimationFrame"];window.requestAnimationFrame||(window.requestAnimationFrame=function(e){var i=(new Date).getTime(),a=Math.max(0,16.7-(i-t)),n=window.setTimeout(function(){e(i+a)},a);return t=i+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,e,i;HTMLCanvasElement.prototype.toBlob||Object.defineProperty(HTMLCanvasElement.prototype,"toBlob",{value:function(a,n,o){t=atob(this.toDataURL(n,o).split(",")[1]),e=t.length,i=new Uint8Array(e);for(var r=0;r<e;r++)i[r]=t.charCodeAt(r);a(new Blob([i],{type:n||"image/png"}))}})}},eventHasFile:function(t){var e=t.dataTransfer||t.originalEvent.dataTransfer;if(e.types)for(var i=0,a=e.types.length;i<a;i++)if("Files"==e.types[i])return!0;return!1}};Number.isInteger=Number.isInteger||function(t){return"number"==typeof t&&isFinite(t)&&Math.floor(t)===t};var i={INIT_EVENT:"init",FILE_CHOOSE_EVENT:"file-choose",FILE_SIZE_EXCEED_EVENT:"file-size-exceed",FILE_TYPE_MISMATCH_EVENT:"file-type-mismatch",IMAGE_REMOVE_EVENT:"image-remove",MOVE_EVENT:"move",ZOOM_EVENT:"zoom"},a={render:function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("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(e){e.stopPropagation(),e.preventDefault(),t.handleDragEnter(e)},dragleave:function(e){e.stopPropagation(),e.preventDefault(),t.handleDragLeave(e)},dragover:function(e){e.stopPropagation(),e.preventDefault(),t.handleDragOver(e)},drop:function(e){e.stopPropagation(),e.preventDefault(),t.handleDrop(e)}}},[i("input",{ref:"fileInput",attrs:{type:"file",accept:t.accept,disabled:t.disabled,hidden:""},on:{change:t.handleInputChange}}),i("div",{staticClass:"initial",staticStyle:{width:"0",height:"0",visibility:"hidden"}},[t._t("initial")],2),i("canvas",{ref:"canvas",on:{click:function(e){e.stopPropagation(),e.preventDefault(),t.handleClick(e)},touchstart:function(e){e.stopPropagation(),t.handlePointerStart(e)},mousedown:function(e){e.stopPropagation(),e.preventDefault(),t.handlePointerStart(e)},pointerstart:function(e){e.stopPropagation(),e.preventDefault(),t.handlePointerStart(e)},touchend:function(e){e.stopPropagation(),e.preventDefault(),t.handlePointerEnd(e)},touchcancel:function(e){e.stopPropagation(),e.preventDefault(),t.handlePointerEnd(e)},mouseup:function(e){e.stopPropagation(),e.preventDefault(),t.handlePointerEnd(e)},pointerend:function(e){e.stopPropagation(),e.preventDefault(),t.handlePointerEnd(e)},pointercancel:function(e){e.stopPropagation(),e.preventDefault(),t.handlePointerEnd(e)},touchmove:function(e){e.stopPropagation(),t.handlePointerMove(e)},mousemove:function(e){e.stopPropagation(),e.preventDefault(),t.handlePointerMove(e)},pointermove:function(e){e.stopPropagation(),e.preventDefault(),t.handlePointerMove(e)},DOMMouseScroll:function(e){e.stopPropagation(),t.handleWheel(e)},wheel:function(e){e.stopPropagation(),t.handleWheel(e)},mousewheel:function(e){e.stopPropagation(),t.handleWheel(e)}}}),t.showRemoveButton&&t.img?i("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}},[i("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:".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,reverseZoomingGesture:Boolean,reverseScrollToZoom:Boolean,preventWhiteSpace:Boolean,showRemoveButton:{type:Boolean,default:!0},removeButtonColor:{type:String,default:"red"},removeButtonSize:{type:Number},initialImage:String},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,supportTouch:!1,pointerMoved:!1,pointerStartCoord: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.$options._parentListeners["initial-image-load"]||this.$options._parentListeners["initial-image-error"])&&console.warn("initial-image-load and initial-image-error events are already deprecated. Please bind them directly on the <img> tag (the slot)."),this.supportDetection().basic||console.warn("Your browser does not support vue-croppa functionality.")},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.img=null,this.setInitial(),this.$emit(i.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(e){t.move({x:0,y:-e})},moveDownwards:function(e){t.move({x:0,y:e})},moveLeftwards:function(e){t.move({x:-e,y:0})},moveRightwards:function(e){t.move({x:e,y:0})},zoomIn:function(){t.zoom(!0)},zoomOut:function(){t.zoom(!1)},refresh:function(){t.$nextTick(t.init)},hasImage:function(){return!!t.img},reset:function(){console.warn('"reset()" method will be deprecated in the near future due to misnaming. Please use "remove()" instead. They have the same effect.'),t.remove()},remove:this.remove,chooseFile:this.chooseFile,generateDataUrl:this.generateDataUrl,generateBlob:this.generateBlob,promisedBlob:this.promisedBlob,supportDetection:this.supportDetection})},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(),t.textBaseline="middle",t.textAlign="center";var e=this.realWidth*(2/3)/this.placeholder.length,a=this.realPlaceholderFontSize&&0!=this.realPlaceholderFontSize?this.realPlaceholderFontSize:e;t.font=a+"px sans-serif",t.fillStyle=this.placeholderColor&&"default"!=this.placeholderColor?this.placeholderColor:"#606060",t.fillText(this.placeholder,this.realWidth/2,this.realHeight/2);var n=null!=this.img;this.img=null,this.$refs.fileInput.value="",this.imgData={},n&&this.$emit(i.IMAGE_REMOVE_EVENT)},setInitial:function(){var t=this,i=void 0;if(this.$slots.initial&&this.$slots.initial[0]){var a=this.$slots.initial[0],n=a.tag,o=a.elm;"img"==n&&o&&o.src&&(i=o.src)}if(!i&&this.initialImage&&(i=this.initialImage),i){var r=new Image;r.setAttribute("crossOrigin","anonymous"),r.src=i,e.imageLoaded(r)?(this.img=r,this.imgContentInit()):(r.onload=function(){t.img=r,t.imgContentInit()},r.onerror=function(){t.remove()})}else this.remove()},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 e=t.files[0];this.onNewFileIn(e)}},onNewFileIn:function(t){var e=this;if(this.$emit(i.FILE_CHOOSE_EVENT,t),!this.fileSizeIsValid(t))throw this.$emit(i.FILE_SIZE_EXCEED_EVENT,t),new Error("File size exceeds limit which is "+this.fileSizeLimit+" bytes.");if(!this.fileTypeIsValid(t)){this.$emit(i.FILE_TYPE_MISMATCH_EVENT,t);var a=t.type||t.name.toLowerCase().split(".").pop();throw new Error("File type ("+a+") does not match what you specified ("+this.accept+").")}if(void 0!==window.FileReader){var n=new FileReader;n.onload=function(t){var i=t.target.result,a=new Image;a.src=i,a.crossOrigin="Anonymous",a.onload=function(){e.img=a,e.imgContentInit()}},n.readAsDataURL(t)}},fileSizeIsValid:function(t){return!!t&&(!this.fileSizeLimit||0==this.fileSizeLimit||t.size<this.fileSizeLimit)},fileTypeIsValid:function(t){for(var e=this.accept||"image/*",i=e.replace(/\/.*$/,""),a=e.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(/\/.*$/,"")===i)return!0}else if(t.type===r)return!0}return!1},imgContentInit:function(){this.imgData.startX=0,this.imgData.startY=0;var t=this.img.naturalWidth,e=this.img.naturalHeight;if(e/t<this.realHeight/this.realWidth){var i=e/this.realHeight;this.imgData.width=t/i,this.imgData.startX=-(this.imgData.width-this.realWidth)/2,this.imgData.height=this.realHeight}else{var a=t/this.realWidth;this.imgData.height=e/a,this.imgData.startY=-(this.imgData.height-this.realHeight)/2,this.imgData.width=this.realWidth}this.draw()},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.reverseZoomingGesture||this.reverseScrollToZoom,i):(t.wheelDelta>0||t.deltaY<0||t.detail<0)&&this.zoom(!this.reverseZoomingGesture&&!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 e=this.imgData.startX,a=this.imgData.startY;this.imgData.startX+=t.x,this.imgData.startY+=t.y,this.preventWhiteSpace&&this.preventMovingToWhiteSpace(),this.imgData.startX===e&&this.imgData.startY===a||(this.$emit(i.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,e){var a=arguments.length>2&&void 0!==arguments[2]?arguments[2]:1;e=e||{x:this.imgData.startX+this.imgData.width/2,y:this.imgData.startY+this.imgData.height/2};var n=this.zoomSpeed*a,o=1e-5*this.realWidth*n,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 c=this.realHeight/this.imgData.height;this.imgData.height=this.realHeight,this.imgData.width=this.imgData.width*c}}if(s.toFixed(2)!==this.imgData.width.toFixed(2)||h.toFixed(2)!==this.imgData.height.toFixed(2)){var d=(r-1)*(e.x-this.imgData.startX),u=(r-1)*(e.y-this.imgData.startY);this.imgData.startX=this.imgData.startX-d,this.imgData.startY=this.imgData.startY-u,this.preventWhiteSpace&&this.preventMovingToWhiteSpace(),this.$emit(i.ZOOM_EVENT),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,e=this.ctx;if(this.img){var i=this.imgData,a=i.startX,n=i.startY,o=i.width,r=i.height;window.requestAnimationFrame?requestAnimationFrame(function(){t.paintBackground(),e.drawImage(t.img,a,n,o,r)}):(this.paintBackground(),e.drawImage(this.img,a,n,o,r))}},generateDataUrl:function(t){return this.img?this.canvas.toDataURL(t):""},generateBlob:function(t,e,i){if(!this.img)return null;this.canvas.toBlob(t,e,i)},promisedBlob:function(){for(var t=this,e=arguments.length,i=Array(e),a=0;a<e;a++)i[a]=arguments[a];if("undefined"!=typeof Promise)return new Promise(function(e,a){try{t.generateBlob(function(t){e(t)},i)}catch(t){a(t)}});console.warn("No Promise support. Please add Promise polyfill if you want to use this method.")}}},n=Object.getOwnPropertySymbols,o=Object.prototype.hasOwnProperty,r=Object.prototype.propertyIsEnumerable,s=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 e={},i=0;i<10;i++)e["_"+String.fromCharCode(i)]=i;if("0123456789"!==Object.getOwnPropertyNames(e).map(function(t){return e[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(e,i){for(var a,s,h=t(e),l=1;l<arguments.length;l++){a=Object(arguments[l]);for(var c in a)o.call(a,c)&&(h[c]=a[c]);if(n){s=n(a);for(var d=0;d<s.length;d++)r.call(a,s[d])&&(h[s[d]]=a[s[d]])}}return h},h={componentName:"croppa"};return{install:function(t,e){e=s({},h,e);var i=Number(t.version.split(".")[0]);if(i<2)throw new Error("vue-croppa supports vue version 2.0 and above. You are using Vue@"+i+". Please upgrade to the latest version of Vue.");var n=e.componentName||"croppa";t.component(n,a)},component:a}});

package.json

 {
   "name": "vue-croppa",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "A simple straightforward customizable lightweight mobile-friendly image cropper for Vue 2.0.",
@@ -75,3 +75,5 @@ "main": "dist/vue-croppa.js",
   },
-  "dependencies": {}
+  "dependencies": {
+    "object-assign": "^4.1.1"
+  }
 }

README.md

@@ -9,3 +9,3 @@ # vue-croppa
 - **Highly customizable**: You can almost customize anything except the core functionalities
-- **Lightweight**: 18kb in total
+- **Lightweight**: 20kb in total
 - **Mobile-friendly**: Supports drag to move and pinch with two fingers to zoom on mobile devices
@@ -47,2 +47,3 @@
         :remove-button-size="0"
+        :initial-image="'path/to/initial-image.png'"
         @init="handleCroppaInit"
@@ -99,3 +100,2 @@ @file-choose="handleCroppaFileChoose"
 ```
-
 ### 2. Now you have it. The simplest usage:
@@ -106,2 +106,26 @@ ```html
 
+#### NOTE: 
+- Since v0.1.0, you can change the default component name to anything you want.
+
+```js
+import Vue from 'vue'
+import Croppa from 'vue-croppa'
+
+Vue.use(Croppa, { componentName: 'my-image-cropper' })
+```
+
+```html
+<my-image-cropper v-model="myCroppa"></my-image-cropper>
+```
+
+- Since v0.1.1, you can get the component object with `Croppa.component`. This is useful when you want to register the component by yourself manually.
+
+```js
+Vue.component('croppa', Croppa.component)
+```
+```js
+// Register async component (Webpack 2 + ES2015 Example). More about async component: https://vuejs.org/v2/guide/components.html#Async-Components
+Vue.component('croppa', () => import(Croppa.component))
+```
+
 ## Documentation
@@ -163,3 +187,3 @@
 - type: same as what `accept` attribute of HTML `input` element takes.
-- default: `'.jpg,.png,.gif,.bmp,.webp,.svg,.tiff'`
+- default: `'.jpg,.jpeg,.png,.gif,.bmp,.webp,.svg,.tiff'`
 
@@ -371,4 +395,2 @@ #### file-size-limit
 - [x] SSR compatibility.
-- [ ] Make container optionally resizable.
-- [ ] Make default position customizable.
 - [x] Deprecation warning of `reset()` method.
@@ -378,1 +400,4 @@ - [x] Ignore non-file dragging.
 - [x] Replace `for of` with tranditional `for` loop for better compatibility. 
+- [x] Expose component itself.
+- [ ] Make container optionally resizable.
+- [ ] Make default position customizable.

src/main.js

@@ -1,6 +0,11 @@
-import cropper from './cropper.vue'
+import component from './cropper.vue'
+import assign from 'object-assign'
 
+const defaultOptions = {
+  componentName: 'croppa'
+}
+
 const VueCroppa = {
   install: function (Vue, options) {
-    options = options || {}
+    options = assign({}, defaultOptions, options)
     let version = Number(Vue.version.split('.')[0])
@@ -11,6 +16,9 @@ if (version < 2) {
     let componentName = options.componentName || 'croppa'
-    Vue.component(componentName, cropper)
-  }
+
+    // registration
+    Vue.component(componentName, component)
+  },
+
+  component
 }
-
 export default VueCroppa

src/props.js

@@ -54,3 +54,3 @@ Number.isInteger = Number.isInteger || function (value) {
     type: String,
-    default: '.jpg,.png,.gif,.bmp,.webp,.svg,.tiff'
+    default: '.jpg,.jpeg,.png,.gif,.bmp,.webp,.svg,.tiff'
   },
@@ -57,0 +57,0 @@ fileSizeLimit: {

No alert changes

Improved metrics

Total package byte prevSize

275001

increased by1.54%

Lines of code

5936

increased by1.54%

Number of lines in readme file

397

increased by6.72%

Worsened metrics

Dependency count

1

increased byInfinity%

Dependency changes

• + Addedobject-assign@^4.1.1

• + Addedobject-assign@4.1.1(transitive)