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

vue-polygon-cropper

Package Overview
Dependencies
Maintainers
1
Versions
7
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-polygon-cropper - npm Package Compare versions

Comparing version 0.6.0 to 0.7.0

789

dist/PolygonCropper.esm.js

@@ -1,379 +0,494 @@

import { openBlock, createBlock, withDirectives, createVNode, vShow, Fragment, renderList } from 'vue';
//
//
//
//
//
//
//
//
//
//
//
//
//
var script = {
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: true
},
showPointer: {
type: Boolean,
default: true
}
name: "PolygonCrop",
props: {
canvasClass: {
type: String,
default: ""
},
data: function data() {
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
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: true
},
showPointer: {
type: Boolean,
default: true
}
},
data: function data() {
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 mounted() {
this._initialize();
},
methods: {
_initialize: function () {
var this$1 = this;
this.imageCanvas = this.$refs.canvas;
this.ctx = this.imageCanvas.getContext("2d");
var img = new Image();
img.onload = function () {
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;
},
mounted: function mounted() {
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();
},
methods: {
_initialize: function () {
var this$1 = this;
savePointer: function (point) {
this.redoPointer = [];
this.currentPointer.push(point);
this.undoPointer.push(point);
},
restorePointer: function (pop, push, undo) {
if (pop.length > 0) {
var item = pop.pop();
push.push(item);
if (undo) {
this.oldPositionX = item.positionX;
this.oldPositionY = item.positionY;
this.currentPointer.pop();
} else {
if (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(item);
}
}
},
restoreMarks: function (pop, push, undo) {
var ref;
this.imageCanvas = this.$refs.canvas;
this.ctx = this.imageCanvas.getContext("2d");
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);
}
}
},
saveState: function (canvas, list, keepRedo) {
keepRedo = keepRedo || false;
if (!keepRedo) {
this.redoList = [];
}
(list || this.undoList).push(canvas.toDataURL());
},
restoreState: function (pop, push) {
var this$1 = this;
if (pop.length) {
this.saveState(this.imageCanvas, push, true);
var restoreState = pop.pop();
var img = new Image();
img.src = restoreState;
img.onload = function () {
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;
};
this$1.ctx.clearRect(0, 0, this$1.imgWidth, this$1.imgHeight);
this$1.ctx.drawImage(img, 0, 0);
};
img.src = this.imageSource;
}
},
undo: function () {
if (this.editing) {
this.editing = 0;
this.restoreState(this.undoList, this.redoList);
this.restorePointer(this.undoPointer, this.redoPointer, true);
this.restoreMarks(this.undoMarks, this.redoMarks, true);
this.editing = 1;
}
},
redo: function () {
if (this.editing) {
this.editing = 0;
this.restoreState(this.redoList, this.undoList);
this.restorePointer(this.redoPointer, this.undoPointer, false);
this.restoreMarks(this.redoMarks, this.undoMarks, false);
this.editing = 1;
}
},
crop: function () {
var this$1 = this;
},
empty: function () {
this.redoList = [];
this.undoList = [];
this.redoPointer = [];
this.undoPointer = [];
if (this.editing) {
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 (point) {
this.redoPointer = [];
this.currentPointer.push(point);
this.undoPointer.push(point);
},
restorePointer: function (pop, push, undo) {
if (pop.length > 0) {
var item = pop.pop();
push.push(item);
if (undo) {
this.oldPositionX = item.positionX;
this.oldPositionY = item.positionY;
this.currentPointer.pop();
this.ctx.clearRect(0, 0, this.imgWidth, this.imgHeight);
this.ctx.beginPath();
this.ctx.globalCompositeOperation = 'destination-over';
var left = this.imageCanvas.offsetLeft;
var top = this.imageCanvas.offsetTop;
for (var i = 0; i < this.currentMarks.length; i += 2) {
var x = this.currentMarks[i];
var y = this.currentMarks[i + 1];
if (i === 0) {
this.ctx.moveTo(x - left, y - top);
} else {
if (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(item);
this.ctx.lineTo(x - left, y - top);
}
}
},
restoreMarks: function (pop, push, undo) {
var ref;
this.ctx.fillStyle = this.ctx.createPattern(this.imageObj, "repeat");
this.ctx.fill();
var trimmedCanvas = this.trimEmptyPixel(this.imageCanvas, this.ctx);
var dataUrl = trimmedCanvas.toDataURL("image/png");
this.resultImage = dataUrl;
this.editing = 0;
var img = new Image();
img.onload = function () {
this$1.ctx.canvas.width = img.width;
this$1.ctx.canvas.height = img.height;
this$1.ctx.drawImage(img, 0, 0);
};
img.src = dataUrl;
this.empty();
}
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);
},
mouseDown: function (e) {
if (this.editing === 1) {
if (e.which === 1) {
//store the points if mousedown
if (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();
}
}
},
saveState: function (canvas, list, keepRedo) {
keepRedo = keepRedo || false;
if (!keepRedo) {
this.redoList = [];
}
(list || this.undoList).push(canvas.toDataURL());
},
restoreState: function (pop, push) {
var this$1 = this;
this.redoMarks = [];
this.currentMarks.push(e.pageX, e.pageY);
this.undoMarks.push(e.pageX, e.pageY);
this.saveState(this.imageCanvas);
this.savePointer({
x: e.pageX + 'px',
y: e.pageY + 'px',
positionX: e.offsetX,
positionY: e.offsetY
});
if (pop.length) {
this.saveState(this.imageCanvas, push, true);
var restoreState = pop.pop();
var img = new Image();
img.src = restoreState;
img.onload = function () {
this$1.ctx.clearRect(0, 0, this$1.imgWidth, this$1.imgHeight);
this$1.ctx.drawImage(img, 0, 0);
};
this.oldPositionX = e.offsetX;
this.oldPositionY = e.offsetY;
}
},
undo: function () {
if (this.editing) {
this.editing = 0;
this.restoreState(this.undoList, this.redoList);
this.restorePointer(this.undoPointer, this.redoPointer, true);
this.restoreMarks(this.undoMarks, this.redoMarks, true);
this.editing = 1;
}
},
redo: function () {
if (this.editing) {
this.editing = 0;
this.restoreState(this.redoList, this.undoList);
this.restorePointer(this.redoPointer, this.undoPointer, false);
this.restoreMarks(this.redoMarks, this.undoMarks, false);
this.editing = 1;
}
},
crop: function () {
var this$1 = this;
this.positionX = e.offsetX;
this.positionY = e.offsetY;
}
},
mouseMove: function (e) {
if (this.editing === 1) {
this.positionX = e.offsetX;
this.positionY = e.offsetY;
}
},
trimEmptyPixel: function (c, ctx) {
var copy = document.createElement('canvas').getContext('2d'),
pixels = ctx.getImageData(0, 0, c.width, c.height),
l = pixels.data.length,
i,
bound = {
top: null,
left: null,
right: null,
bottom: null
},
x, y;
for (i = 0; i < l; i += 4) {
if (pixels.data[i + 3] !== 0) {
x = (i / 4) % c.width;
y = ~~((i / 4) / c.width);
if (this.editing) {
this.currentPointer = [];
this.ctx.clearRect(0, 0, this.imgWidth, this.imgHeight);
this.ctx.beginPath();
this.ctx.globalCompositeOperation = 'destination-over';
var left = this.imageCanvas.offsetLeft;
var top = this.imageCanvas.offsetTop;
for (var i = 0; i < this.currentMarks.length; i += 2) {
var x = this.currentMarks[i];
var y = this.currentMarks[i + 1];
if (i === 0) {
this.ctx.moveTo(x - left, y - top);
} else {
this.ctx.lineTo(x - left, y - top);
}
if (bound.top === null) {
bound.top = y;
}
this.ctx.fillStyle = this.ctx.createPattern(this.imageObj, "repeat");
this.ctx.fill();
var trimmedCanvas = this.trimEmptyPixel(this.imageCanvas, this.ctx);
var dataUrl = trimmedCanvas.toDataURL("image/png");
this.resultImage = dataUrl;
this.editing = 0;
var img = new Image();
img.onload = function () {
this$1.ctx.canvas.width = img.width;
this$1.ctx.canvas.height = img.height;
this$1.ctx.drawImage(img, 0, 0);
};
img.src = dataUrl;
this.empty();
}
},
mouseDown: function (e) {
if (this.editing === 1) {
if (e.which === 1) {
//store the points if mousedown
if (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(e.pageX, e.pageY);
this.undoMarks.push(e.pageX, e.pageY);
this.saveState(this.imageCanvas);
this.savePointer({
x: e.pageX + 'px',
y: e.pageY + 'px',
positionX: e.offsetX,
positionY: e.offsetY
});
if (bound.left === null) {
bound.left = x;
} else if (x < bound.left) {
bound.left = x;
}
this.oldPositionX = e.offsetX;
this.oldPositionY = e.offsetY;
if (bound.right === null) {
bound.right = x;
} else if (bound.right < x) {
bound.right = x;
}
this.positionX = e.offsetX;
this.positionY = e.offsetY;
}
},
mouseMove: function (e) {
if (this.editing === 1) {
this.positionX = e.offsetX;
this.positionY = e.offsetY;
}
},
trimEmptyPixel: function (c, ctx) {
var copy = document.createElement('canvas').getContext('2d'),
pixels = ctx.getImageData(0, 0, c.width, c.height),
l = pixels.data.length,
i,
bound = {
top: null,
left: null,
right: null,
bottom: null
},
x, y;
for (i = 0; i < l; i += 4) {
if (pixels.data[i + 3] !== 0) {
x = (i / 4) % c.width;
y = ~~((i / 4) / c.width);
if (bound.top === null) {
bound.top = y;
}
if (bound.left === null) {
bound.left = x;
} else if (x < bound.left) {
bound.left = x;
}
if (bound.right === null) {
bound.right = x;
} else if (bound.right < x) {
bound.right = x;
}
if (bound.bottom === null) {
bound.bottom = y;
} else if (bound.bottom < y) {
bound.bottom = y;
}
if (bound.bottom === null) {
bound.bottom = y;
} else if (bound.bottom < y) {
bound.bottom = y;
}
}
}
// Calculate the height and width of the content
var trimHeight = bound.bottom - bound.top,
trimWidth = bound.right - bound.left,
trimmed = ctx.getImageData(bound.left, bound.top, trimWidth, trimHeight);
// Calculate the height and width of the content
var trimHeight = bound.bottom - bound.top,
trimWidth = bound.right - bound.left,
trimmed = ctx.getImageData(bound.left, bound.top, trimWidth, trimHeight);
copy.canvas.width = trimWidth;
copy.canvas.height = trimHeight;
copy.putImageData(trimmed, 0, 0);
return copy.canvas;
},
copy.canvas.width = trimWidth;
copy.canvas.height = trimHeight;
copy.putImageData(trimmed, 0, 0);
return copy.canvas;
},
watch: {
imageSource: function (val) {
this.empty();
this._initialize();
},
}
};
},
watch: {
imageSource: function (val) {
this.empty();
this._initialize();
},
}
};
function render(_ctx, _cache, $props, $setup, $data, $options) {
return (openBlock(), createBlock("div", { class: $props.wrapperClass }, [
withDirectives(createVNode("canvas", {
class: $props.canvasClass,
ref: "canvas",
onMousedown: _cache[1] || (_cache[1] = function () {
var args = [], len = arguments.length;
while ( len-- ) args[ len ] = arguments[ len ];
function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
if (typeof shadowMode !== 'boolean') {
createInjectorSSR = createInjector;
createInjector = shadowMode;
shadowMode = false;
}
// Vue.extend constructor export interop.
var options = typeof script === 'function' ? script.options : script;
// render functions
if (template && template.render) {
options.render = template.render;
options.staticRenderFns = template.staticRenderFns;
options._compiled = true;
// functional template
if (isFunctionalTemplate) {
options.functional = true;
}
}
// scopedId
if (scopeId) {
options._scopeId = scopeId;
}
var hook;
if (moduleIdentifier) {
// server build
hook = function (context) {
// 2.3 injection
context =
context || // cached call
(this.$vnode && this.$vnode.ssrContext) || // stateful
(this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
// 2.2 with runInNewContext: true
if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
context = __VUE_SSR_CONTEXT__;
}
// inject component styles
if (style) {
style.call(this, createInjectorSSR(context));
}
// register component module identifier for async chunk inference
if (context && context._registeredComponents) {
context._registeredComponents.add(moduleIdentifier);
}
};
// used by ssr in case component is cached and beforeCreate
// never gets called
options._ssrRegister = hook;
}
else if (style) {
hook = shadowMode
? function (context) {
style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
}
: function (context) {
style.call(this, createInjector(context));
};
}
if (hook) {
if (options.functional) {
// register for functional component in vue file
var originalRender = options.render;
options.render = function renderWithStyleInjection(h, context) {
hook.call(context);
return originalRender(h, context);
};
}
else {
// inject component registration as beforeCreate hook
var existing = options.beforeCreate;
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
}
}
return script;
}
return ($options.mouseDown && $options.mouseDown.apply($options, args));
}),
onMousemove: _cache[2] || (_cache[2] = function () {
var args = [], len = arguments.length;
while ( len-- ) args[ len ] = arguments[ len ];
return ($options.mouseMove && $options.mouseMove.apply($options, args));
})
}, null, 34), [
[vShow, $props.showCanvas]
]),
(openBlock(true), createBlock(Fragment, null, renderList($data.currentPointer, function (point) {
return withDirectives((openBlock(), createBlock("span", {
class: ("vue-crop-pointer " + ($props.pointerClass)),
style: {top:point.y, left:point.x}
}, null, 6)), [
[vShow, $props.showPointer]
])
}), 256))
], 2))
var isOldIE = typeof navigator !== 'undefined' &&
/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
function createInjector(context) {
return function (id, style) { return addStyle(id, style); };
}
var HEAD;
var styles = {};
function addStyle(id, css) {
var group = isOldIE ? css.media || 'default' : id;
var style = styles[group] || (styles[group] = { ids: new Set(), styles: [] });
if (!style.ids.has(id)) {
style.ids.add(id);
var code = css.source;
if (css.map) {
// https://developer.chrome.com/devtools/docs/javascript-debugging
// this makes source maps inside style tags work properly in Chrome
code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
// http://stackoverflow.com/a/26603875
code +=
'\n/*# sourceMappingURL=data:application/json;base64,' +
btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
' */';
}
if (!style.element) {
style.element = document.createElement('style');
style.element.type = 'text/css';
if (css.media)
{ style.element.setAttribute('media', css.media); }
if (HEAD === undefined) {
HEAD = document.head || document.getElementsByTagName('head')[0];
}
HEAD.appendChild(style.element);
}
if ('styleSheet' in style.element) {
style.styles.push(code);
style.element.styleSheet.cssText = style.styles
.filter(Boolean)
.join('\n');
}
else {
var index = style.ids.size - 1;
var textNode = document.createTextNode(code);
var nodes = style.element.childNodes;
if (nodes[index])
{ style.element.removeChild(nodes[index]); }
if (nodes.length)
{ style.element.insertBefore(textNode, nodes[index]); }
else
{ style.element.appendChild(textNode); }
}
}
}
function styleInject(css, ref) {
if ( ref === void 0 ) { ref = {}; }
var insertAt = ref.insertAt;
/* script */
var __vue_script__ = script;
if (!css || typeof document === 'undefined') { return; }
/* 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,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__ = [];
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
/* style */
var __vue_inject_styles__ = function (inject) {
if (!inject) { return }
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 });
if (insertAt === 'top') {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else {
head.appendChild(style);
}
} else {
head.appendChild(style);
}
};
/* scoped */
var __vue_scope_id__ = undefined;
/* module identifier */
var __vue_module_identifier__ = undefined;
/* functional template */
var __vue_is_functional_template__ = false;
/* style inject SSR */
/* style inject shadow dom */
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}
var __vue_component__ = /*#__PURE__*/normalizeComponent(
{ render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
__vue_inject_styles__,
__vue_script__,
__vue_scope_id__,
__vue_is_functional_template__,
__vue_module_identifier__,
false,
createInjector,
undefined,
undefined
);
var css_248z = "\n.vue-crop-pointer {\n border: solid 1px #000;\n filter: alpha(opacity=50);\n opacity: 0.5;\n position: absolute;\n width: 5px;\n height: 5px;\n}\ncanvas {\n position: relative;\n margin-left: 0px;\n margin-top: 0px;\n cursor: crosshair\n}\n";
styleInject(css_248z);
script.render = render;
function install(Vue) {
if (install.installed) { return; }
install.installed = true;
Vue.component("PolygonCrop", script);
Vue.component("PolygonCrop", __vue_component__);
}

@@ -396,4 +511,4 @@

script.install = install;
__vue_component__.install = install;
export default script;
export default __vue_component__;

2

dist/PolygonCropper.min.js

@@ -1,1 +0,1 @@

var PolygonCropper=function(t,i){"use strict";function e(t,e,o,n,s,r){return i.openBlock(),i.createBlock("div",{class:o.wrapperClass},[i.withDirectives(i.createVNode("canvas",{class:o.canvasClass,ref:"canvas",onMousedown:e[1]||(e[1]=function(){for(var t=[],i=arguments.length;i--;)t[i]=arguments[i];return r.mouseDown&&r.mouseDown.apply(r,t)}),onMousemove:e[2]||(e[2]=function(){for(var t=[],i=arguments.length;i--;)t[i]=arguments[i];return r.mouseMove&&r.mouseMove.apply(r,t)})},null,34),[[i.vShow,o.showCanvas]]),(i.openBlock(!0),i.createBlock(i.Fragment,null,i.renderList(s.currentPointer,function(t){return i.withDirectives((i.openBlock(),i.createBlock("span",{class:"vue-crop-pointer "+o.pointerClass,style:{top:t.y,left:t.x}},null,6)),[[i.vShow,o.showPointer]])}),256))],2)}function o(t){o.installed||(o.installed=!0,t.component("PolygonCrop",n))}var n={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 i=new Image;i.onload=function(){t.imgWidth=t.width>0?t.width:i.width,t.imgHeight=t.height>0?t.height:i.height,t.ctx.canvas.width=t.imgWidth,t.ctx.canvas.height=t.imgHeight,t.ctx.drawImage(i,0,0,i.width,i.height,0,0,t.imgWidth,t.imgHeight);var e=new Image;e.src=t.imageCanvas.toDataURL(),e.onload=function(){t.imageObj=e}},i.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,i,e){if(t.length>0){var o=t.pop();i.push(o),e?(this.oldPositionX=o.positionX,this.oldPositionY=o.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(o))}},restoreMarks:function(t,i,e){var o;if(t.length>1){var n=t.splice(t.length-2,2);i.push.apply(i,n),e?this.currentMarks.splice(t.length-2,2):(o=this.currentMarks).push.apply(o,n)}},saveState:function(t,i,e){(e=e||!1)||(this.redoList=[]),(i||this.undoList).push(t.toDataURL())},restoreState:function(t,i){var e=this;if(t.length){this.saveState(this.imageCanvas,i,!0);var o=t.pop(),n=new Image;n.src=o,n.onload=function(){e.ctx.clearRect(0,0,e.imgWidth,e.imgHeight),e.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 i=this.imageCanvas.offsetLeft,e=this.imageCanvas.offsetTop,o=0;o<this.currentMarks.length;o+=2){var n=this.currentMarks[o],s=this.currentMarks[o+1];0===o?this.ctx.moveTo(n-i,s-e):this.ctx.lineTo(n-i,s-e)}this.ctx.fillStyle=this.ctx.createPattern(this.imageObj,"repeat"),this.ctx.fill();var r=this.trimEmptyPixel(this.imageCanvas,this.ctx).toDataURL("image/png");this.resultImage=r,this.editing=0;var a=new Image;a.onload=function(){t.ctx.canvas.width=a.width,t.ctx.canvas.height=a.height,t.ctx.drawImage(a,0,0)},a.src=r,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,i){var e,o,n,s=document.createElement("canvas").getContext("2d"),r=i.getImageData(0,0,t.width,t.height),a=r.data.length,h={top:null,left:null,right:null,bottom:null};for(e=0;e<a;e+=4)0!==r.data[e+3]&&(o=e/4%t.width,n=~~(e/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,u=h.right-h.left,d=i.getImageData(h.left,h.top,u,l);return s.canvas.width=u,s.canvas.height=l,s.putImageData(d,0,0),s.canvas}},watch:{imageSource:function(t){this.empty(),this._initialize()}}};!function(t,i){void 0===i&&(i={});var e=i.insertAt;if(t&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===e&&o.firstChild?o.insertBefore(n,o.firstChild):o.appendChild(n),n.styleSheet?n.styleSheet.cssText=t:n.appendChild(document.createTextNode(t))}}("\n.vue-crop-pointer {\n border: solid 1px #000;\n filter: alpha(opacity=50);\n opacity: 0.5;\n position: absolute;\n width: 5px;\n height: 5px;\n}\ncanvas {\n position: relative;\n margin-left: 0px;\n margin-top: 0px;\n cursor: crosshair\n}\n"),n.render=e;var s={install:o},r=null;return"undefined"!=typeof window?r=window.Vue:"undefined"!=typeof global&&(r=global.vue),r&&r.use(s),n.install=o,t.default=n,t}({},vue);
var PolygonCropper=function(t){"use strict";function e(t){return function(t,e){return i(t,e)}}function i(t,e){var i=a?e.media||"default":t,s=r[i]||(r[i]={ids:new Set,styles:[]});if(!s.ids.has(t)){s.ids.add(t);var o=e.source;if(e.map&&(o+="\n/*# sourceURL="+e.map.sources[0]+" */",o+="\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),void 0===n&&(n=document.head||document.getElementsByTagName("head")[0]),n.appendChild(s.element)),"styleSheet"in s.element)s.styles.push(o),s.element.styleSheet.cssText=s.styles.filter(Boolean).join("\n");else{var h=s.ids.size-1,d=document.createTextNode(o),l=s.element.childNodes;l[h]&&s.element.removeChild(l[h]),l.length?s.element.insertBefore(d,l[h]):s.element.appendChild(d)}}}function s(t){s.installed||(s.installed=!0,t.component("PolygonCrop",h))}var n,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 d=h.bottom-h.top,l=h.right-h.left,u=e.getImageData(h.left,h.top,l,d);return o.canvas.width=l,o.canvas.height=d,o.putImageData(u,0,0),o.canvas}},watch:{imageSource:function(t){this.empty(),this._initialize()}}},a="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase()),r={},h=function(t,e,i,s,n,o,a,r,h,d){"boolean"!=typeof a&&(h=r,r=a,a=!1);var l="function"==typeof i?i.options:i;t&&t.render&&(l.render=t.render,l.staticRenderFns=t.staticRenderFns,l._compiled=!0,n&&(l.functional=!0)),s&&(l._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)},l._ssrRegister=u):e&&(u=a?function(t){e.call(this,d(t,this.$root.$options.shadowRoot))}:function(t){e.call(this,r(t))}),u)if(l.functional){var c=l.render;l.render=function(t,e){return u.call(e),c(t,e)}}else{var p=l.beforeCreate;l.beforeCreate=p?[].concat(p,u):[u]}return i}({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,!1,e,void 0,void 0),d={install:s},l=null;return"undefined"!=typeof window?l=window.Vue:"undefined"!=typeof global&&(l=global.vue),l&&l.use(d),h.install=s,t.default=h,t}({});

797

dist/PolygonCropper.umd.js
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
typeof define === 'function' && define.amd ? define(['exports', 'vue'], factory) :
(global = global || self, factory(global.PolygonCropper = {}, global.vue));
}(this, (function (exports, vue) { 'use strict';
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
typeof define === 'function' && define.amd ? define(['exports'], factory) :
(global = global || self, factory(global.PolygonCropper = {}));
}(this, (function (exports) { 'use strict';
//
//
//
//
//
//
//
//
//
//
//
//
//
var script = {
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: true
},
showPointer: {
type: Boolean,
default: true
}
name: "PolygonCrop",
props: {
canvasClass: {
type: String,
default: ""
},
data: function data() {
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
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: true
},
showPointer: {
type: Boolean,
default: true
}
},
data: function data() {
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 mounted() {
this._initialize();
},
methods: {
_initialize: function () {
var this$1 = this;
this.imageCanvas = this.$refs.canvas;
this.ctx = this.imageCanvas.getContext("2d");
var img = new Image();
img.onload = function () {
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;
},
mounted: function mounted() {
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();
},
methods: {
_initialize: function () {
var this$1 = this;
savePointer: function (point) {
this.redoPointer = [];
this.currentPointer.push(point);
this.undoPointer.push(point);
},
restorePointer: function (pop, push, undo) {
if (pop.length > 0) {
var item = pop.pop();
push.push(item);
if (undo) {
this.oldPositionX = item.positionX;
this.oldPositionY = item.positionY;
this.currentPointer.pop();
} else {
if (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(item);
}
}
},
restoreMarks: function (pop, push, undo) {
var ref;
this.imageCanvas = this.$refs.canvas;
this.ctx = this.imageCanvas.getContext("2d");
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);
}
}
},
saveState: function (canvas, list, keepRedo) {
keepRedo = keepRedo || false;
if (!keepRedo) {
this.redoList = [];
}
(list || this.undoList).push(canvas.toDataURL());
},
restoreState: function (pop, push) {
var this$1 = this;
if (pop.length) {
this.saveState(this.imageCanvas, push, true);
var restoreState = pop.pop();
var img = new Image();
img.src = restoreState;
img.onload = function () {
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;
};
this$1.ctx.clearRect(0, 0, this$1.imgWidth, this$1.imgHeight);
this$1.ctx.drawImage(img, 0, 0);
};
img.src = this.imageSource;
}
},
undo: function () {
if (this.editing) {
this.editing = 0;
this.restoreState(this.undoList, this.redoList);
this.restorePointer(this.undoPointer, this.redoPointer, true);
this.restoreMarks(this.undoMarks, this.redoMarks, true);
this.editing = 1;
}
},
redo: function () {
if (this.editing) {
this.editing = 0;
this.restoreState(this.redoList, this.undoList);
this.restorePointer(this.redoPointer, this.undoPointer, false);
this.restoreMarks(this.redoMarks, this.undoMarks, false);
this.editing = 1;
}
},
crop: function () {
var this$1 = this;
},
empty: function () {
this.redoList = [];
this.undoList = [];
this.redoPointer = [];
this.undoPointer = [];
if (this.editing) {
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 (point) {
this.redoPointer = [];
this.currentPointer.push(point);
this.undoPointer.push(point);
},
restorePointer: function (pop, push, undo) {
if (pop.length > 0) {
var item = pop.pop();
push.push(item);
if (undo) {
this.oldPositionX = item.positionX;
this.oldPositionY = item.positionY;
this.currentPointer.pop();
this.ctx.clearRect(0, 0, this.imgWidth, this.imgHeight);
this.ctx.beginPath();
this.ctx.globalCompositeOperation = 'destination-over';
var left = this.imageCanvas.offsetLeft;
var top = this.imageCanvas.offsetTop;
for (var i = 0; i < this.currentMarks.length; i += 2) {
var x = this.currentMarks[i];
var y = this.currentMarks[i + 1];
if (i === 0) {
this.ctx.moveTo(x - left, y - top);
} else {
if (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(item);
this.ctx.lineTo(x - left, y - top);
}
}
},
restoreMarks: function (pop, push, undo) {
var ref;
this.ctx.fillStyle = this.ctx.createPattern(this.imageObj, "repeat");
this.ctx.fill();
var trimmedCanvas = this.trimEmptyPixel(this.imageCanvas, this.ctx);
var dataUrl = trimmedCanvas.toDataURL("image/png");
this.resultImage = dataUrl;
this.editing = 0;
var img = new Image();
img.onload = function () {
this$1.ctx.canvas.width = img.width;
this$1.ctx.canvas.height = img.height;
this$1.ctx.drawImage(img, 0, 0);
};
img.src = dataUrl;
this.empty();
}
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);
},
mouseDown: function (e) {
if (this.editing === 1) {
if (e.which === 1) {
//store the points if mousedown
if (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();
}
}
},
saveState: function (canvas, list, keepRedo) {
keepRedo = keepRedo || false;
if (!keepRedo) {
this.redoList = [];
}
(list || this.undoList).push(canvas.toDataURL());
},
restoreState: function (pop, push) {
var this$1 = this;
this.redoMarks = [];
this.currentMarks.push(e.pageX, e.pageY);
this.undoMarks.push(e.pageX, e.pageY);
this.saveState(this.imageCanvas);
this.savePointer({
x: e.pageX + 'px',
y: e.pageY + 'px',
positionX: e.offsetX,
positionY: e.offsetY
});
if (pop.length) {
this.saveState(this.imageCanvas, push, true);
var restoreState = pop.pop();
var img = new Image();
img.src = restoreState;
img.onload = function () {
this$1.ctx.clearRect(0, 0, this$1.imgWidth, this$1.imgHeight);
this$1.ctx.drawImage(img, 0, 0);
};
this.oldPositionX = e.offsetX;
this.oldPositionY = e.offsetY;
}
},
undo: function () {
if (this.editing) {
this.editing = 0;
this.restoreState(this.undoList, this.redoList);
this.restorePointer(this.undoPointer, this.redoPointer, true);
this.restoreMarks(this.undoMarks, this.redoMarks, true);
this.editing = 1;
}
},
redo: function () {
if (this.editing) {
this.editing = 0;
this.restoreState(this.redoList, this.undoList);
this.restorePointer(this.redoPointer, this.undoPointer, false);
this.restoreMarks(this.redoMarks, this.undoMarks, false);
this.editing = 1;
}
},
crop: function () {
var this$1 = this;
this.positionX = e.offsetX;
this.positionY = e.offsetY;
}
},
mouseMove: function (e) {
if (this.editing === 1) {
this.positionX = e.offsetX;
this.positionY = e.offsetY;
}
},
trimEmptyPixel: function (c, ctx) {
var copy = document.createElement('canvas').getContext('2d'),
pixels = ctx.getImageData(0, 0, c.width, c.height),
l = pixels.data.length,
i,
bound = {
top: null,
left: null,
right: null,
bottom: null
},
x, y;
for (i = 0; i < l; i += 4) {
if (pixels.data[i + 3] !== 0) {
x = (i / 4) % c.width;
y = ~~((i / 4) / c.width);
if (this.editing) {
this.currentPointer = [];
this.ctx.clearRect(0, 0, this.imgWidth, this.imgHeight);
this.ctx.beginPath();
this.ctx.globalCompositeOperation = 'destination-over';
var left = this.imageCanvas.offsetLeft;
var top = this.imageCanvas.offsetTop;
for (var i = 0; i < this.currentMarks.length; i += 2) {
var x = this.currentMarks[i];
var y = this.currentMarks[i + 1];
if (i === 0) {
this.ctx.moveTo(x - left, y - top);
} else {
this.ctx.lineTo(x - left, y - top);
}
if (bound.top === null) {
bound.top = y;
}
this.ctx.fillStyle = this.ctx.createPattern(this.imageObj, "repeat");
this.ctx.fill();
var trimmedCanvas = this.trimEmptyPixel(this.imageCanvas, this.ctx);
var dataUrl = trimmedCanvas.toDataURL("image/png");
this.resultImage = dataUrl;
this.editing = 0;
var img = new Image();
img.onload = function () {
this$1.ctx.canvas.width = img.width;
this$1.ctx.canvas.height = img.height;
this$1.ctx.drawImage(img, 0, 0);
};
img.src = dataUrl;
this.empty();
}
},
mouseDown: function (e) {
if (this.editing === 1) {
if (e.which === 1) {
//store the points if mousedown
if (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(e.pageX, e.pageY);
this.undoMarks.push(e.pageX, e.pageY);
this.saveState(this.imageCanvas);
this.savePointer({
x: e.pageX + 'px',
y: e.pageY + 'px',
positionX: e.offsetX,
positionY: e.offsetY
});
if (bound.left === null) {
bound.left = x;
} else if (x < bound.left) {
bound.left = x;
}
this.oldPositionX = e.offsetX;
this.oldPositionY = e.offsetY;
if (bound.right === null) {
bound.right = x;
} else if (bound.right < x) {
bound.right = x;
}
this.positionX = e.offsetX;
this.positionY = e.offsetY;
}
},
mouseMove: function (e) {
if (this.editing === 1) {
this.positionX = e.offsetX;
this.positionY = e.offsetY;
}
},
trimEmptyPixel: function (c, ctx) {
var copy = document.createElement('canvas').getContext('2d'),
pixels = ctx.getImageData(0, 0, c.width, c.height),
l = pixels.data.length,
i,
bound = {
top: null,
left: null,
right: null,
bottom: null
},
x, y;
for (i = 0; i < l; i += 4) {
if (pixels.data[i + 3] !== 0) {
x = (i / 4) % c.width;
y = ~~((i / 4) / c.width);
if (bound.top === null) {
bound.top = y;
}
if (bound.left === null) {
bound.left = x;
} else if (x < bound.left) {
bound.left = x;
}
if (bound.right === null) {
bound.right = x;
} else if (bound.right < x) {
bound.right = x;
}
if (bound.bottom === null) {
bound.bottom = y;
} else if (bound.bottom < y) {
bound.bottom = y;
}
if (bound.bottom === null) {
bound.bottom = y;
} else if (bound.bottom < y) {
bound.bottom = y;
}
}
}
// Calculate the height and width of the content
var trimHeight = bound.bottom - bound.top,
trimWidth = bound.right - bound.left,
trimmed = ctx.getImageData(bound.left, bound.top, trimWidth, trimHeight);
// Calculate the height and width of the content
var trimHeight = bound.bottom - bound.top,
trimWidth = bound.right - bound.left,
trimmed = ctx.getImageData(bound.left, bound.top, trimWidth, trimHeight);
copy.canvas.width = trimWidth;
copy.canvas.height = trimHeight;
copy.putImageData(trimmed, 0, 0);
return copy.canvas;
},
copy.canvas.width = trimWidth;
copy.canvas.height = trimHeight;
copy.putImageData(trimmed, 0, 0);
return copy.canvas;
},
watch: {
imageSource: function (val) {
this.empty();
this._initialize();
},
}
};
},
watch: {
imageSource: function (val) {
this.empty();
this._initialize();
},
}
};
function render(_ctx, _cache, $props, $setup, $data, $options) {
return (vue.openBlock(), vue.createBlock("div", { class: $props.wrapperClass }, [
vue.withDirectives(vue.createVNode("canvas", {
class: $props.canvasClass,
ref: "canvas",
onMousedown: _cache[1] || (_cache[1] = function () {
var args = [], len = arguments.length;
while ( len-- ) args[ len ] = arguments[ len ];
function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
if (typeof shadowMode !== 'boolean') {
createInjectorSSR = createInjector;
createInjector = shadowMode;
shadowMode = false;
}
// Vue.extend constructor export interop.
var options = typeof script === 'function' ? script.options : script;
// render functions
if (template && template.render) {
options.render = template.render;
options.staticRenderFns = template.staticRenderFns;
options._compiled = true;
// functional template
if (isFunctionalTemplate) {
options.functional = true;
}
}
// scopedId
if (scopeId) {
options._scopeId = scopeId;
}
var hook;
if (moduleIdentifier) {
// server build
hook = function (context) {
// 2.3 injection
context =
context || // cached call
(this.$vnode && this.$vnode.ssrContext) || // stateful
(this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
// 2.2 with runInNewContext: true
if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
context = __VUE_SSR_CONTEXT__;
}
// inject component styles
if (style) {
style.call(this, createInjectorSSR(context));
}
// register component module identifier for async chunk inference
if (context && context._registeredComponents) {
context._registeredComponents.add(moduleIdentifier);
}
};
// used by ssr in case component is cached and beforeCreate
// never gets called
options._ssrRegister = hook;
}
else if (style) {
hook = shadowMode
? function (context) {
style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
}
: function (context) {
style.call(this, createInjector(context));
};
}
if (hook) {
if (options.functional) {
// register for functional component in vue file
var originalRender = options.render;
options.render = function renderWithStyleInjection(h, context) {
hook.call(context);
return originalRender(h, context);
};
}
else {
// inject component registration as beforeCreate hook
var existing = options.beforeCreate;
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
}
}
return script;
}
return ($options.mouseDown && $options.mouseDown.apply($options, args));
}),
onMousemove: _cache[2] || (_cache[2] = function () {
var args = [], len = arguments.length;
while ( len-- ) args[ len ] = arguments[ len ];
return ($options.mouseMove && $options.mouseMove.apply($options, args));
})
}, null, 34), [
[vue.vShow, $props.showCanvas]
]),
(vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList($data.currentPointer, function (point) {
return vue.withDirectives((vue.openBlock(), vue.createBlock("span", {
class: ("vue-crop-pointer " + ($props.pointerClass)),
style: {top:point.y, left:point.x}
}, null, 6)), [
[vue.vShow, $props.showPointer]
])
}), 256))
], 2))
var isOldIE = typeof navigator !== 'undefined' &&
/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
function createInjector(context) {
return function (id, style) { return addStyle(id, style); };
}
var HEAD;
var styles = {};
function addStyle(id, css) {
var group = isOldIE ? css.media || 'default' : id;
var style = styles[group] || (styles[group] = { ids: new Set(), styles: [] });
if (!style.ids.has(id)) {
style.ids.add(id);
var code = css.source;
if (css.map) {
// https://developer.chrome.com/devtools/docs/javascript-debugging
// this makes source maps inside style tags work properly in Chrome
code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
// http://stackoverflow.com/a/26603875
code +=
'\n/*# sourceMappingURL=data:application/json;base64,' +
btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
' */';
}
if (!style.element) {
style.element = document.createElement('style');
style.element.type = 'text/css';
if (css.media)
{ style.element.setAttribute('media', css.media); }
if (HEAD === undefined) {
HEAD = document.head || document.getElementsByTagName('head')[0];
}
HEAD.appendChild(style.element);
}
if ('styleSheet' in style.element) {
style.styles.push(code);
style.element.styleSheet.cssText = style.styles
.filter(Boolean)
.join('\n');
}
else {
var index = style.ids.size - 1;
var textNode = document.createTextNode(code);
var nodes = style.element.childNodes;
if (nodes[index])
{ style.element.removeChild(nodes[index]); }
if (nodes.length)
{ style.element.insertBefore(textNode, nodes[index]); }
else
{ style.element.appendChild(textNode); }
}
}
}
function styleInject(css, ref) {
if ( ref === void 0 ) { ref = {}; }
var insertAt = ref.insertAt;
/* script */
var __vue_script__ = script;
if (!css || typeof document === 'undefined') { return; }
/* 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,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__ = [];
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
/* style */
var __vue_inject_styles__ = function (inject) {
if (!inject) { return }
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 });
if (insertAt === 'top') {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else {
head.appendChild(style);
}
} else {
head.appendChild(style);
}
};
/* scoped */
var __vue_scope_id__ = undefined;
/* module identifier */
var __vue_module_identifier__ = undefined;
/* functional template */
var __vue_is_functional_template__ = false;
/* style inject SSR */
/* style inject shadow dom */
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}
var __vue_component__ = /*#__PURE__*/normalizeComponent(
{ render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
__vue_inject_styles__,
__vue_script__,
__vue_scope_id__,
__vue_is_functional_template__,
__vue_module_identifier__,
false,
createInjector,
undefined,
undefined
);
var css_248z = "\n.vue-crop-pointer {\n border: solid 1px #000;\n filter: alpha(opacity=50);\n opacity: 0.5;\n position: absolute;\n width: 5px;\n height: 5px;\n}\ncanvas {\n position: relative;\n margin-left: 0px;\n margin-top: 0px;\n cursor: crosshair\n}\n";
styleInject(css_248z);
script.render = render;
function install(Vue) {
if (install.installed) { return; }
install.installed = true;
Vue.component("PolygonCrop", script);
Vue.component("PolygonCrop", __vue_component__);
}

@@ -400,5 +517,5 @@

script.install = install;
__vue_component__.install = install;
exports.default = script;
exports.default = __vue_component__;

@@ -405,0 +522,0 @@ Object.defineProperty(exports, '__esModule', { value: true });

10

package.json
{
"name": "vue-polygon-cropper",
"version": "0.6.0",
"version": "0.7.0",
"homepage": "gobeam.github.io/vue-polygon-cropper/",

@@ -50,5 +50,3 @@ "main": "dist/PolygonCropper.umd.js",

"devDependencies": {
"@vue/compiler-sfc": "^3.0.11",
"cross-env": "^5.2.0",
"eslint-plugin-html": "^6.0.2",
"minimist": "^1.2.0",

@@ -58,10 +56,10 @@ "rollup": "^1.14.4",

"rollup-plugin-commonjs": "^9.3.4",
"rollup-plugin-postcss": "^4.0.0",
"rollup-plugin-replace": "^2.2.0",
"rollup-plugin-uglify-es": "0.0.1",
"rollup-plugin-vue": "^6.0.0",
"rollup-plugin-vue": "^5.0.0",
"vue": "^2.6.11",
"vue-template-compiler": "^2.6.10",
"vue-eslint-parser": "^7.1.0",
"vue-template-compiler": "^2.6.10"
"eslint-plugin-html": "^6.0.2"
}
}
SocketSocket SOC 2 Logo

Product

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

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc