vue-polygon-cropper - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

dist/PolygonCropper.esm.js

@@ -14,3 +14,2 @@ //
 //
-//
 
@@ -24,2 +23,10 @@ var script = {
 		},
+		width: {
+			type: Number,
+			default: 0
+		},
+		height: {
+			type: Number,
+			default: 0
+		},
 		wrapperClass: {
@@ -49,3 +56,2 @@ type: String,
 			editing: 1,
-			points: [],
 			imageObj: null,
@@ -56,12 +62,15 @@ positionX: '',
 			oldPositionY: '',
-			height: '',
-			width: '',
 			ctx: null,
 			imageCanvas: null,
-			redo_list: [],
-			undo_list: [],
-			redo_pointer: [],
-			undo_pointer: [],
-			current_pointer: [],
-			resultImage: null
+			redoMarks: [],
+			undoMarks: [],
+			currentMarks: [],
+			redoList: [],
+			undoList: [],
+			redoPointer: [],
+			undoPointer: [],
+			currentPointer: [],
+			resultImage: null,
+			imgWidth: 0,
+			imgHeight: 0
 		};
@@ -80,18 +89,29 @@ },
 			img.onload = function () {
-				this$1.width = img.width;
-				this$1.height = img.height;
-				this$1.ctx.canvas.width = img.width;
-				this$1.ctx.canvas.height = img.height;
-				this$1.ctx.drawImage(img, 0, 0);
+				this$1.imgWidth = this$1.width > 0 ? this$1.width : img.width;
+				this$1.imgHeight = this$1.height > 0 ? this$1.height : img.height;
+				this$1.ctx.canvas.width = this$1.imgWidth;
+				this$1.ctx.canvas.height = this$1.imgHeight;
+				this$1.ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, this$1.imgWidth, this$1.imgHeight);
+
+				var canvasImg = new Image();
+				canvasImg.src = this$1.imageCanvas.toDataURL();
+				canvasImg.onload = function () {
+					this$1.imageObj = canvasImg;
+				};
 			};
 			img.src = this.imageSource;
-			this.imageObj = img;
+
 		},
-		reset: function reset() {
-			this.points = [];
-			this.redo_list = [];
-			this.undo_list = [];
-			this.redo_pointer = [];
-			this.undo_pointer = [];
-			this.current_pointer = [];
+		empty: function () {
+			this.redoList = [];
+			this.undoList = [];
+			this.redoPointer = [];
+			this.undoPointer = [];
+			this.currentPointer = [];
+			this.redoMarks = [];
+			this.undoMarks = [];
+			this.currentMarks = [];
+		},
+		reset: function () {
+			this.empty();
 			this.imageObj = null;
@@ -101,8 +121,7 @@ this.resultImage = null;
 			this._initialize();
-
 		},
 		savePointer: function (point) {
-			this.redo_pointer = [];
-			this.current_pointer.push(point);
-			this.undo_pointer.push(point);
+			this.redoPointer = [];
+			this.currentPointer.push(point);
+			this.undoPointer.push(point);
 		},
@@ -116,19 +135,32 @@ restorePointer: function (pop, push, undo) {
 					this.oldPositionY = item.positionY;
-					this.current_pointer.pop();
+					this.currentPointer.pop();
 				} else {
-					if (this.redo_pointer.length > 0) {
-						this.oldPositionX = this.redo_pointer[this.redo_pointer.length - 1]['positionX'];
-						this.oldPositionY = this.redo_pointer[this.redo_pointer.length - 1]['positionY'];
+					if (this.redoPointer.length > 0) {
+						this.oldPositionX = this.redoPointer[this.redoPointer.length - 1]['positionX'];
+						this.oldPositionY = this.redoPointer[this.redoPointer.length - 1]['positionY'];
 					}
-					this.current_pointer.push(item);
+					this.currentPointer.push(item);
 				}
 			}
 		},
-		saveState: function (canvas, list, keep_redo) {
-			keep_redo = keep_redo || false;
-			if (!keep_redo) {
-				this.redo_list = [];
+		restoreMarks: function (pop, push, undo) {
+			var ref;
+
+			if (pop.length > 1) {
+				var item = pop.splice(pop.length - 2, 2);
+				push.push.apply(push, item);
+				if (undo) {
+					this.currentMarks.splice(pop.length - 2, 2);
+				} else {
+					(ref = this.currentMarks).push.apply(ref, item);
+				}
 			}
-			(list || this.undo_list).push(canvas.toDataURL());
 		},
+		saveState: function (canvas, list, keepRedo) {
+			keepRedo = keepRedo || false;
+			if (!keepRedo) {
+				this.redoList = [];
+			}
+			(list || this.undoList).push(canvas.toDataURL());
+		},
 		restoreState: function (pop, push) {
@@ -139,7 +171,7 @@ var this$1 = this;
 				this.saveState(this.imageCanvas, push, true);
-				var restore_state = pop.pop();
+				var restoreState = pop.pop();
 				var img = new Image();
-				img.src = restore_state;
+				img.src = restoreState;
 				img.onload = function () {
-					this$1.ctx.clearRect(0, 0, this$1.width, this$1.height);
+					this$1.ctx.clearRect(0, 0, this$1.imgWidth, this$1.imgHeight);
 					this$1.ctx.drawImage(img, 0, 0);
@@ -152,4 +184,5 @@ };
 				this.editing = 0;
-				this.restoreState(this.undo_list, this.redo_list);
-				this.restorePointer(this.undo_pointer, this.redo_pointer, true);
+				this.restoreState(this.undoList, this.redoList);
+				this.restorePointer(this.undoPointer, this.redoPointer, true);
+				this.restoreMarks(this.undoMarks, this.redoMarks, true);
 				this.editing = 1;
@@ -161,4 +194,5 @@ }
 				this.editing = 0;
-				this.restoreState(this.redo_list, this.undo_list);
-				this.restorePointer(this.redo_pointer, this.undo_pointer, false);
+				this.restoreState(this.redoList, this.undoList);
+				this.restorePointer(this.redoPointer, this.undoPointer, false);
+				this.restoreMarks(this.redoMarks, this.undoMarks, false);
 				this.editing = 1;
@@ -171,4 +205,4 @@ }
 			if (this.editing) {
-				this.current_pointer = [];
-				this.ctx.clearRect(0, 0, this.width, this.height);
+				this.currentPointer = [];
+				this.ctx.clearRect(0, 0, this.imgWidth, this.imgHeight);
 				this.ctx.beginPath();
@@ -178,5 +212,5 @@ this.ctx.globalCompositeOperation = 'destination-over';
 				var top = this.imageCanvas.offsetTop;
-				for (var i = 0; i < this.points.length; i += 2) {
-					var x = this.points[i];
-					var y = this.points[i + 1];
+				for (var i = 0; i < this.currentMarks.length; i += 2) {
+					var x = this.currentMarks[i];
+					var y = this.currentMarks[i + 1];
 					if (i === 0) {
@@ -196,4 +230,2 @@ this.ctx.moveTo(x - left, y - top);
 				img.onload = function () {
-					this$1.width = img.width;
-					this$1.height = img.height;
 					this$1.ctx.canvas.width = img.width;
@@ -204,2 +236,3 @@ this$1.ctx.canvas.height = img.height;
 				img.src = dataUrl;
+				this.empty();
 			}
@@ -212,4 +245,3 @@
 					//store the points if mousedown
-					this.points.push(e.pageX, e.pageY);
-					if (this.oldPositionX !== '' && this.undo_list.length > 0) {
+					if (this.oldPositionX !== '' && this.undoList.length > 0) {
 						this.ctx.beginPath();
@@ -223,2 +255,5 @@ this.ctx.moveTo(this.oldPositionX, this.oldPositionY);
 					}
+					this.redoMarks = [];
+					this.currentMarks.push(e.pageX, e.pageY);
+					this.undoMarks.push(e.pageX, e.pageY);
 					this.saveState(this.imageCanvas);
@@ -296,2 +331,9 @@ this.savePointer({
 		},
+	},
+	watch: {
+		imageSource: function (val) {
+			this.empty();
+			this._initialize();
+			// this.fullName = val + ' ' + this.lastName
+		},
 	}
@@ -439,3 +481,3 @@ };
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:_vm.wrapperClass},[_c('canvas',{directives:[{name:"show",rawName:"v-show",value:(_vm.showCanvas),expression:"showCanvas"}],ref:"canvas",class:_vm.canvasClass,attrs:{"width":"1190"},on:{"mousedown":_vm.mouseDown,"mousemove":_vm.mouseMove}}),_vm._v(" "),_vm._l((_vm.current_pointer),function(point){return _c('span',{directives:[{name:"show",rawName:"v-show",value:(_vm.showPointer),expression:"showPointer"}],class:("vue-crop-pointer " + _vm.pointerClass),style:({top:point.y, left:point.x})})})],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:_vm.wrapperClass},[_c('canvas',{directives:[{name:"show",rawName:"v-show",value:(_vm.showCanvas),expression:"showCanvas"}],ref:"canvas",class:_vm.canvasClass,on:{"mousedown":_vm.mouseDown,"mousemove":_vm.mouseMove}}),_vm._v(" "),_vm._l((_vm.currentPointer),function(point){return _c('span',{directives:[{name:"show",rawName:"v-show",value:(_vm.showPointer),expression:"showPointer"}],class:("vue-crop-pointer " + _vm.pointerClass),style:({top:point.y, left:point.x})})})],2)};
 var __vue_staticRenderFns__ = [];
@@ -446,3 +488,3 @@
     if (!inject) { return }
-    inject("data-v-8e80b39c_0", { source: ".vue-crop-pointer{border:solid 1px #000;filter:alpha(opacity=50);opacity:.5;position:absolute;width:5px;height:5px}canvas{position:relative;margin-left:0;margin-top:0;cursor:crosshair}", map: undefined, media: undefined });
+    inject("data-v-40419b70_0", { source: ".vue-crop-pointer{border:solid 1px #000;filter:alpha(opacity=50);opacity:.5;position:absolute;width:5px;height:5px}canvas{position:relative;margin-left:0;margin-top:0;cursor:crosshair}", map: undefined, media: undefined });
 
@@ -449,0 +491,0 @@ };

dist/PolygonCropper.min.js

@@ -1,1 +0,1 @@
-var PolygonCropper=function(t){"use strict";function e(t,e,i,o,n,s,a,r,h,l){"boolean"!=typeof a&&(h=r,r=a,a=!1);var d="function"==typeof i?i.options:i;t&&t.render&&(d.render=t.render,d.staticRenderFns=t.staticRenderFns,d._compiled=!0,n&&(d.functional=!0)),o&&(d._scopeId=o);var p;if(s?(p=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),e&&e.call(this,h(t)),t&&t._registeredComponents&&t._registeredComponents.add(s)},d._ssrRegister=p):e&&(p=a?function(){e.call(this,l(this.$root.$options.shadowRoot))}:function(t){e.call(this,r(t))}),p)if(d.functional){var c=d.render;d.render=function(t,e){return p.call(e),c(t,e)}}else{var u=d.beforeCreate;d.beforeCreate=u?[].concat(u,p):[p]}return i}function i(t){return function(t,e){return o(t,e)}}function o(t,e){var i=r?e.media||"default":t,o=l[i]||(l[i]={ids:new Set,styles:[]});if(!o.ids.has(t)){o.ids.add(t);var n=e.source;if(e.map&&(n+="\n/*# sourceURL="+e.map.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e.map))))+" */"),o.element||(o.element=document.createElement("style"),o.element.type="text/css",e.media&&o.element.setAttribute("media",e.media),h.appendChild(o.element)),"styleSheet"in o.element)o.styles.push(n),o.element.styleSheet.cssText=o.styles.filter(Boolean).join("\n");else{var s=o.ids.size-1,a=document.createTextNode(n),d=o.element.childNodes;d[s]&&o.element.removeChild(d[s]),d.length?o.element.insertBefore(a,d[s]):o.element.appendChild(a)}}}function n(t){n.installed||(n.installed=!0,t.component("PolygonCrop",d))}var s={name:"PolygonCrop",props:{canvasClass:{type:String,default:""},wrapperClass:{type:String,default:""},pointerClass:{type:String,default:""},imageSource:{type:String,default:""},showCanvas:{type:Boolean,default:!0},showPointer:{type:Boolean,default:!0}},data:function(){return{editing:1,points:[],imageObj:null,positionX:"",positionY:"",oldPositionX:"",oldPositionY:"",height:"",width:"",ctx:null,imageCanvas:null,redo_list:[],undo_list:[],redo_pointer:[],undo_pointer:[],current_pointer:[],resultImage:null}},mounted:function(){this._initialize()},methods:{_initialize:function(){var t=this;this.imageCanvas=this.$refs.canvas,this.ctx=this.imageCanvas.getContext("2d");var e=new Image;e.onload=function(){t.width=e.width,t.height=e.height,t.ctx.canvas.width=e.width,t.ctx.canvas.height=e.height,t.ctx.drawImage(e,0,0)},e.src=this.imageSource,this.imageObj=e},reset:function(){this.points=[],this.redo_list=[],this.undo_list=[],this.redo_pointer=[],this.undo_pointer=[],this.current_pointer=[],this.imageObj=null,this.resultImage=null,this.editing=1,this._initialize()},savePointer:function(t){this.redo_pointer=[],this.current_pointer.push(t),this.undo_pointer.push(t)},restorePointer:function(t,e,i){if(t.length>0){var o=t.pop();e.push(o),i?(this.oldPositionX=o.positionX,this.oldPositionY=o.positionY,this.current_pointer.pop()):(this.redo_pointer.length>0&&(this.oldPositionX=this.redo_pointer[this.redo_pointer.length-1].positionX,this.oldPositionY=this.redo_pointer[this.redo_pointer.length-1].positionY),this.current_pointer.push(o))}},saveState:function(t,e,i){(i=i||!1)||(this.redo_list=[]),(e||this.undo_list).push(t.toDataURL())},restoreState:function(t,e){var i=this;if(t.length){this.saveState(this.imageCanvas,e,!0);var o=t.pop(),n=new Image;n.src=o,n.onload=function(){i.ctx.clearRect(0,0,i.width,i.height),i.ctx.drawImage(n,0,0)}}},undo:function(){this.editing&&(this.editing=0,this.restoreState(this.undo_list,this.redo_list),this.restorePointer(this.undo_pointer,this.redo_pointer,!0),this.editing=1)},redo:function(){this.editing&&(this.editing=0,this.restoreState(this.redo_list,this.undo_list),this.restorePointer(this.redo_pointer,this.undo_pointer,!1),this.editing=1)},crop:function(){var t=this;if(this.editing){this.current_pointer=[],this.ctx.clearRect(0,0,this.width,this.height),this.ctx.beginPath(),this.ctx.globalCompositeOperation="destination-over";for(var e=this.imageCanvas.offsetLeft,i=this.imageCanvas.offsetTop,o=0;o<this.points.length;o+=2){var n=this.points[o],s=this.points[o+1];0===o?this.ctx.moveTo(n-e,s-i):this.ctx.lineTo(n-e,s-i)}this.ctx.fillStyle=this.ctx.createPattern(this.imageObj,"repeat"),this.ctx.fill();var a=this.trimEmptyPixel(this.imageCanvas,this.ctx).toDataURL("image/png");this.resultImage=a,this.editing=0;var r=new Image;r.onload=function(){t.width=r.width,t.height=r.height,t.ctx.canvas.width=r.width,t.ctx.canvas.height=r.height,t.ctx.drawImage(r,0,0)},r.src=a}},mouseDown:function(t){1===this.editing&&(1===t.which&&(this.points.push(t.pageX,t.pageY),""!==this.oldPositionX&&this.undo_list.length>0&&(this.ctx.beginPath(),this.ctx.moveTo(this.oldPositionX,this.oldPositionY),this.ctx.lineTo(this.positionX,this.positionY),this.ctx.strokeStyle="#F63E02",this.ctx.lineWidth=2,this.ctx.setLineDash([1,1]),this.ctx.stroke()),this.saveState(this.imageCanvas),this.savePointer({x:t.pageX+"px",y:t.pageY+"px",positionX:t.offsetX,positionY:t.offsetY}),this.oldPositionX=t.offsetX,this.oldPositionY=t.offsetY),this.positionX=t.offsetX,this.positionY=t.offsetY)},mouseMove:function(t){1===this.editing&&(this.positionX=t.offsetX,this.positionY=t.offsetY)},trimEmptyPixel:function(t,e){var i,o,n,s=document.createElement("canvas").getContext("2d"),a=e.getImageData(0,0,t.width,t.height),r=a.data.length,h={top:null,left:null,right:null,bottom:null};for(i=0;i<r;i+=4)0!==a.data[i+3]&&(o=i/4%t.width,n=~~(i/4/t.width),null===h.top&&(h.top=n),null===h.left?h.left=o:o<h.left&&(h.left=o),null===h.right?h.right=o:h.right<o&&(h.right=o),null===h.bottom?h.bottom=n:h.bottom<n&&(h.bottom=n));var l=h.bottom-h.top,d=h.right-h.left,p=e.getImageData(h.left,h.top,d,l);return s.canvas.width=d,s.canvas.height=l,s.putImageData(p,0,0),s.canvas}}},a=e,r="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase()),h=document.head||document.getElementsByTagName("head")[0],l={},d=a({render:function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{class:t.wrapperClass},[i("canvas",{directives:[{name:"show",rawName:"v-show",value:t.showCanvas,expression:"showCanvas"}],ref:"canvas",class:t.canvasClass,attrs:{width:"1190"},on:{mousedown:t.mouseDown,mousemove:t.mouseMove}}),t._v(" "),t._l(t.current_pointer,function(e){return i("span",{directives:[{name:"show",rawName:"v-show",value:t.showPointer,expression:"showPointer"}],class:"vue-crop-pointer "+t.pointerClass,style:{top:e.y,left:e.x}})})],2)},staticRenderFns:[]},function(t){t&&t("data-v-8e80b39c_0",{source:".vue-crop-pointer{border:solid 1px #000;filter:alpha(opacity=50);opacity:.5;position:absolute;width:5px;height:5px}canvas{position:relative;margin-left:0;margin-top:0;cursor:crosshair}",map:void 0,media:void 0})},s,void 0,!1,void 0,i,void 0),p={install:n},c=null;return"undefined"!=typeof window?c=window.Vue:"undefined"!=typeof global&&(c=global.vue),c&&c.use(p),d.install=n,t.default=d,t}({});
+var PolygonCropper=function(t){"use strict";function e(t,e,i,s,n,o,a,r,h,l){"boolean"!=typeof a&&(h=r,r=a,a=!1);var d="function"==typeof i?i.options:i;t&&t.render&&(d.render=t.render,d.staticRenderFns=t.staticRenderFns,d._compiled=!0,n&&(d.functional=!0)),s&&(d._scopeId=s);var u;if(o?(u=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),e&&e.call(this,h(t)),t&&t._registeredComponents&&t._registeredComponents.add(o)},d._ssrRegister=u):e&&(u=a?function(){e.call(this,l(this.$root.$options.shadowRoot))}:function(t){e.call(this,r(t))}),u)if(d.functional){var c=d.render;d.render=function(t,e){return u.call(e),c(t,e)}}else{var p=d.beforeCreate;d.beforeCreate=p?[].concat(p,u):[u]}return i}function i(t){return function(t,e){return s(t,e)}}function s(t,e){var i=r?e.media||"default":t,s=l[i]||(l[i]={ids:new Set,styles:[]});if(!s.ids.has(t)){s.ids.add(t);var n=e.source;if(e.map&&(n+="\n/*# sourceURL="+e.map.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e.map))))+" */"),s.element||(s.element=document.createElement("style"),s.element.type="text/css",e.media&&s.element.setAttribute("media",e.media),h.appendChild(s.element)),"styleSheet"in s.element)s.styles.push(n),s.element.styleSheet.cssText=s.styles.filter(Boolean).join("\n");else{var o=s.ids.size-1,a=document.createTextNode(n),d=s.element.childNodes;d[o]&&s.element.removeChild(d[o]),d.length?s.element.insertBefore(a,d[o]):s.element.appendChild(a)}}}function n(t){n.installed||(n.installed=!0,t.component("PolygonCrop",d))}var o={name:"PolygonCrop",props:{canvasClass:{type:String,default:""},width:{type:Number,default:0},height:{type:Number,default:0},wrapperClass:{type:String,default:""},pointerClass:{type:String,default:""},imageSource:{type:String,default:""},showCanvas:{type:Boolean,default:!0},showPointer:{type:Boolean,default:!0}},data:function(){return{editing:1,imageObj:null,positionX:"",positionY:"",oldPositionX:"",oldPositionY:"",ctx:null,imageCanvas:null,redoMarks:[],undoMarks:[],currentMarks:[],redoList:[],undoList:[],redoPointer:[],undoPointer:[],currentPointer:[],resultImage:null,imgWidth:0,imgHeight:0}},mounted:function(){this._initialize()},methods:{_initialize:function(){var t=this;this.imageCanvas=this.$refs.canvas,this.ctx=this.imageCanvas.getContext("2d");var e=new Image;e.onload=function(){t.imgWidth=t.width>0?t.width:e.width,t.imgHeight=t.height>0?t.height:e.height,t.ctx.canvas.width=t.imgWidth,t.ctx.canvas.height=t.imgHeight,t.ctx.drawImage(e,0,0,e.width,e.height,0,0,t.imgWidth,t.imgHeight);var i=new Image;i.src=t.imageCanvas.toDataURL(),i.onload=function(){t.imageObj=i}},e.src=this.imageSource},empty:function(){this.redoList=[],this.undoList=[],this.redoPointer=[],this.undoPointer=[],this.currentPointer=[],this.redoMarks=[],this.undoMarks=[],this.currentMarks=[]},reset:function(){this.empty(),this.imageObj=null,this.resultImage=null,this.editing=1,this._initialize()},savePointer:function(t){this.redoPointer=[],this.currentPointer.push(t),this.undoPointer.push(t)},restorePointer:function(t,e,i){if(t.length>0){var s=t.pop();e.push(s),i?(this.oldPositionX=s.positionX,this.oldPositionY=s.positionY,this.currentPointer.pop()):(this.redoPointer.length>0&&(this.oldPositionX=this.redoPointer[this.redoPointer.length-1].positionX,this.oldPositionY=this.redoPointer[this.redoPointer.length-1].positionY),this.currentPointer.push(s))}},restoreMarks:function(t,e,i){var s;if(t.length>1){var n=t.splice(t.length-2,2);e.push.apply(e,n),i?this.currentMarks.splice(t.length-2,2):(s=this.currentMarks).push.apply(s,n)}},saveState:function(t,e,i){(i=i||!1)||(this.redoList=[]),(e||this.undoList).push(t.toDataURL())},restoreState:function(t,e){var i=this;if(t.length){this.saveState(this.imageCanvas,e,!0);var s=t.pop(),n=new Image;n.src=s,n.onload=function(){i.ctx.clearRect(0,0,i.imgWidth,i.imgHeight),i.ctx.drawImage(n,0,0)}}},undo:function(){this.editing&&(this.editing=0,this.restoreState(this.undoList,this.redoList),this.restorePointer(this.undoPointer,this.redoPointer,!0),this.restoreMarks(this.undoMarks,this.redoMarks,!0),this.editing=1)},redo:function(){this.editing&&(this.editing=0,this.restoreState(this.redoList,this.undoList),this.restorePointer(this.redoPointer,this.undoPointer,!1),this.restoreMarks(this.redoMarks,this.undoMarks,!1),this.editing=1)},crop:function(){var t=this;if(this.editing){this.currentPointer=[],this.ctx.clearRect(0,0,this.imgWidth,this.imgHeight),this.ctx.beginPath(),this.ctx.globalCompositeOperation="destination-over";for(var e=this.imageCanvas.offsetLeft,i=this.imageCanvas.offsetTop,s=0;s<this.currentMarks.length;s+=2){var n=this.currentMarks[s],o=this.currentMarks[s+1];0===s?this.ctx.moveTo(n-e,o-i):this.ctx.lineTo(n-e,o-i)}this.ctx.fillStyle=this.ctx.createPattern(this.imageObj,"repeat"),this.ctx.fill();var a=this.trimEmptyPixel(this.imageCanvas,this.ctx).toDataURL("image/png");this.resultImage=a,this.editing=0;var r=new Image;r.onload=function(){t.ctx.canvas.width=r.width,t.ctx.canvas.height=r.height,t.ctx.drawImage(r,0,0)},r.src=a,this.empty()}},mouseDown:function(t){1===this.editing&&(1===t.which&&(""!==this.oldPositionX&&this.undoList.length>0&&(this.ctx.beginPath(),this.ctx.moveTo(this.oldPositionX,this.oldPositionY),this.ctx.lineTo(this.positionX,this.positionY),this.ctx.strokeStyle="#F63E02",this.ctx.lineWidth=2,this.ctx.setLineDash([1,1]),this.ctx.stroke()),this.redoMarks=[],this.currentMarks.push(t.pageX,t.pageY),this.undoMarks.push(t.pageX,t.pageY),this.saveState(this.imageCanvas),this.savePointer({x:t.pageX+"px",y:t.pageY+"px",positionX:t.offsetX,positionY:t.offsetY}),this.oldPositionX=t.offsetX,this.oldPositionY=t.offsetY),this.positionX=t.offsetX,this.positionY=t.offsetY)},mouseMove:function(t){1===this.editing&&(this.positionX=t.offsetX,this.positionY=t.offsetY)},trimEmptyPixel:function(t,e){var i,s,n,o=document.createElement("canvas").getContext("2d"),a=e.getImageData(0,0,t.width,t.height),r=a.data.length,h={top:null,left:null,right:null,bottom:null};for(i=0;i<r;i+=4)0!==a.data[i+3]&&(s=i/4%t.width,n=~~(i/4/t.width),null===h.top&&(h.top=n),null===h.left?h.left=s:s<h.left&&(h.left=s),null===h.right?h.right=s:h.right<s&&(h.right=s),null===h.bottom?h.bottom=n:h.bottom<n&&(h.bottom=n));var l=h.bottom-h.top,d=h.right-h.left,u=e.getImageData(h.left,h.top,d,l);return o.canvas.width=d,o.canvas.height=l,o.putImageData(u,0,0),o.canvas}},watch:{imageSource:function(t){this.empty(),this._initialize()}}},a=e,r="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase()),h=document.head||document.getElementsByTagName("head")[0],l={},d=a({render:function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{class:t.wrapperClass},[i("canvas",{directives:[{name:"show",rawName:"v-show",value:t.showCanvas,expression:"showCanvas"}],ref:"canvas",class:t.canvasClass,on:{mousedown:t.mouseDown,mousemove:t.mouseMove}}),t._v(" "),t._l(t.currentPointer,function(e){return i("span",{directives:[{name:"show",rawName:"v-show",value:t.showPointer,expression:"showPointer"}],class:"vue-crop-pointer "+t.pointerClass,style:{top:e.y,left:e.x}})})],2)},staticRenderFns:[]},function(t){t&&t("data-v-40419b70_0",{source:".vue-crop-pointer{border:solid 1px #000;filter:alpha(opacity=50);opacity:.5;position:absolute;width:5px;height:5px}canvas{position:relative;margin-left:0;margin-top:0;cursor:crosshair}",map:void 0,media:void 0})},o,void 0,!1,void 0,i,void 0),u={install:n},c=null;return"undefined"!=typeof window?c=window.Vue:"undefined"!=typeof global&&(c=global.vue),c&&c.use(u),d.install=n,t.default=d,t}({});

dist/PolygonCropper.umd.js

@@ -20,3 +20,2 @@ (function (global, factory) {
 	//
-	//
 
@@ -30,2 +29,10 @@ var script = {
 			},
+			width: {
+				type: Number,
+				default: 0
+			},
+			height: {
+				type: Number,
+				default: 0
+			},
 			wrapperClass: {
@@ -55,3 +62,2 @@ type: String,
 				editing: 1,
-				points: [],
 				imageObj: null,
@@ -62,12 +68,15 @@ positionX: '',
 				oldPositionY: '',
-				height: '',
-				width: '',
 				ctx: null,
 				imageCanvas: null,
-				redo_list: [],
-				undo_list: [],
-				redo_pointer: [],
-				undo_pointer: [],
-				current_pointer: [],
-				resultImage: null
+				redoMarks: [],
+				undoMarks: [],
+				currentMarks: [],
+				redoList: [],
+				undoList: [],
+				redoPointer: [],
+				undoPointer: [],
+				currentPointer: [],
+				resultImage: null,
+				imgWidth: 0,
+				imgHeight: 0
 			};
@@ -86,18 +95,29 @@ },
 				img.onload = function () {
-					this$1.width = img.width;
-					this$1.height = img.height;
-					this$1.ctx.canvas.width = img.width;
-					this$1.ctx.canvas.height = img.height;
-					this$1.ctx.drawImage(img, 0, 0);
+					this$1.imgWidth = this$1.width > 0 ? this$1.width : img.width;
+					this$1.imgHeight = this$1.height > 0 ? this$1.height : img.height;
+					this$1.ctx.canvas.width = this$1.imgWidth;
+					this$1.ctx.canvas.height = this$1.imgHeight;
+					this$1.ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, this$1.imgWidth, this$1.imgHeight);
+
+					var canvasImg = new Image();
+					canvasImg.src = this$1.imageCanvas.toDataURL();
+					canvasImg.onload = function () {
+						this$1.imageObj = canvasImg;
+					};
 				};
 				img.src = this.imageSource;
-				this.imageObj = img;
+
 			},
-			reset: function reset() {
-				this.points = [];
-				this.redo_list = [];
-				this.undo_list = [];
-				this.redo_pointer = [];
-				this.undo_pointer = [];
-				this.current_pointer = [];
+			empty: function () {
+				this.redoList = [];
+				this.undoList = [];
+				this.redoPointer = [];
+				this.undoPointer = [];
+				this.currentPointer = [];
+				this.redoMarks = [];
+				this.undoMarks = [];
+				this.currentMarks = [];
+			},
+			reset: function () {
+				this.empty();
 				this.imageObj = null;
@@ -107,8 +127,7 @@ this.resultImage = null;
 				this._initialize();
-
 			},
 			savePointer: function (point) {
-				this.redo_pointer = [];
-				this.current_pointer.push(point);
-				this.undo_pointer.push(point);
+				this.redoPointer = [];
+				this.currentPointer.push(point);
+				this.undoPointer.push(point);
 			},
@@ -122,19 +141,32 @@ restorePointer: function (pop, push, undo) {
 						this.oldPositionY = item.positionY;
-						this.current_pointer.pop();
+						this.currentPointer.pop();
 					} else {
-						if (this.redo_pointer.length > 0) {
-							this.oldPositionX = this.redo_pointer[this.redo_pointer.length - 1]['positionX'];
-							this.oldPositionY = this.redo_pointer[this.redo_pointer.length - 1]['positionY'];
+						if (this.redoPointer.length > 0) {
+							this.oldPositionX = this.redoPointer[this.redoPointer.length - 1]['positionX'];
+							this.oldPositionY = this.redoPointer[this.redoPointer.length - 1]['positionY'];
 						}
-						this.current_pointer.push(item);
+						this.currentPointer.push(item);
 					}
 				}
 			},
-			saveState: function (canvas, list, keep_redo) {
-				keep_redo = keep_redo || false;
-				if (!keep_redo) {
-					this.redo_list = [];
+			restoreMarks: function (pop, push, undo) {
+				var ref;
+
+				if (pop.length > 1) {
+					var item = pop.splice(pop.length - 2, 2);
+					push.push.apply(push, item);
+					if (undo) {
+						this.currentMarks.splice(pop.length - 2, 2);
+					} else {
+						(ref = this.currentMarks).push.apply(ref, item);
+					}
 				}
-				(list || this.undo_list).push(canvas.toDataURL());
 			},
+			saveState: function (canvas, list, keepRedo) {
+				keepRedo = keepRedo || false;
+				if (!keepRedo) {
+					this.redoList = [];
+				}
+				(list || this.undoList).push(canvas.toDataURL());
+			},
 			restoreState: function (pop, push) {
@@ -145,7 +177,7 @@ var this$1 = this;
 					this.saveState(this.imageCanvas, push, true);
-					var restore_state = pop.pop();
+					var restoreState = pop.pop();
 					var img = new Image();
-					img.src = restore_state;
+					img.src = restoreState;
 					img.onload = function () {
-						this$1.ctx.clearRect(0, 0, this$1.width, this$1.height);
+						this$1.ctx.clearRect(0, 0, this$1.imgWidth, this$1.imgHeight);
 						this$1.ctx.drawImage(img, 0, 0);
@@ -158,4 +190,5 @@ };
 					this.editing = 0;
-					this.restoreState(this.undo_list, this.redo_list);
-					this.restorePointer(this.undo_pointer, this.redo_pointer, true);
+					this.restoreState(this.undoList, this.redoList);
+					this.restorePointer(this.undoPointer, this.redoPointer, true);
+					this.restoreMarks(this.undoMarks, this.redoMarks, true);
 					this.editing = 1;
@@ -167,4 +200,5 @@ }
 					this.editing = 0;
-					this.restoreState(this.redo_list, this.undo_list);
-					this.restorePointer(this.redo_pointer, this.undo_pointer, false);
+					this.restoreState(this.redoList, this.undoList);
+					this.restorePointer(this.redoPointer, this.undoPointer, false);
+					this.restoreMarks(this.redoMarks, this.undoMarks, false);
 					this.editing = 1;
@@ -177,4 +211,4 @@ }
 				if (this.editing) {
-					this.current_pointer = [];
-					this.ctx.clearRect(0, 0, this.width, this.height);
+					this.currentPointer = [];
+					this.ctx.clearRect(0, 0, this.imgWidth, this.imgHeight);
 					this.ctx.beginPath();
@@ -184,5 +218,5 @@ this.ctx.globalCompositeOperation = 'destination-over';
 					var top = this.imageCanvas.offsetTop;
-					for (var i = 0; i < this.points.length; i += 2) {
-						var x = this.points[i];
-						var y = this.points[i + 1];
+					for (var i = 0; i < this.currentMarks.length; i += 2) {
+						var x = this.currentMarks[i];
+						var y = this.currentMarks[i + 1];
 						if (i === 0) {
@@ -202,4 +236,2 @@ this.ctx.moveTo(x - left, y - top);
 					img.onload = function () {
-						this$1.width = img.width;
-						this$1.height = img.height;
 						this$1.ctx.canvas.width = img.width;
@@ -210,2 +242,3 @@ this$1.ctx.canvas.height = img.height;
 					img.src = dataUrl;
+					this.empty();
 				}
@@ -218,4 +251,3 @@
 						//store the points if mousedown
-						this.points.push(e.pageX, e.pageY);
-						if (this.oldPositionX !== '' && this.undo_list.length > 0) {
+						if (this.oldPositionX !== '' && this.undoList.length > 0) {
 							this.ctx.beginPath();
@@ -229,2 +261,5 @@ this.ctx.moveTo(this.oldPositionX, this.oldPositionY);
 						}
+						this.redoMarks = [];
+						this.currentMarks.push(e.pageX, e.pageY);
+						this.undoMarks.push(e.pageX, e.pageY);
 						this.saveState(this.imageCanvas);
@@ -302,2 +337,9 @@ this.savePointer({
 			},
+		},
+		watch: {
+			imageSource: function (val) {
+				this.empty();
+				this._initialize();
+				// this.fullName = val + ' ' + this.lastName
+			},
 		}
@@ -445,3 +487,3 @@ };
 	/* template */
-	var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:_vm.wrapperClass},[_c('canvas',{directives:[{name:"show",rawName:"v-show",value:(_vm.showCanvas),expression:"showCanvas"}],ref:"canvas",class:_vm.canvasClass,attrs:{"width":"1190"},on:{"mousedown":_vm.mouseDown,"mousemove":_vm.mouseMove}}),_vm._v(" "),_vm._l((_vm.current_pointer),function(point){return _c('span',{directives:[{name:"show",rawName:"v-show",value:(_vm.showPointer),expression:"showPointer"}],class:("vue-crop-pointer " + _vm.pointerClass),style:({top:point.y, left:point.x})})})],2)};
+	var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:_vm.wrapperClass},[_c('canvas',{directives:[{name:"show",rawName:"v-show",value:(_vm.showCanvas),expression:"showCanvas"}],ref:"canvas",class:_vm.canvasClass,on:{"mousedown":_vm.mouseDown,"mousemove":_vm.mouseMove}}),_vm._v(" "),_vm._l((_vm.currentPointer),function(point){return _c('span',{directives:[{name:"show",rawName:"v-show",value:(_vm.showPointer),expression:"showPointer"}],class:("vue-crop-pointer " + _vm.pointerClass),style:({top:point.y, left:point.x})})})],2)};
 	var __vue_staticRenderFns__ = [];
