Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

vue-croppa

Package Overview
Dependencies
Maintainers
1
Versions
60
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-croppa - npm Package Compare versions

Comparing version 0.0.18 to 0.0.19

48

dist/vue-croppa.js
/*
* vue-croppa v0.0.18
* vue-croppa v0.0.19
* https://github.com/zhanziyang/vue-croppa

@@ -96,2 +96,3 @@ *

disabled: Boolean,
disableDragAndDrop: Boolean,
disableClickToChoose: Boolean,

@@ -125,3 +126,11 @@ disableDragToMove: Boolean,

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('div', { staticClass: "initial", staticStyle: { "width": "0", "height": "0", "visibility": "hidden" } }, [_vm._t("initial")], 2), _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' : '') + ' ' + (_vm.fileDraggedOver ? 'croppa--dropzone' : ''), on: { "dragenter": function dragenter($event) {
$event.stopPropagation();$event.preventDefault();_vm.handleDragEnter($event);
}, "dragleave": function dragleave($event) {
$event.stopPropagation();$event.preventDefault();_vm.handleDragLeave($event);
}, "dragover": function dragover($event) {
$event.stopPropagation();$event.preventDefault();_vm.handleDragOver($event);
}, "drop": function drop($event) {
$event.stopPropagation();$event.preventDefault();_vm.handleDrop($event);
} } }, [_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();

@@ -152,2 +161,4 @@ }, "touchstart": function touchstart($event) {

$event.stopPropagation();$event.preventDefault();_vm.handleWheel($event);
}, "wheel": function wheel($event) {
$event.stopPropagation();$event.preventDefault();_vm.handleWheel($event);
}, "mousewheel": function mousewheel($event) {

@@ -173,3 +184,4 @@ $event.stopPropagation();$event.preventDefault();_vm.handleWheel($event);

imgData: {},
dataUrl: ''
dataUrl: '',
fileDraggedOver: false
};

@@ -328,4 +340,2 @@ },

handleInputChange: function handleInputChange() {
var _this3 = this;
var input = this.$refs.fileInput;

@@ -335,2 +345,7 @@ if (!input.files.length) return;

var file = input.files[0];
this.onNewFileIn(file);
},
onNewFileIn: function onNewFileIn(file) {
var _this3 = this;
this.$emit(FILE_CHOOSE_EVENT, file);

@@ -435,10 +450,25 @@ if (!this.fileSizeIsValid(file)) {

var coord = u.getPointerCoords(evt, this);
if (evt.wheelDelta < 0 || evt.detail < 0) {
// 手指向上
if (evt.wheelDelta < 0 || evt.deltaY > 0 || evt.detail > 0) {
this.zoom(this.reverseZoomingGesture, coord);
} else if (evt.wheelDelta > 0 || evt.detail > 0) {
// 手指向下
} else if (evt.wheelDelta > 0 || evt.deltaY < 0 || evt.detail < 0) {
this.zoom(!this.reverseZoomingGesture, coord);
}
},
handleDragEnter: function handleDragEnter(evt) {
if (this.disabled || this.disableDragAndDrop || this.img) return;
this.fileDraggedOver = true;
console.log('enter');
},
handleDragLeave: function handleDragLeave(evt) {
if (this.disabled || this.disableDragAndDrop || this.img) return;
this.fileDraggedOver = false;
},
handleDragOver: function handleDragOver(evt) {},
handleDrop: function handleDrop(evt) {
if (this.disabled || this.disableDragAndDrop || this.img) return;
if (!evt.dataTransfer || !evt.dataTransfer.files.length) return;
this.fileDraggedOver = false;
var file = evt.dataTransfer.files[0];
this.onNewFileIn(file);
},
move: function move(offset) {

@@ -445,0 +475,0 @@ if (!offset) return;

4

dist/vue-croppa.min.js
/*
* vue-croppa v0.0.18
* vue-croppa v0.0.19
* 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={getPointerCoords:function(t,i){var e=i.canvas,a=i.quality,n=e.getBoundingClientRect(),o=t.touches?t.touches[0].clientX:t.clientX,s=t.touches?t.touches[0].clientY:t.clientY;return{x:(o-n.left)*a,y:(s-n.top)*a}},imageLoaded:function(t){return t.complete&&0!==t.naturalWidth}};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:""}},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: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;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);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.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&&this.img&&!(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,s=i[Symbol.iterator]();!(e=(o=s.next()).done);e=!0){var h=o.value;document.addEventListener(h,this.handlePointerEnd)}}catch(t){a=!0,n=t}finally{try{!e&&s.return&&s.return()}finally{if(a)throw n}}}},handlePointerEnd:function(t){!this.disabled&&this.img&&(this.dragging=!1,this.lastMovingCoord=null)},handlePointerMove:function(i){if(!this.disabled&&!this.disableDragToMove&&this.img&&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&&this.img){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 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.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)},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,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,r=t.touches?t.touches[0].clientY:t.clientY;return{x:(o-n.left)*a,y:(r-n.top)*a}},imageLoaded:function(t){return t.complete&&0!==t.naturalWidth}};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":"")+" "+(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){!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)},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:{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,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:"",fileDraggedOver:!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: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;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);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.img||this.disableClickToChoose||this.$refs.fileInput.click()},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(t){if(!this.disabled&&this.img&&!(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,r=i[Symbol.iterator]();!(e=(o=r.next()).done);e=!0){var s=o.value;document.addEventListener(s,this.handlePointerEnd)}}catch(t){a=!0,n=t}finally{try{!e&&r.return&&r.return()}finally{if(a)throw n}}}},handlePointerEnd:function(t){!this.disabled&&this.img&&(this.dragging=!1,this.lastMovingCoord=null)},handlePointerMove:function(i){if(!this.disabled&&!this.disableDragToMove&&this.img&&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&&this.img){var e=t.getPointerCoords(i,this);i.wheelDelta<0||i.deltaY>0||i.detail>0?this.zoom(this.reverseZoomingGesture,e):(i.wheelDelta>0||i.deltaY<0||i.detail<0)&&this.zoom(!this.reverseZoomingGesture,e)}},handleDragEnter:function(t){this.disabled||this.disableDragAndDrop||this.img||(this.fileDraggedOver=!0,console.log("enter"))},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=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 r=this.realWidth/this.imgData.width;this.imgData.width=this.realWidth,this.imgData.height=this.imgData.height*r}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)},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,e){t.component("croppa",i)}}});
{
"name": "vue-croppa",
"version": "0.0.18",
"version": "0.0.19",
"description": "A simple straightforward customizable image cropper for vue.js.",

@@ -5,0 +5,0 @@ "main": "dist/vue-croppa.js",

@@ -22,2 +22,3 @@ # vue-croppa

:disabled="false"
:disable-drag-and-drop="false"
:disable-click-to-choose="false"

@@ -155,4 +156,9 @@ :disable-drag-to-move="false"

#### disable-drag-and-drop
Disables the default "drag and drop a file" user interaction. You can instead trigger the file chooser window programmatically by "click to choose" functionality or invoking `chooseFile()` method.
- type: `boolean`
- default: `false`
#### disable-click-to-choose
Disables the default "click to choose an image" user interaction. You can instead trigger the file chooser window programmatically by invoking `chooseFile()` method.
Disables the default "click to choose an image" user interaction. You can instead trigger the file chooser window programmatically by "drag and drop" functionality or invoking `chooseFile()` method.
- type: `boolean`

@@ -270,3 +276,3 @@ - default: `false`

#### file-choose
- emitted when user Choose an image from the poppup window.
- emitted when user choose an image from the poppup window or "drag and drop" a file into the container.
- handler(file)

@@ -273,0 +279,0 @@ - `file` is a file object - same as what `getChosenFile()` returns.

@@ -12,2 +12,3 @@ const json = require('rollup-plugin-json')

const fs = require('fs')
const { version } = require('./package.json')

@@ -25,3 +26,3 @@ let production = /^production/.test(process.env.BUILD)

/*
* vue-croppa v0.0.18
* vue-croppa v${version}
* https://github.com/zhanziyang/vue-croppa

@@ -28,0 +29,0 @@ *

@@ -64,2 +64,3 @@ Number.isInteger = Number.isInteger || function (value) {

disabled: Boolean,
disableDragAndDrop: Boolean,
disableClickToChoose: Boolean,

@@ -66,0 +67,0 @@ disableDragToMove: Boolean,

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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc