Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
vue-croppa
Advanced tools
vue-croppa - npm Package Compare versions
Comparing version 0.0.1 to 0.0.2
@@ -1,410 +0,1 @@ | ||
| (function (global, factory) { | ||
| typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : | ||
| typeof define === 'function' && define.amd ? define(factory) : | ||
| (global.Croppa = factory()); | ||
| }(this, (function () { 'use strict'; | ||
| var u = { | ||
| getPointerCoords: function getPointerCoords(evt, cropperVM) { | ||
| var canvas = cropperVM.canvas, | ||
| quality = cropperVM.quality; | ||
| var rect = canvas.getBoundingClientRect(); | ||
| var clientX = evt.touches ? evt.touches[0].clientX : evt.clientX; | ||
| var clientY = evt.touches ? evt.touches[0].clientY : evt.clientY; | ||
| return { | ||
| x: (clientX - rect.left) * quality, | ||
| y: (clientY - rect.top) * quality | ||
| }; | ||
| } | ||
| }; | ||
| /** | ||
| * Checks if `value` is the | ||
| * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types) | ||
| * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`) | ||
| * | ||
| * @static | ||
| * @memberOf _ | ||
| * @since 0.1.0 | ||
| * @category Lang | ||
| * @param {*} value The value to check. | ||
| * @returns {boolean} Returns `true` if `value` is an object, else `false`. | ||
| * @example | ||
| * | ||
| * _.isObject({}); | ||
| * // => true | ||
| * | ||
| * _.isObject([1, 2, 3]); | ||
| * // => true | ||
| * | ||
| * _.isObject(_.noop); | ||
| * // => true | ||
| * | ||
| * _.isObject(null); | ||
| * // => false | ||
| */ | ||
| var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {}; | ||
| var freeGlobal = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal; | ||
| var _freeGlobal = freeGlobal; | ||
| var freeSelf = typeof self == 'object' && self && self.Object === Object && self; | ||
| /** Used as a reference to the global object. */ | ||
| var root = _freeGlobal || freeSelf || Function('return this')(); | ||
| /** Used for built-in method references. */ | ||
| /** | ||
| * Checks if `value` is object-like. A value is object-like if it's not `null` | ||
| * and has a `typeof` result of "object". | ||
| * | ||
| * @static | ||
| * @memberOf _ | ||
| * @since 4.0.0 | ||
| * @category Lang | ||
| * @param {*} value The value to check. | ||
| * @returns {boolean} Returns `true` if `value` is object-like, else `false`. | ||
| * @example | ||
| * | ||
| * _.isObjectLike({}); | ||
| * // => true | ||
| * | ||
| * _.isObjectLike([1, 2, 3]); | ||
| * // => true | ||
| * | ||
| * _.isObjectLike(_.noop); | ||
| * // => false | ||
| * | ||
| * _.isObjectLike(null); | ||
| * // => false | ||
| */ | ||
| 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' : '') }, [_c('input', { ref: "fileInput", attrs: { "type": "file", "accept": "image/*", "hidden": "" }, on: { "change": _vm.handleInputChange } }), _c('canvas', { ref: "canvas", on: { "click": _vm.selectFile, "touchstart": function touchstart($event) { | ||
| $event.stopPropagation();$event.preventDefault();_vm.handlePointerStart($event); | ||
| }, "mousedown": function mousedown($event) { | ||
| $event.stopPropagation();$event.preventDefault();_vm.handlePointerStart($event); | ||
| }, "pointerstart": function pointerstart($event) { | ||
| $event.stopPropagation();$event.preventDefault();_vm.handlePointerStart($event); | ||
| }, "touchend": function touchend($event) { | ||
| $event.stopPropagation();$event.preventDefault();_vm.handlePointerEnd($event); | ||
| }, "touchcancel": function touchcancel($event) { | ||
| $event.stopPropagation();$event.preventDefault();_vm.handlePointerEnd($event); | ||
| }, "mouseup": function mouseup($event) { | ||
| $event.stopPropagation();$event.preventDefault();_vm.handlePointerEnd($event); | ||
| }, "pointerend": function pointerend($event) { | ||
| $event.stopPropagation();$event.preventDefault();_vm.handlePointerEnd($event); | ||
| }, "pointercancel": function pointercancel($event) { | ||
| $event.stopPropagation();$event.preventDefault();_vm.handlePointerEnd($event); | ||
| }, "touchmove": function touchmove($event) { | ||
| $event.stopPropagation();$event.preventDefault();_vm.handlePointerMove($event); | ||
| }, "mousemove": function mousemove($event) { | ||
| $event.stopPropagation();$event.preventDefault();_vm.handlePointerMove($event); | ||
| }, "pointermove": function pointermove($event) { | ||
| $event.stopPropagation();$event.preventDefault();_vm.handlePointerMove($event); | ||
| }, "DOMMouseScroll": function DOMMouseScroll($event) { | ||
| $event.stopPropagation();$event.preventDefault();_vm.handleWheel($event); | ||
| }, "mousewheel": function mousewheel($event) { | ||
| $event.stopPropagation();$event.preventDefault();_vm.handleWheel($event); | ||
| } } }), _vm.showRemoveButton && _vm.img ? _c('svg', { staticClass: "icon icon-remove", style: 'top: -' + _vm.height / 40 + 'px; right: -' + _vm.width / 40 + 'px', attrs: { "t": "1497460039530", "viewBox": "0 0 1024 1024", "version": "1.1", "xmlns": "http://www.w3.org/2000/svg", "p-id": "1074", "xmlns:xlink": "http://www.w3.org/1999/xlink", "width": _vm.width / 10, "height": _vm.width / 10 }, on: { "click": _vm.unset } }, [_c('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", "p-id": "1075", "fill": "red" } })]) : _vm._e()]); | ||
| }, staticRenderFns: [], | ||
| model: { | ||
| prop: 'value', | ||
| event: 'change' | ||
| }, | ||
| props: { | ||
| value: Object, | ||
| width: Number, | ||
| height: Number, | ||
| placeholder: String, | ||
| placeholderColor: String, | ||
| placeholderFontSize: Number, | ||
| canvasColor: String, | ||
| quality: { | ||
| default: 2, | ||
| type: Number | ||
| }, | ||
| zoomSpeed: { | ||
| default: 3, | ||
| type: Number, | ||
| validator: function validator(val) { | ||
| return val > 0; | ||
| } | ||
| }, | ||
| reverseZoomingGesture: Boolean, | ||
| preventWhiteSpace: Boolean, | ||
| showRemoveButton: Boolean | ||
| }, | ||
| data: function data() { | ||
| return { | ||
| instance: null, | ||
| canvas: null, | ||
| ctx: null, | ||
| img: null, | ||
| dragging: false, | ||
| lastMovingCoord: null, | ||
| imgData: {}, | ||
| dataUrl: '' | ||
| }; | ||
| }, | ||
| computed: { | ||
| canvasWidth: function canvasWidth() { | ||
| return this.width * this.quality; | ||
| }, | ||
| canvasHeight: function canvasHeight() { | ||
| return this.height * this.quality; | ||
| } | ||
| }, | ||
| mounted: function mounted() { | ||
| this.init(); | ||
| }, | ||
| watch: { | ||
| value: function value(val) { | ||
| this.instance = val; | ||
| }, | ||
| canvasWidth: 'init', | ||
| canvasHeight: 'init', | ||
| canvasColor: 'init', | ||
| placeholder: 'init', | ||
| placeholderColor: 'init', | ||
| placeholderFontSize: 'init', | ||
| preventWhiteSpace: 'imgContentInit' | ||
| }, | ||
| methods: { | ||
| init: function init() { | ||
| var _this = this; | ||
| this.canvas = this.$refs.canvas; | ||
| this.canvas.width = this.canvasWidth; | ||
| this.canvas.height = this.canvasHeight; | ||
| this.canvas.style.backgroundColor = this.canvasColor == 'default' ? '#e6e6e6' : this.canvasColor || '#e6e6e6'; | ||
| this.canvas.style.width = this.width + 'px'; | ||
| this.canvas.style.height = this.height + 'px'; | ||
| this.ctx = this.canvas.getContext('2d'); | ||
| this.unset(); | ||
| this.$emit('change', { | ||
| getCanvas: function getCanvas() { | ||
| return _this.canvas; | ||
| }, | ||
| getContext: function getContext() { | ||
| return _this.ctx; | ||
| }, | ||
| getImage: function getImage() { | ||
| return _this.img; | ||
| }, | ||
| getImageData: function getImageData() { | ||
| return _this.imgData; | ||
| }, | ||
| reset: this.unset, | ||
| selectFile: this.selectFile, | ||
| generateDataUrl: this.generateDataUrl | ||
| }); | ||
| }, | ||
| unset: function unset() { | ||
| var ctx = this.ctx; | ||
| ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight); | ||
| ctx.textBaseline = 'middle'; | ||
| ctx.textAlign = 'center'; | ||
| var defaultFontSize = this.canvasWidth / 1.5 / this.placeholder.length; | ||
| var fontSize = this.placeholderFontSize == 0 ? defaultFontSize : this.placeholderFontSize || defaultFontSize; | ||
| ctx.font = fontSize + 'px sans-serif'; | ||
| ctx.fillStyle = this.placeholderColor == 'default' ? '#606060' : this.placeholderColor || '#606060'; | ||
| ctx.fillText(this.placeholder, this.canvasWidth / 2, this.canvasHeight / 2); | ||
| this.img = null; | ||
| this.$refs.fileInput.value = ''; | ||
| this.imgData = {}; | ||
| }, | ||
| selectFile: function selectFile() { | ||
| if (this.img) return; | ||
| // this.$refs.fileInput.value = '' | ||
| this.$refs.fileInput.click(); | ||
| }, | ||
| handleInputChange: function handleInputChange() { | ||
| var _this2 = this; | ||
| var input = this.$refs.fileInput; | ||
| if (!input.files.length) return; | ||
| var file = input.files[0]; | ||
| var fd = new FileReader(); | ||
| fd.onload = function (e) { | ||
| var fileData = e.target.result; | ||
| var img = new Image(); | ||
| img.src = fileData; | ||
| img.onload = function () { | ||
| _this2.img = img; | ||
| _this2.imgContentInit(); | ||
| }; | ||
| }; | ||
| fd.readAsDataURL(file); | ||
| }, | ||
| imgContentInit: function imgContentInit() { | ||
| this.imgData.startX = 0; | ||
| this.imgData.startY = 0; | ||
| var imgWidth = this.img.naturalWidth; | ||
| var imgHeight = this.img.naturalHeight; | ||
| var imgRatio = imgHeight / imgWidth; | ||
| var canvasRatio = this.canvasHeight / this.canvasWidth; | ||
| if (imgRatio < canvasRatio) { | ||
| var ratio = imgHeight / this.canvasHeight; | ||
| this.imgData.width = imgWidth / ratio; | ||
| this.imgData.startX = -(this.imgData.width - this.canvasWidth) / 2; | ||
| this.imgData.height = this.canvasHeight; | ||
| } else { | ||
| var _ratio = imgWidth / this.canvasWidth; | ||
| this.imgData.height = imgHeight / _ratio; | ||
| this.imgData.startY = -(this.imgData.height - this.canvasHeight) / 2; | ||
| this.imgData.width = this.canvasWidth; | ||
| } | ||
| this.draw(); | ||
| }, | ||
| handlePointerStart: function handlePointerStart(evt) { | ||
| if (evt.which && evt.which > 1) return; | ||
| this.dragging = true; | ||
| if (document) { | ||
| var cancelEvents = ['mouseup', 'touchend', 'touchcancel', 'pointerend', 'pointercancel']; | ||
| var _iteratorNormalCompletion = true; | ||
| var _didIteratorError = false; | ||
| var _iteratorError = undefined; | ||
| try { | ||
| for (var _iterator = cancelEvents[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) { | ||
| var e = _step.value; | ||
| document.addEventListener(e, this.handlePointerEnd); | ||
| } | ||
| } catch (err) { | ||
| _didIteratorError = true; | ||
| _iteratorError = err; | ||
| } finally { | ||
| try { | ||
| if (!_iteratorNormalCompletion && _iterator.return) { | ||
| _iterator.return(); | ||
| } | ||
| } finally { | ||
| if (_didIteratorError) { | ||
| throw _iteratorError; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| }, | ||
| handlePointerEnd: function handlePointerEnd(evt) { | ||
| this.dragging = false; | ||
| this.lastMovingCoord = null; | ||
| }, | ||
| handlePointerMove: function handlePointerMove(evt) { | ||
| if (!this.dragging) return; | ||
| var coord = u.getPointerCoords(evt, this); | ||
| if (this.lastMovingCoord) { | ||
| this.move({ | ||
| x: coord.x - this.lastMovingCoord.x, | ||
| y: coord.y - this.lastMovingCoord.y | ||
| }); | ||
| } | ||
| this.lastMovingCoord = coord; | ||
| }, | ||
| handleWheel: function handleWheel(evt) { | ||
| var coord = u.getPointerCoords(evt, this); | ||
| if (evt.wheelDelta < 0 || evt.detail < 0) { | ||
| // 手指向上 | ||
| this.zoom(this.reverseZoomingGesture, coord); | ||
| } else if (evt.wheelDelta > 0 || evt.detail > 0) { | ||
| // 手指向下 | ||
| this.zoom(!this.reverseZoomingGesture, coord); | ||
| } | ||
| }, | ||
| move: function move(offset) { | ||
| if (!offset) return; | ||
| this.imgData.startX += offset.x; | ||
| this.imgData.startY += offset.y; | ||
| if (this.preventWhiteSpace) { | ||
| this.preventMovingToWhiteSpace(); | ||
| } | ||
| this.draw(); | ||
| }, | ||
| preventMovingToWhiteSpace: function preventMovingToWhiteSpace() { | ||
| if (this.imgData.startX > 0) { | ||
| this.imgData.startX = 0; | ||
| } | ||
| if (this.imgData.startY > 0) { | ||
| this.imgData.startY = 0; | ||
| } | ||
| if (this.canvasWidth - this.imgData.startX > this.imgData.width) { | ||
| this.imgData.startX = -(this.imgData.width - this.canvasWidth); | ||
| } | ||
| if (this.canvasHeight - this.imgData.startY > this.imgData.height) { | ||
| this.imgData.startY = -(this.imgData.height - this.canvasHeight); | ||
| } | ||
| }, | ||
| zoom: function zoom(zoomIn, pos) { | ||
| var speed = this.canvasWidth / 100000 * this.zoomSpeed; | ||
| var x = 1; | ||
| if (zoomIn) { | ||
| x = 1 + speed; | ||
| } else if (this.imgData.width > 20) { | ||
| x = 1 - speed; | ||
| } | ||
| this.imgData.width = this.imgData.width * x; | ||
| this.imgData.height = this.imgData.height * x; | ||
| var offsetX = (x - 1) * (pos.x - this.imgData.startX); | ||
| var offsetY = (x - 1) * (pos.y - this.imgData.startY); | ||
| this.imgData.startX = this.imgData.startX - offsetX; | ||
| this.imgData.startY = this.imgData.startY - offsetY; | ||
| if (this.preventWhiteSpace) { | ||
| if (this.imgData.width < this.canvasWidth) { | ||
| var _x = this.canvasWidth / this.imgData.width; | ||
| this.imgData.width = this.canvasWidth; | ||
| this.imgData.height = this.imgData.height * _x; | ||
| } | ||
| if (this.imgData.height < this.canvasHeight) { | ||
| var _x2 = this.canvasHeight / this.imgData.height; | ||
| this.imgData.height = this.canvasHeight; | ||
| this.imgData.width = this.imgData.width * _x2; | ||
| } | ||
| this.preventMovingToWhiteSpace(); | ||
| } | ||
| this.draw(); | ||
| }, | ||
| draw: function draw() { | ||
| var ctx = this.ctx; | ||
| if (!this.img) return; | ||
| var _imgData = this.imgData, | ||
| startX = _imgData.startX, | ||
| startY = _imgData.startY, | ||
| width = _imgData.width, | ||
| height = _imgData.height; | ||
| ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight); | ||
| ctx.drawImage(this.img, startX, startY, width, height); | ||
| }, | ||
| generateDataUrl: function generateDataUrl() { | ||
| if (!this.img) return ''; | ||
| return this.canvas.toDataURL(); | ||
| } | ||
| } | ||
| }; | ||
| var VueCroppa = { | ||
| install: function install(Vue, options) { | ||
| Vue.component('croppa', cropper); | ||
| } | ||
| }; | ||
| return VueCroppa; | ||
| }))); | ||
| !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(),h=t.touches?t.touches[0].clientX:t.clientX,o=t.touches?t.touches[0].clientY:t.clientY;return{x:(h-n.left)*a,y:(o-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":"")},[e("input",{ref:"fileInput",attrs:{type:"file",accept:t.inputAccept,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 File"},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&&t<=5}},zoomSpeed:{default:3,type:Number,validator:function(t){return t>0}},inputAccept:{type:String,default:"image/*"},fileSizeLimit:{type:Number,default:0,validator:function(t){return t>=0}},disabled: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}},mounted:function(){this.init()},watch:{value:function(t){this.instance=t},realWidth:"init",realHeight:"init",canvasColor:"init",placeholder:"init",placeholderColor:"init",placeholderFontSize:"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.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]},getImage:function(){return t.img},getActuallImageSize: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})},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.placeholderFontSize&&0!=this.placeholderFontSize?this.placeholderFontSize: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.$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||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 h,o=i[Symbol.iterator]();!(e=(h=o.next()).done);e=!0){var r=h.value;document.addEventListener(r,this.handlePointerEnd)}}catch(t){a=!0,n=t}finally{try{!e&&o.return&&o.return()}finally{if(a)throw n}}}},handlePointerEnd:function(t){this.disabled||(this.dragging=!1,this.lastMovingCoord=null)},handlePointerMove:function(i){if(!this.disabled&&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){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),h=(a-1)*(i.y-this.imgData.startY);if(this.imgData.startX=this.imgData.startX-n,this.imgData.startY=this.imgData.startY-h,this.preventWhiteSpace){if(this.imgData.width<this.realWidth){var o=this.realWidth/this.imgData.width;this.imgData.width=this.realWidth,this.imgData.height=this.imgData.height*o}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,h=i.height;t.clearRect(0,0,this.realWidth,this.realHeight),this.paintBackground(),t.drawImage(this.img,e,a,n,h)}},generateDataUrl:function(){return this.img?this.canvas.toDataURL():""}}};return{install:function(t,e){t.component("croppa",i)}}}); |
| { | ||
| "name": "vue-croppa", | ||
| "version": "0.0.1", | ||
| "version": "0.0.2", | ||
| "description": "A simple straightforward customizable image cropper for vue.js.", | ||
@@ -8,3 +8,3 @@ "main": "dist/vue-croppa.js", | ||
| "test": "echo \"Error: no test specified\" && exit 1", | ||
| "build": "rollup -c", | ||
| "build": "rollup -c --environment BUILD:production", | ||
| "dev": "rollup -c -w" | ||
@@ -34,10 +34,22 @@ }, | ||
| "devDependencies": { | ||
| "autoprefixer": "^7.1.1", | ||
| "babel-eslint": "^7.2.3", | ||
| "babel-plugin-external-helpers": "^6.22.0", | ||
| "babel-preset-latest": "^6.24.1", | ||
| "eslint": "^3.19.0", | ||
| "eslint-config-standard": "^10.2.1", | ||
| "eslint-plugin-html": "^3.0.0", | ||
| "eslint-plugin-import": "^2.3.0", | ||
| "eslint-plugin-node": "^5.0.0", | ||
| "eslint-plugin-promise": "^3.5.0", | ||
| "eslint-plugin-standard": "^3.0.1", | ||
| "postcss": "^6.0.2", | ||
| "rollup": "^0.43.0", | ||
| "rollup-plugin-babel": "^2.7.1", | ||
| "rollup-plugin-commonjs": "^8.0.2", | ||
| "rollup-plugin-eslint": "^3.0.0", | ||
| "rollup-plugin-json": "^2.3.0", | ||
| "rollup-plugin-node-resolve": "^3.0.0", | ||
| "rollup-plugin-stylus": "^1.0.3", | ||
| "rollup-plugin-uglify": "^2.0.1", | ||
| "rollup-plugin-vue": "^2.4.0", | ||
@@ -47,3 +59,3 @@ "rollup-watch": "^4.0.0", | ||
| "url-loader": "^0.5.9", | ||
| "eslint": "^4.0.0" | ||
| "vue": "^2.3.4" | ||
| }, | ||
@@ -53,2 +65,2 @@ "dependencies": { | ||
| } | ||
| } | ||
| } |
@@ -6,36 +6,36 @@ const json = require('rollup-plugin-json') | ||
| const vue = require('rollup-plugin-vue') | ||
| const stylus = require('rollup-plugin-stylus') | ||
| const eslint = require('rollup-plugin-eslint') | ||
| const uglify = require('rollup-plugin-uglify') | ||
| const autoprefixer = require('autoprefixer') | ||
| const postcss = require('postcss') | ||
| const fs = require('fs') | ||
| module.exports = [ | ||
| { | ||
| entry: 'src/main.js', | ||
| format: 'umd', | ||
| moduleName: 'Croppa', | ||
| dest: 'dist/vue-croppa.js', | ||
| plugins: [ | ||
| commentjs(), | ||
| resolve(), | ||
| json(), | ||
| vue(), | ||
| babel({ | ||
| exclude: 'node_modules/**' // only transpile our source code | ||
| }) | ||
| ] | ||
| }, | ||
| { | ||
| entry: 'src/main.js', | ||
| format: 'umd', | ||
| moduleName: 'Croppa', | ||
| dest: 'example/croppa/vue-croppa.js', | ||
| sourceMap: true, | ||
| plugins: [ | ||
| commentjs(), | ||
| resolve(), | ||
| json(), | ||
| vue(), | ||
| babel({ | ||
| exclude: 'node_modules/**' // only transpile our source code | ||
| }) | ||
| ] | ||
| } | ||
| ] | ||
| module.exports = { | ||
| entry: 'src/main.js', | ||
| dest: `${process.env.BUILD === 'production' ? 'dist' : 'docs/croppa'}/vue-croppa.js`, | ||
| format: 'umd', | ||
| moduleName: 'Croppa', | ||
| sourceMap: process.env.BUILD === 'production' ? false : 'inline', | ||
| plugins: [ | ||
| commentjs(), | ||
| resolve(), | ||
| json(), | ||
| vue({ | ||
| css: function (css, allStyles, compile) { | ||
| postcss([autoprefixer]).process(css).then(function (result) { | ||
| result.warnings().forEach(function (warn) { | ||
| console.warn(warn.toString()) | ||
| }) | ||
| fs.writeFile(`${process.env.BUILD === 'production' ? 'dist' : 'docs/croppa'}/vue-croppa.css`, result.css, (err) => { | ||
| if (err) throw err | ||
| }) | ||
| }) | ||
| } | ||
| }), | ||
| (process.env.BUILD === 'production' && eslint()), | ||
| babel({ | ||
| exclude: 'node_modules/**' // only transpile our source code | ||
| }), | ||
| (process.env.BUILD === 'production' && uglify()) | ||
| ] | ||
| } |
@@ -1,2 +0,1 @@ | ||
| import { version } from '../package.json' | ||
| import cropper from './cropper.vue' | ||
@@ -3,0 +2,0 @@ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Environment variable access
Supply chain riskPackage accesses environment variables, which may be a sign of credential stuffing or data theft.
Found 1 instance in 1 package
Filesystem access
Supply chain riskAccesses the file system, and could potentially read sensitive data.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Number of package files
- increased by16.67%
14
Worsened metrics
- Total package byte prevSize
- decreased by-0.35%
171186
- Dev dependency count
- increased by92.31%
25
- Lines of code
- decreased by-5.6%
4182
- Number of low supply chain risk alerts
- increased byInfinity%
6
No dependency changes