@@ -452,3 +494,3 @@
 	    if (!inject) { return }
-	    inject("data-v-8e80b39c_0", { source: ".vue-crop-pointer{border:solid 1px #000;filter:alpha(opacity=50);opacity:.5;position:absolute;width:5px;height:5px}canvas{position:relative;margin-left:0;margin-top:0;cursor:crosshair}", map: undefined, media: undefined });
+	    inject("data-v-40419b70_0", { source: ".vue-crop-pointer{border:solid 1px #000;filter:alpha(opacity=50);opacity:.5;position:absolute;width:5px;height:5px}canvas{position:relative;margin-left:0;margin-top:0;cursor:crosshair}", map: undefined, media: undefined });
 
@@ -455,0 +497,0 @@ };

package.json

 {
   "name": "vue-polygon-cropper",
-  "version": "0.1.0",
+  "version": "0.2.0",
+  "homepage": "gobeam.github.io/vue-polygon-cropper/",
   "main": "dist/PolygonCropper.umd.js",
@@ -20,2 +21,24 @@ "module": "dist/PolygonCropper.esm.js",
   },
+  "keywords": [
+    "image",
+    "polygon",
+    "crop",
+    "cropper",
+    "redo",
+    "undo",
+    "reset",
+    "cropper.js",
+    "cropping",
+    "processing",
+    "html",
+    "css",
+    "javascript",
+    "front-end",
+    "web"
+  ],
+  "author": {
+    "name": "Roshan Ranabhat",
+    "url": "https://roshanranabhat.com.np/"
+  },
+  "license": "MIT",
   "scripts": {
@@ -22,0 +45,0 @@ "build": "npm run build:unpkg & npm run build:es & npm run build:umd",

README.md

 # vue-polygon-cropper
+Vue polygon cropper lets you to crop image with any numbers of points with redo and undo functionality.
 
-A Vue plugin to implement polygon crop.
+[![NPM](https://nodei.co/npm/vue-polygon-cropper.png?downloads=true)](https://nodei.co/npm/vue-polygon-cropper/)
 
+## Installation
 
+```shell
+npm install --save vue-polygon-cropper
+```
+
+## Usage
+
+```vue
+// Global
+import Vue from 'vue';
+import VuePolygonCropper from 'vue-polygon-cropper';
+Vue.component(VuePolygonCropper);
+
+// Local
+import VueCropper from 'vue-polygon-cropper';
+export default {
+  components: { VueCropper}
+}
+
+...
+     <template>
+         <div id="app">
+             <polygon-crop :imageSource="'/demo.png'" ref="canvas"></polygon-crop>
+             <button @click.prevent="crop">Crop</button>
+             <button @click.prevent="undo">Undo</button>
+             <button @click.prevent="redo">Redo</button>
+             <button @click.prevent="reset">Reset</button>
+     
+         </div>
+     </template>
+     <script>
+     
+     	export default {
+     		name: 'App',
+     		methods: {
+     			crop: function () {
+     				this.$refs.canvas.crop();
+     			},
+     			undo: function () {
+     				this.$refs.canvas.undo();
+     			},
+     			redo: function () {
+     				this.$refs.canvas.redo();
+     			},
+     			reset: function () {
+     				this.$refs.canvas.reset();
+     			}
+     		}
+     	};
+     </script>
+...
+```
+
+## Options
+
+| Name         | Type    | Required | Description                                                       |
+|--------------|---------|----------|-------------------------------------------------------------------|
+| imageSource  | String  | required | Image url/source to load on canvas.                               |
+| canvasClass  | String  | optional | Pass class to canvas to load your custom style.                   |
+| wrapperClass | String  | optional | Pass class to div wrapper of canvas to load your custom style.    |
+| pointerClass | String  | optional | Pass class to pointer to load your custom style and customize it. |
+| showCanvas   | Boolean | optional | Default true but pass false in order to hide image canvas.        |
+| showPointer  | Boolean | optional | Default true but pass false in order to hide pointers.            |
+| width        | Number  | optional | Pass width to canvas.                                             |
+| height       | Number  | optional | Pass height to canvas.                                            |
+
+
+## Contributing
+Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
+
+Please make sure to update tests as appropriate.
+
+
+## License
+
+Released under the MIT License - see `LICENSE.txt` for details.

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

No contributors or author data

Maintenance

Package does not specify a list of contributors or an author in package.json.

Found 1 instance in 1 package

No License Found

License

(Experimental) License information could not be found.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

50996

increased by18.9%

Number of package files

8

increased by14.29%

Number of low license alerts

0

decreased by-100%

Lines of code

983

increased by9.1%

Number of low maintenance alerts

1

decreased by-50%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

83

increased by1283.33%

No dependency changes