Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
vue-polygon-cropper
Advanced tools
vue-polygon-cropper - npm Package Compare versions
Comparing version 0.2.0 to 0.3.0
@@ -320,3 +320,2 @@ // | ||
| this._initialize(); | ||
| // this.fullName = val + ' ' + this.lastName | ||
| }, | ||
@@ -471,3 +470,3 @@ } | ||
| if (!inject) { return } | ||
| 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 }); | ||
| inject("data-v-642f2e8f_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 }); | ||
@@ -474,0 +473,0 @@ }; |
@@ -1,1 +0,1 @@ | ||
| 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}({}); | ||
| 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-642f2e8f_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}({}); |
@@ -326,3 +326,2 @@ (function (global, factory) { | ||
| this._initialize(); | ||
| // this.fullName = val + ' ' + this.lastName | ||
| }, | ||
@@ -477,3 +476,3 @@ } | ||
| if (!inject) { return } | ||
| 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 }); | ||
| inject("data-v-642f2e8f_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 }); | ||
@@ -480,0 +479,0 @@ }; |
| { | ||
| "name": "vue-polygon-cropper", | ||
| "version": "0.2.0", | ||
| "version": "0.3.0", | ||
| "homepage": "gobeam.github.io/vue-polygon-cropper/", | ||
@@ -5,0 +5,0 @@ "main": "dist/PolygonCropper.umd.js", |
@@ -11,3 +11,16 @@ # vue-polygon-cropper | ||
| ``` | ||
| or with yarn | ||
| ```shell | ||
| yarn add vue-polygon-cropper | ||
| ``` | ||
| ## Demo | ||
| Checkout here **[gobeam.github.io/vue-polygon-cropper/](https://gobeam.github.io/vue-polygon-cropper/)** | ||
| ## Example | ||
| Full Example with implementation here **[Example](https://github.com/gobeam/vue-polygon-cropper/tree/master/example)** | ||
| ## Usage | ||
@@ -65,3 +78,3 @@ | ||
| |--------------|---------|----------|-------------------------------------------------------------------| | ||
| | imageSource | String | required | Image url/source to load on canvas. | | ||
| | imageSource | String | required | Image url or base64 to load on canvas. | | ||
| | canvasClass | String | optional | Pass class to canvas to load your custom style. | | ||
@@ -68,0 +81,0 @@ | wrapperClass | String | optional | Pass class to div wrapper of canvas to load your custom style. | |
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
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
- Total package byte prevSize
- increased by0.31%
51153
- Number of lines in readme file
- increased by15.66%
96
Worsened metrics
- Lines of code
- decreased by-0.2%
981
No dependency changes