vue-painting
Version:
A image tailor and painting component for Vue.
1 lines • 43.4 kB
JavaScript
webpackJsonp([1],{"44CZ":function(t,e,n){var o=n("n6Aw");"string"==typeof o&&(o=[[t.i,o,""]]),o.locals&&(t.exports=o.locals);n("rjj0")("a7775f74",o,!0,{})},"8ePf":function(t,e,n){(t.exports=n("FZ+f")(!1)).push([t.i,"\n.crop-border-box span[data-v-7c8f0bb9] {\n z-index: 1000;\n}\n.crop-border-box .crop-line[data-v-7c8f0bb9] {\n position: absolute;\n display: block;\n width: 100%;\n height: 100%;\n opacity: .1;\n}\n.crop-border-box .line-top[data-v-7c8f0bb9] {\n top: -3px;\n left: 0;\n height: 5px;\n}\n.crop-border-box .line-left[data-v-7c8f0bb9] {\n left: -3px;\n top: 0;\n width: 5px;\n}\n.crop-border-box .line-bottom[data-v-7c8f0bb9] {\n bottom: -3px;\n left: 0;\n height: 5px;\n}\n.crop-border-box .line-right[data-v-7c8f0bb9] {\n right: -3px;\n top: 0;\n width: 5px;\n}\n.crop-border-box .crop-point[data-v-7c8f0bb9] {\n position: absolute;\n width: 5px;\n height: 5px;\n opacity: .75;\n background-color: #39f;\n}\n.crop-border-box .left-top[data-v-7c8f0bb9] {\n top: -3px;\n left: -3px;\n}\n.crop-border-box .left-mid[data-v-7c8f0bb9] {\n top: 50%;\n margin-top: -3px;\n left: -3px;\n}\n.crop-border-box .left-bottom[data-v-7c8f0bb9] {\n bottom: -3px;\n left: -3px;\n}\n.crop-border-box .bottom-mid[data-v-7c8f0bb9] {\n bottom: -3px;\n left: 50%;\n margin-left: -3px;\n}\n.crop-border-box .right-bottom[data-v-7c8f0bb9] {\n bottom: -3px;\n right: -3px;\n}\n.crop-border-box .right-mid[data-v-7c8f0bb9] {\n top: 50%;\n margin-top: -3px;\n right: -3px;\n}\n.crop-border-box .right-top[data-v-7c8f0bb9] {\n top: -3px;\n right: -3px;\n}\n.crop-border-box .top-mid[data-v-7c8f0bb9] {\n top: -3px;\n left: 50%;\n margin-left: -3px;\n}\n",""])},"9TOl":function(t,e){t.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAOCAYAAAAmL5yKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QTA3NENDMTgwQzdEMTFFOEI1MjJCN0RCOTdCQ0U2NDYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QTA3NENDMTkwQzdEMTFFOEI1MjJCN0RCOTdCQ0U2NDYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBMDc0Q0MxNjBDN0QxMUU4QjUyMkI3REI5N0JDRTY0NiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBMDc0Q0MxNzBDN0QxMUU4QjUyMkI3REI5N0JDRTY0NiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PsGzyo4AAAC1SURBVHjaYiyZdP0/AwnAUoeXwUKbtwPIXAnEj1hgEt25GnBFpZNv4DTg+JXPIKoCaMgRIP2AiYEMADLkxNXPW4BMR7IMQHIJDwsxzsYD7pHtAijgg7tARZabIdJVkoGPmwWn6k9f/zAs3/2c4c7jrzChv3DVIM1okhgAZknzvDswIQ24ASCbQZqRoxMdgMIJzYVHWbApIgHYYhhAyAVo4BKlLhCl1AWsjKRmJmRQGC4VBRBgAOgXQh4aiNIXAAAAAElFTkSuQmCC"},HuI3:function(t,e,n){(t.exports=n("FZ+f")(!1)).push([t.i,"\n.drawer-container[data-v-dfd9f096] {\n position: relative;\n width: 100%;\n height: 100%;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n z-index: 10000;\n}\n.full[data-v-dfd9f096] {\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n.drawer-img-box[data-v-dfd9f096] {\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n overflow: hidden;\n}\n.drawer-img-box .drawer-img[data-v-dfd9f096] {\n width: 100%;\n height: 100%;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n.cropper-drag-box[data-v-dfd9f096] {\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n cursor: crosshair;\n}\n.cropper-modal[data-v-dfd9f096] {\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n background: rgba(0, 0, 0, 0.5);\n}\n.cropper-crop-box[data-v-dfd9f096] {\n position: relative;\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n.cropper-crop-box .cropper-img[data-v-dfd9f096] {\n display: block;\n overflow: hidden;\n width: 100%;\n height: 100%;\n outline: 1px solid #39f;\n outline-color: rgba(51, 153, 255, 0.75);\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n.cropper-crop-box .cropper-info[data-v-dfd9f096] {\n font-family: sans-serif;\n position: absolute;\n left: 0px;\n min-width: 65px;\n text-align: center;\n color: white;\n line-height: 20px;\n background-color: rgba(0, 0, 0, 0.8);\n font-size: 12px;\n}\n.cropper-crop-box .cropper-move[data-v-dfd9f096] {\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n cursor: move;\n}\n.toolbar-container[data-v-dfd9f096] {\n position: absolute;\n right: 0;\n top: 0;\n z-index: 100;\n}\n.full #container[data-v-dfd9f096] {\n width: 100%;\n height: 100%;\n}\n#container[data-v-dfd9f096] {\n cursor: crosshair;\n}\n",""])},NJGM:function(t,e,n){var o=n("cZmO");"string"==typeof o&&(o=[[t.i,o,""]]),o.locals&&(t.exports=o.locals);n("rjj0")("5240aed3",o,!0,{})},VSUD:function(t,e){t.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAOCAYAAAAmL5yKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6M0Y0MzE4NjMwQzdDMTFFODlENkJEMDFEMzY0NTI3NkQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6M0Y0MzE4NjQwQzdDMTFFODlENkJEMDFEMzY0NTI3NkQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozRjQzMTg2MTBDN0MxMUU4OUQ2QkQwMUQzNjQ1Mjc2RCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozRjQzMTg2MjBDN0MxMUU4OUQ2QkQwMUQzNjQ1Mjc2RCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PjJ4w4UAAAJ6SURBVHjadJJPSBRxFMe/v5ndnfXf7raKpqmIlKJkQhok/UGohJC8dOggWdHSrQ4WHpQSvRYhWQQiEh2CIBAK6qDgwcha3SxBSqU0Yktt1VlTd9bZmem9dYg91IPPzOM37/vl9948EV6KZgNY7eqC6OmBHAxCr62Fe20NcUmChZ1wEwZhWepCf+xj3wWl6uKk7C/rkFjMH9rbYUaj0OuPQnR2QksRC8JF3DE3whEWy54iyP5qOkpbYwMGTiewOweitQ1WdzfQ1ARJ1yEKcpMGfab6pVl7d9trbf+Gq7KZjmJPiSkW70NKXA5ApLvgnHgLSTPg/LGMYVP92qiFerMtfQtK+VkIxdNKpb2Enw0WUvSicsfOGJ2HleXGoBmdP6aF7mWyWPKVwlFc/4K+PyI0QnbYw0nGYgTVCQPh9Riy92aiP7EyczA++dDBYsgKlKpLXHaFUIksYpMNjhAKMUSD+6BtwO9LRwOJa7TQfQVGPGnOV5cy8m5QGrGHWkzkcwtlxE+i0DDwye1GBeVF27ODf8X21W9R+oTIIQ4RXFfOBkO2Qcc3dbr8QfDq6OxK6LpIz9vpi67uPhBIUEZTxzLBfcwQQWJM0CL52DVh6nN33wSwHl+FR/Hj3P427Fn/BclbwpynmmeEh2CzTfv3l/Ijn7g5ExlPijn4PfC+A9OKYHELHY3w1ti13JfMi0DM8RAPE8fHvj9PXQcYlgGfkjMsS07DMPVC3lZ7eCX29u4iGh1qbGlgcnEEC+p0ql5rKG1ZrSmoO3Xt5emhbWPrJP4R3Krj88oExsOvIAsZGS4vir0VqCs687oyt67x8VTPMIlP4D/hT8vHHwEGAOAe6nzMc205AAAAAElFTkSuQmCC"},cZmO:function(t,e,n){(t.exports=n("FZ+f")(!1)).push([t.i,"\n#app {\n margin: 20px;\n height: 500px;\n}\n",""])},f0mM:function(t,e){t.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAOCAYAAAAmL5yKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MjE3MTZERDMwQzdEMTFFODk0MDRCRTRCNzkyNTg4NjMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MjE3MTZERDQwQzdEMTFFODk0MDRCRTRCNzkyNTg4NjMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoyMTcxNkREMTBDN0QxMUU4OTQwNEJFNEI3OTI1ODg2MyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoyMTcxNkREMjBDN0QxMUU4OTQwNEJFNEI3OTI1ODg2MyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PgpdJ5kAAAHrSURBVHjalJJBSJRBFMffzLdSBm5YbEvCBmYZlixbB5GSlfAgEiGGYQePQQgh1SHoUEhFdBCpQ4R46OBhIQpB9FARUpKBkFlBXTJPK+2CbqtWG7g7/d72Bbl00Ae/7w1v5v9mvpm/Saay/SIyA+XwAZJQD7EbU523rx591F61Kzi6kF6OUluCFcjBKZgI8HkLr+RPlME+aEB83a/lEFvyRwjCT1iDx5p1Yj/8gkUw/s5/xRo/wEEYdMNaPwsnK2iDF7AF9kAz4juyPmKwHVohD19AdQWdNNzBQfJ3aEN8X/4TAVsm9aG4tFWf7WI8Sembf6omk0wvH/A829r3suOubCBi4RY5WdNziWFCf88aYw5vVKwxm3ouiU+3BhhW691Z55z0xUfOyCbic2ZG5rPvpxhetuLcs/xa/inv3bOZJuNzg5om9DazUAkPadJRupDa8SuNid545PS6eiaX0rSkDUL+s6gTJxHcLOkxzc0/aI50NTJ3oWRumxVjMl7AiwU8u9cY2UFxiIUX/1kU9Z03rY7tPnStWKzcGi66VF/Bw34jeLCWvFttDMM0GfAb1MExaIe5SEXdmBZP1JzT1KA+MFWhCpdeXN2ZLxSCzhVFumMGPN+26rpVdeSbr09SrxdG7fkj99QL734LMADd0pnHVfYnBAAAAABJRU5ErkJggg=="},jAxL:function(t,e,n){var o=n("k0Jk");"string"==typeof o&&(o=[[t.i,o,""]]),o.locals&&(t.exports=o.locals);n("rjj0")("93c4d6e2",o,!0,{})},k0Jk:function(t,e,n){var o=n("kxFB");(t.exports=n("FZ+f")(!1)).push([t.i,"\n.toolbar-wrap .toolbar[data-v-189cc6a1] {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 260px;\n background: #deeeff;\n border: 1px solid #4e99d2;\n padding: 5px 2px;\n margin: 0;\n list-style: none;\n}\n.toolbar-wrap .toolbar li[data-v-189cc6a1] {\n margin: 0 2px;\n padding: 3px;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 1px solid transparent;\n}\n.toolbar-wrap .toolbar li.active[data-v-189cc6a1] {\n border: 1px solid #999;\n border-radius: 2px;\n}\n.toolbar-wrap .toolbar li div[data-v-189cc6a1] {\n position: relative;\n width: 16px;\n height: 14px;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n text-align: center;\n line-height: 14px;\n}\n.toolbar-wrap .toolbar .divider[data-v-189cc6a1] {\n padding: 0;\n width: 1px;\n height: 18px;\n background: #999;\n margin-top: 2px;\n}\n.toolbar-wrap .toolbar .rect[data-v-189cc6a1] {\n border: 1px solid #71a4e5;\n background: #f2f6fa;\n}\n.toolbar-wrap .toolbar .ellipse[data-v-189cc6a1] {\n border-radius: 50%;\n border: 1px solid #71a4e5;\n background: #f2f6fa;\n}\n.toolbar-wrap .toolbar .arrow[data-v-189cc6a1] {\n position: relative;\n}\n.toolbar-wrap .toolbar .arrow[data-v-189cc6a1]::before {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n width: 2px;\n height: 16px;\n background: #1677bd;\n -webkit-transform: translateX(7px) rotate(45deg);\n transform: translateX(7px) rotate(45deg);\n}\n.toolbar-wrap .toolbar .arrow[data-v-189cc6a1]::after {\n content: '';\n position: absolute;\n right: 0;\n top: 0;\n width: 0;\n height: 0;\n border-top: 4px solid #1677bd;\n border-left: 4px solid transparent;\n border-right: 4px solid #1677bd;\n border-bottom: 4px solid transparent;\n}\n.toolbar-wrap .toolbar .pencil[data-v-189cc6a1] {\n background: url("+o(n("VSUD"))+");\n}\n.toolbar-wrap .toolbar .text[data-v-189cc6a1] {\n font-size: 18px;\n color: #2359a2;\n}\n.toolbar-wrap .toolbar .undo[data-v-189cc6a1] {\n background: url("+o(n("f0mM"))+");\n}\n.toolbar-wrap .toolbar .save[data-v-189cc6a1] {\n background: url("+o(n("9TOl"))+");\n}\n.toolbar-wrap .toolbar .abandon[data-v-189cc6a1] {\n font-size: 24px;\n line-height: 12px;\n font-weight: bold;\n color: red;\n cursor: default;\n}\n.toolbar-wrap .toolbar .complete[data-v-189cc6a1]::before,\n.toolbar-wrap .toolbar .complete[data-v-189cc6a1]:after {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n background: green;\n}\n.toolbar-wrap .toolbar .complete[data-v-189cc6a1]::before {\n width: 2px;\n height: 9px;\n -webkit-transform: translate3d(3px, 4px, 0) rotate(-45deg);\n transform: translate3d(3px, 4px, 0) rotate(-45deg);\n}\n.toolbar-wrap .toolbar .complete[data-v-189cc6a1]::after {\n width: 2px;\n height: 14px;\n -webkit-transform: translate3d(10px, 0, 0) rotate(45deg);\n transform: translate3d(10px, 0, 0) rotate(45deg);\n}\n.toolbar-wrap .toolbar-options[data-v-189cc6a1] {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 260px;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n background: #deeeff;\n border: 1px solid #4e99d2;\n padding: 0 2px;\n margin: 0;\n list-style: none;\n}\n.toolbar-wrap .toolbar-options > li[data-v-189cc6a1] {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n.toolbar-wrap .toolbar-options .divider[data-v-189cc6a1] {\n width: 1px;\n height: 24px;\n background: #999;\n margin: 0 2px;\n}\n.toolbar-wrap .toolbar-options .options-dot[data-v-189cc6a1] {\n position: relative;\n width: 24px;\n height: 24px;\n margin: 0 2px;\n}\n.toolbar-wrap .toolbar-options .options-dot[data-v-189cc6a1]:hover,\n.toolbar-wrap .toolbar-options .options-dot.active-dot[data-v-189cc6a1] {\n border: 1px solid #999;\n border-radius: 2px;\n background: #c2e6ff;\n}\n.toolbar-wrap .toolbar-options .options-dot[data-v-189cc6a1]:after {\n content: '';\n position: absolute;\n left: 50%;\n top: 50%;\n border-radius: 50%;\n background: #1677bd;\n -webkit-transform: translateX(-50%) translateY(-50%);\n transform: translateX(-50%) translateY(-50%);\n}\n.toolbar-wrap .toolbar-options .options-dot[data-v-189cc6a1]:nth-of-type(1)::after {\n width: 2px;\n height: 2px;\n}\n.toolbar-wrap .toolbar-options .options-dot[data-v-189cc6a1]:nth-of-type(2)::after {\n width: 4px;\n height: 4px;\n}\n.toolbar-wrap .toolbar-options .options-dot[data-v-189cc6a1]:nth-of-type(3)::after {\n width: 8px;\n height: 8px;\n}\n.toolbar-wrap .toolbar-options .options-text[data-v-189cc6a1] {\n margin: 0 4px;\n}\n.toolbar-wrap .toolbar-options .options-text select[data-v-189cc6a1],\n.toolbar-wrap .toolbar-options .options-text option[data-v-189cc6a1] {\n outline: none;\n width: 50px;\n}\n.toolbar-wrap .toolbar-options .options-text span[data-v-189cc6a1] {\n vertical-align: bottom;\n}\n.toolbar-wrap .color-wrap[data-v-189cc6a1] {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n margin: 3px 0;\n padding: 0 4px;\n}\n.toolbar-wrap .current-color[data-v-189cc6a1] {\n width: 28px;\n height: 28px;\n border: 1px solid #999;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n margin-right: 5px;\n}\n.toolbar-wrap .options-color[data-v-189cc6a1] {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n width: 130px;\n list-style: none;\n padding: 0;\n}\n.toolbar-wrap .options-color li[data-v-189cc6a1] {\n width: 13px;\n height: 13px;\n margin: 1px;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: 1px solid #999;\n}\n.toolbar-wrap .options-color li[data-v-189cc6a1]:hover {\n border: 1px solid #fff;\n}\n",""])},m610:function(t,e,n){var o=n("HuI3");"string"==typeof o&&(o=[[t.i,o,""]]),o.locals&&(t.exports=o.locals);n("rjj0")("22f0bc56",o,!0,{})},n6Aw:function(t,e,n){(t.exports=n("FZ+f")(!1)).push([t.i,"\nhtml, body {\n width: 100%;\n height: 100%;\n margin: 0;\n padding: 0;\n overflow: hidden;\n}\n",""])},uDKc:function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var o=n("7+uW"),i=n("Xxa5"),r=n.n(i),a=n("//Fk"),s=n.n(a),c=n("exGp"),p=n.n(c),l=n("woOf"),h=n.n(l),d={render:function(){this.$createElement;this._self._c;return this._m(0)},staticRenderFns:[function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"crop-border-box"},[n("span",{staticClass:"crop-line line-top"}),t._v(" "),n("span",{staticClass:"crop-line line-left"}),t._v(" "),n("span",{staticClass:"crop-line line-bottom"}),t._v(" "),n("span",{staticClass:"crop-line line-right"}),t._v(" "),n("span",{staticClass:"crop-point left-top"}),t._v(" "),n("span",{staticClass:"crop-point left-mid"}),t._v(" "),n("span",{staticClass:"crop-point left-bottom"}),t._v(" "),n("span",{staticClass:"crop-point bottom-mid"}),t._v(" "),n("span",{staticClass:"crop-point right-bottom"}),t._v(" "),n("span",{staticClass:"crop-point right-mid"}),t._v(" "),n("span",{staticClass:"crop-point right-top"}),t._v(" "),n("span",{staticClass:"crop-point top-mid"})])}]};var f=n("VU/8")({name:"cropper-border"},d,!1,function(t){n("xG9s")},"data-v-7c8f0bb9",null).exports,b={colors:["#000000","#808080","#800000","#808000","#008000","#000080","#800080","#008080","#ffffff","#c0c0c0","#ff0000","#ffff00","#00ff00","#0000ff","#ff00ff","#00ffff"],fontSizes:[8,9,10,11,12,13,14,15,16,17,18,19,20,21,22],lineWidth:[2,4,8]},u=b.colors,v=b.fontSizes,w=[0,1,2],g={name:"toolbar",props:{color:{type:String},fontSize:{type:Number},lineWidth:{type:Number},toolStyle:{type:Object,default:function(){return{}}},optionsStyle:{type:Object,default:function(){return{}}}},data:function(){return{types:["rect","ellipse","arrow","pencil","text"],operations:["undo","save","abandon","complete"],colors:u,fontSizes:v,lineWidths:w,optionsShow:!1,activeType:"",optionType:"lineWidth"}},computed:{_color:{get:function(){return void 0===this.color?(this.$emit("update:color",u[0]),u[0]):this.color},set:function(t){this.$emit("update:color",t)}},_fontSize:{get:function(){return void 0===this.fontSize?(this.$emit("update:fontSize",v[8]),v[8]):this.fontSize},set:function(t){this.$emit("update:fontSize",t)}},_lineWidth:{get:function(){return void 0===this.lineWidth?(this.$emit("update:lineWidth",w[0]),w[0]):this.lineWidth},set:function(t){this.$emit("update:lineWidth",t)}}},methods:{onToolItemClick:function(t){this.activeType=this.activeType===t?"":t,"text"===this.activeType&&(this.optionType="fontsize"),this.$emit("drawType",this.activeType)},onOperationClick:function(t){switch(t){case this.operations[0]:this.$emit("undoDraw");break;case this.operations[1]:this.$emit("saveDraw");break;case this.operations[2]:this.$emit("abandonDraw");break;case this.operations[3]:this.$emit("completeDraw")}},changeColor:function(t){this._color=t},changeDot:function(t){this._lineWidth=t},selectChange:function(t){this._fontSize=~~t.target.value}},watch:{activeType:function(t){this.optionsShow=!!t}}},x={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"toolbar-wrap"},[n("ul",{staticClass:"toolbar",style:t.toolStyle},[n("li",{class:{active:t.types[0]===t.activeType},on:{click:function(e){t.onToolItemClick(t.types[0])}}},[n("div",{staticClass:"rect"})]),t._v(" "),n("li",{class:{active:t.types[1]===t.activeType},on:{click:function(e){t.onToolItemClick(t.types[1])}}},[n("div",{staticClass:"ellipse"})]),t._v(" "),n("li",{class:{active:t.types[2]===t.activeType},on:{click:function(e){t.onToolItemClick(t.types[2])}}},[n("div",{staticClass:"arrow"})]),t._v(" "),n("li",{class:{active:t.types[3]===t.activeType},on:{click:function(e){t.onToolItemClick(t.types[3])}}},[n("div",{staticClass:"pencil"})]),t._v(" "),n("li",{class:{active:t.types[4]===t.activeType},on:{click:function(e){t.onToolItemClick(t.types[4])}}},[n("div",{staticClass:"text"},[t._v("A")])]),t._v(" "),n("li",{staticClass:"divider"}),t._v(" "),n("li",{on:{click:function(e){t.onOperationClick(t.operations[0])}}},[n("div",{staticClass:"undo"})]),t._v(" "),n("li",{on:{click:function(e){t.onOperationClick(t.operations[1])}}},[n("div",{staticClass:"save"})]),t._v(" "),n("li",{on:{click:function(e){t.onOperationClick(t.operations[2])}}},[n("div",{staticClass:"abandon"},[t._v("×")])]),t._v(" "),n("li",{on:{click:function(e){t.onOperationClick(t.operations[3])}}},[n("div",{staticClass:"complete"})])]),t._v(" "),n("ul",{directives:[{name:"show",rawName:"v-show",value:t.optionsShow,expression:"optionsShow"}],staticClass:"toolbar-options",style:t.optionsStyle},[t._l(t.lineWidths,function(e){return n("li",{directives:[{name:"show",rawName:"v-show",value:"lineWidth"===t.optionType,expression:"optionType === 'lineWidth'"}],key:e,staticClass:"options-dot",class:{"active-dot":t._lineWidth===e},on:{click:function(n){t.changeDot(e)}}})}),t._v(" "),n("li",{directives:[{name:"show",rawName:"v-show",value:"fontsize"===t.optionType,expression:"optionType === 'fontsize'"}],staticClass:"options-text"},[n("span",[t._v("A")]),t._v(" "),n("select",{on:{change:t.selectChange}},t._l(t.fontSizes,function(e){return n("option",{key:e,domProps:{selected:t._fontSize===e,value:e}},[t._v(t._s(e))])}))]),t._v(" "),n("li",{staticClass:"divider"}),t._v(" "),n("li",{staticClass:"color-wrap"},[n("div",{staticClass:"current-color",style:{background:t._color}}),t._v(" "),n("ul",{staticClass:"options-color"},t._l(t.colors,function(e){return n("li",{key:e,style:{background:e},on:{click:function(n){t.changeColor(e)}}})}))])],2)])},staticRenderFns:[]};var m=n("VU/8")(g,x,!1,function(t){n("jAxL")},"data-v-189cc6a1",null).exports,y=n("Zrlr"),k=n.n(y),C=n("wxAW"),A=n.n(C),I=n("xLKd"),S=n.n(I),M=function(){function t(e){var n=this,o=e.container;k()(this,t),this.layers=[],this.container=document.getElementById(o),this._setStyle(this.container,{position:"relative"});var i={container:o,width:0,height:0};this.stage=new S.a.Stage(i),this.drawConfig={type:"",color:"#000",lineWidth:3},this.stage.on("contentMousedown.proto",this.onStageDraw.bind(this)),this.stage.on("canmouseover",function(){n.canTextOver=!0}),this.stage.on("cannotmouseover",function(){n.canTextOver=!1}),this.canTextOver=!0,this.init()}return A()(t,[{key:"setDrawConfig",value:function(t){this.drawConfig=h()(this.drawConfig,t)}},{key:"drawImage",value:function(t){this.containerInfo=this.container.getBoundingClientRect(),this.stage.setWidth(this.containerInfo.width),this.stage.setHeight(this.containerInfo.height),this.backgroundLayer=new S.a.Layer;var e=new S.a.Image(t);this.backgroundLayer.add(e),this.stage.add(this.backgroundLayer),this.stage.draw()}},{key:"clear",value:function(){this.stage.destroyChildren(),this.layers.length=0}},{key:"destroy",value:function(){this.clear(),this.stage.destroy()}},{key:"onStageDraw",value:function(){switch(this.drawConfig.type){case"pencil":this.drawPencil();break;case"rect":this.drawRect();break;case"arrow":this.drawArrow();break;case"ellipse":this.drawEllipse();break;case"text":this.drawText()}}},{key:"init",value:function(){this.textWrapper=document.createElement("div"),this.textWrapper.className="text-wrap",this.textWrapper.innerHTML='<textarea class="text-hold"></textarea>\n <div>\n <span\n class="text-left"></span>\n <span\n class="text-bottom"></span>\n <span\n class="text-right"></span>\n <span\n class="text-top"></span>\n </div>',this.container.appendChild(this.textWrapper);var t=document.createElement("style");t.innerHTML=".text-wrap {\n display: none;\n position: absolute;\n left: 0;\n top: 0;\n }\n .text-wrap span {\n position: absolute;\n width: 100%;\n height: 100%;\n opacity: .1;\n cursor: move;\n }\n .text-wrap .text-left {\n width: 4px;\n left: -2px;\n top: 0;\n }\n .text-wrap .text-bottom {\n height: 4px;\n bottom: -2px;\n left: 0;\n }\n .text-wrap .text-right {\n width: 4px;\n right: -2px;\n top: 0;\n }\n .text-wrap .text-top {\n height: 4px;\n left: 0;\n top: -2px;\n }\n .text-wrap .text-hold {\n display: block;\n width: 100px;\n word-break: break-all;\n background: transparent;\n border: 1px dashed #000;\n outline: none;\n font-size: 14px;\n min-width: 35px;\n }\n .text-wrap .text-hold::-webkit-scrollbar {\n width: 5px;\n height: 0;\n }",document.body.appendChild(t),this.bindEvent()}},{key:"bindEvent",value:function(){var t=this;this.textarea=this.textWrapper.querySelector(".text-hold"),this.textWrapper.addEventListener("mousedown",function(e){"span"===e.target.tagName.toLowerCase()&&t._onTextareaDrag(e)}),this.textarea.addEventListener("blur",this._onTextareaBlur.bind(this)),this.textarea.addEventListener("focus",this._onTextareaFocus.bind(this))}},{key:"_onTextareaDrag",value:function(t){var e=this;e.canTextOver=!1;var n={x:t.clientX-e.containerInfo.left,y:t.clientY-e.containerInfo.top},o=e.textWrapper.getBoundingClientRect(),i={x:o.left-e.containerInfo.left,y:o.top-e.containerInfo.top};function r(t){var r=t.clientX-e.containerInfo.left-n.x+i.x,a=t.clientY-e.containerInfo.top-n.y+i.y,s=r<=0?0:r+o.width>=e.containerInfo.width?e.containerInfo.width-o.width:r,c=a<=0?0:a+o.height>=e.containerInfo.height?e.containerInfo.height-o.height:a;e._setStyle(e.textWrapper,{left:s+"px",top:c+"px"})}window.addEventListener("mousemove",r),window.addEventListener("mouseup",function t(n){e.canTextOver=!0;e.textarea.focus();window.removeEventListener("mousemove",r);window.removeEventListener("mouseup",t)})}},{key:"_onTextareaBlur",value:function(){this.canTextOver&&(console.log("textarea blur"),this.textarea.value&&(this._setTextShape(),this.textarea.value=""),this.isFocus=!1,this._setStyle(this.textWrapper,{display:"none"}))}},{key:"_onTextareaFocus",value:function(){console.log("textarea focus"),this.isFocus=!0}},{key:"beforeDraw",value:function(){this.stage.fire("cannotmouseover")}},{key:"afterDraw",value:function(){this.stage.fire("canmouseover")}},{key:"drawPencil",value:function(t){if(this.beforeDraw(),this.isFocus)return this.textarea.blur();var e=this,n=this._createLayer(),o=this._shapeFactory(),i=o.shape,r=o.canvas.getContext("2d"),a=this.stage.getPointerPosition();function s(t){var o=e.stage.getPointerPosition();if(!o){var i=t.clientX-e.containerInfo.left,s=t.clientY-e.containerInfo.top,c=e.containerInfo.width,p=e.containerInfo.height;o={x:i>=c?c:i<=0?0:i,y:s>=p?p:s<=0?0:s}}e._pencil(r,a.x,a.y,o.x,o.y),a=o,n.draw()}n.add(i),this.stage.add(n),this.stage.draw(),r.lineJoin="round",r.strokeStyle=this.drawConfig.color,r.lineWidth=this.drawConfig.lineWidth,window.addEventListener("mousemove",s),window.addEventListener("mouseup",function t(){e.afterDraw();e.layers.push(n);window.removeEventListener("mousemove",s);window.removeEventListener("mouseup",t)})}},{key:"drawRect",value:function(){if(this.beforeDraw(),this.isFocus)return this.textarea.blur();var t=this,e=this._createLayer(),n=this._shapeFactory(),o=n.shape,i=n.canvas;e.add(o),this.stage.add(e),this.stage.draw();var r=i.getContext("2d");r.strokeStyle=this.drawConfig.color,r.lineWidth=this.drawConfig.lineWidth;var a=this.stage.getPointerPosition(),s={x:a.x,y:a.y};function c(n){var o=t.containerInfo.width,i=t.containerInfo.height;r.clearRect(0,0,o,i);var a=t.stage.getPointerPosition();if(!a){var c=n.clientX-t.containerInfo.left,p=n.clientY-t.containerInfo.top;a={x:c>=o?o:c<=0?0:c,y:p>=i?i:p<=0?0:p}}t._rect(r,s.x,s.y,a.x,a.y),e.draw()}window.addEventListener("mousemove",c),window.addEventListener("mouseup",function n(){t.layers.push(e);t.afterDraw();window.removeEventListener("mousemove",c);window.removeEventListener("mouseup",n)})}},{key:"drawArrow",value:function(){if(this.beforeDraw(),this.isFocus)return this.textarea.blur();var t=this,e=this._createLayer(),n=this._shapeFactory(),o=n.shape,i=n.canvas;e.add(o),this.stage.add(e),this.stage.draw();var r=i.getContext("2d");r.lineJoin="round",r.strokeStyle=this.drawConfig.color,r.lineWidth=this.drawConfig.lineWidth;var a=this.stage.getPointerPosition(),s={x:a.x,y:a.y};function c(n){var o=t.containerInfo.width,i=t.containerInfo.height;r.clearRect(0,0,o,i);var a=t.stage.getPointerPosition();if(!a){var c=n.clientX-t.containerInfo.left,p=n.clientY-t.containerInfo.top;a={x:c>=o?o:c<=0?0:c,y:p>=i?i:p<=0?0:p}}t._arrow(r,s.x,s.y,a.x,a.y),e.draw()}window.addEventListener("mousemove",c),window.addEventListener("mouseup",function n(){t.afterDraw();t.layers.push(e);window.removeEventListener("mousemove",c);window.removeEventListener("mouseup",n)})}},{key:"drawEllipse",value:function(){if(this.beforeDraw(),this.isFocus)return this.textarea.blur();var t,e=this,n=this._createLayer(),o=this.stage.getPointerPosition(),i={x:o.x,y:o.y};function r(o){t&&t.destroy();var r=e.stage.getPointerPosition();if(!r){var a=o.clientX-e.containerInfo.left,s=o.clientY-e.containerInfo.top,c=e.containerInfo.width,p=e.containerInfo.height;r={x:a>=c?c:a<=0?0:a,y:s>=p?p:s<=0?0:s}}t=e._ellipse(i.x,i.y,r.x,r.y),n.add(t),n.draw()}this.stage.add(n),window.addEventListener("mousemove",r),window.addEventListener("mouseup",function t(){e.afterDraw();e.layers.push(n);window.removeEventListener("mousemove",r);window.removeEventListener("mouseup",t)})}},{key:"drawText",value:function(){if(this.isFocus)return this.textarea.blur();this._initTextarea()}},{key:"undo",value:function(){this.layers.length&&this.layers.pop().destroy()}},{key:"toImage",value:function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1;return new s.a(function(n,o){var i={quality:e,callback:function(t){var o=document.createElement("canvas");o.width=t.width,o.height=t.height,o.getContext("2d").drawImage(t,0,0),o.toBlob(function(t){o=null,n(t)},"image/jpeg",e)}};t.stage.toImage(i)})}},{key:"_setTextShape",value:function(){var t=this._createLayer();this.stage.add(t);var e=this.textWrapper.getBoundingClientRect(),n=this._text(e.left-this.containerInfo.left,e.top-this.containerInfo.top,e.width,e.height,this.textarea.value);t.add(n),t.draw(),this.layers.push(t),this.textarea.setAttribute("color",""),this.textarea.setAttribute("fontSize","")}},{key:"_setStyle",value:function(t,e){h()(t.style,e)}},{key:"_canvasFactory",value:function(){var t=document.createElement("canvas");return t.width=this.stage.width(),t.height=this.stage.height(),t}},{key:"_shapeFactory",value:function(){var t=this._canvasFactory();return{shape:new S.a.Image({image:t,x:0,y:0}),canvas:t}}},{key:"_createLayer",value:function(){return new S.a.Layer}},{key:"_getAngle",value:function(t,e,n,o){return 180*Math.atan2(o-e,n-t)/Math.PI}},{key:"_initTextarea",value:function(){var t=this.stage.getPointerPosition();this.isFocus=!0,this._setStyle(this.textWrapper,{top:t.y+"px",left:t.x+"px",display:"block"}),this._setStyle(this.textarea,{color:this.drawConfig.color,fontSize:this.drawConfig.fontSize+"px"}),this.textarea.setAttribute("color",this.drawConfig.color),this.textarea.setAttribute("fontSize",this.drawConfig.fontSize),this.textarea.focus()}},{key:"_rect",value:function(t,e,n,o,i){t.beginPath(),t.moveTo(e,n),t.lineTo(o,n),t.lineTo(o,i),t.lineTo(e,i),t.lineTo(e,n),t.stroke(),t.closePath()}},{key:"_pencil",value:function(t,e,n,o,i){t.globalCompositeOperation="source-over",t.beginPath(),t.moveTo(e,n),t.lineTo(o,i),t.closePath(),t.stroke()}},{key:"_arrow",value:function(t,e,n,o,i){var r=25,a=30,s=this._getAngle(e,n,o,i),c=[];c[0]=o-r*Math.cos(Math.PI/180*(s+a)),c[1]=i-r*Math.sin(Math.PI/180*(s+a)),c[2]=o-r*Math.cos(Math.PI/180*(s-a)),c[3]=i-r*Math.sin(Math.PI/180*(s-a)),t.beginPath(),t.moveTo(e,n),t.lineTo(o,i),t.lineTo(c[2],c[3]),t.moveTo(o,i),t.lineTo(c[0],c[1]),t.stroke()}},{key:"_ellipse",value:function(t,e,n,o){var i=(n-t)/2,r=(o-e)/2;return new S.a.Ellipse({x:t+i,y:e+r,radius:{x:Math.abs(i),y:Math.abs(r)},stroke:this.drawConfig.color,strokeWidth:this.drawConfig.lineWidth})}},{key:"_text",value:function(t,e,n,o,i){var r=this;console.log(this.textarea.getAttribute("color"));var a=new S.a.Text({x:t-1,y:e,width:n,height:o,text:i,fontSize:this.textarea.getAttribute("fontSize"),fontFamily:"monospace",fill:this.textarea.getAttribute("color"),lineHeight:1.2,padding:3,wrap:"char"});return a.on("mouseover",function(t){if(r.canTextOver){r.isFocus&&r.textarea.blur();var e=a.getLayer()._id;r.layers=r.layers.filter(function(t){return t._id!==e||(t.destroy(),!1)});var n=t.currentTarget.attrs;r.textarea.value=n.text,r._setStyle(r.textarea,{color:n.fill,fontSize:n.fontSize+"px"}),r.textarea.setAttribute("color",n.fill),r.textarea.setAttribute("fontSize",n.fontSize),r._setStyle(r.textWrapper,{top:n.y+"px",left:n.x+"px",display:"block"}),r.textarea.focus()}}),a}}]),t}(),D={name:"vue-painting",props:{img:{type:String,default:""}},components:{CropBorder:f,Toolbar:m},data:function(){return{isDrawShow:!1,container:{width:0,height:0,left:0,right:0,top:0,bottom:0,leftWidth:0,topHeight:0},imgTrueWidth:0,imgTrueHeight:0,showImg:!1,isCrop:!1,isMove:!1,cropperWidth:0,cropperHeight:0,cropperOffsetX:0,cropperOffsetY:0,cropperX:0,cropperY:0,cropperOriginX:0,cropperOriginY:0,isToolbarShow:!1,draw:null,image:null,showCanvas:!1,toolbarColor:void 0,toolbarFontSize:void 0,toolbarLineWidth:void 0,toolbarOptionsShow:!1,toolStyle:{},optionsStyle:{}}},computed:{cropperBoxStyle:function(){return{width:this.cropperWidth+"px",height:this.cropperHeight+"px",transform:"translate3d("+this.cropperOffsetX+"px, "+this.cropperOffsetY+"px, 0)"}},cropperImgStyle:function(){return{width:this.container.width+"px",height:this.container.height+"px",transform:"translate3d(-"+this.cropperOffsetX+"px, -"+this.cropperOffsetY+"px, 0)"}},cropperInfoStyle:function(){return{top:this.cropperOffsetY>22?"-22px":"0px"}},toolbarStyle:function(){var t={},e=this.toolbarOptionsShow?77:39,n=this.container.height-this.cropperOffsetY-this.cropperHeight,o=this.cropperOffsetX+this.cropperWidth,i=0,r=0;return n<=e?this.cropperOffsetY>=e&&(r=-e+"px"):r=this.cropperHeight+5+"px",o<=266&&(i=266-o+"px"),h()(t,{transform:"translate3d("+i+", "+r+", 0)"}),t}},created:function(){var t=this;window.addEventListener("keydown",this.onEscKeyDown,!1),this.image=new Image,this.image.onload=function(){t.imgTrueWidth=t.image.width,t.imgTrueHeight=t.image.height,t.showImg=!0},this.image.src=this.img},mounted:function(){this.init(),document.oncontextmenu=function(t){return t.cancelBubble=!0,t.returnValue=!1,!1}},methods:{onEscKeyDown:function(t){27===t.keyCode&&this.$emit("quit")},init:function(){var t=this.$refs["drawer-container"].getBoundingClientRect();this.container={width:t.width,height:t.height,left:t.left,right:t.right,top:t.top,bottom:t.bottom,leftWidth:t.left+t.width,topHeight:t.top+t.height},this.draw=new M({container:"container"})},onModalDoubleClick:function(){this.isCrop&&(this.isCrop=!1,this.clearCanvas())},onCropStart:function(t){this.isCrop||1!==t.which?3===t.which&&(this.isCrop?this.isCrop=!1:this.$emit("quit"),this.clearCanvas()):(this.clearCanvas(),this.isCrop=!0,this.isToolbarShow=!1,window.addEventListener("mousemove",this.onResizeCropper),window.addEventListener("mouseup",this.onEndResizeCropper),this.cropperOriginX=this.cropperOffsetX=t.offsetX,this.cropperOriginY=this.cropperOffsetY=t.offsetY,this.cropperX=t.clientX,this.cropperY=t.clientY,this.cropperWidth=0,this.cropperHeight=0)},onResizeCropper:function(t){var e=t.clientX-this.cropperX,n=t.clientY-this.cropperY;e>0?(this.cropperWidth=e,this.cropperOffsetX=this.cropperOriginX):(this.cropperWidth=Math.abs(e),this.cropperOffsetX=this.cropperOriginX-this.cropperWidth),n>0?(this.cropperHeight=n,this.cropperOffsetY=this.cropperOriginY):(this.cropperHeight=Math.abs(n),this.cropperOffsetY=this.cropperOriginY-this.cropperHeight)},onEndResizeCropper:function(t){0===this.cropperWidth&&0===this.cropperHeight?this.isCrop=!1:this.isToolbarShow=!0,window.removeEventListener("mousemove",this.onResizeCropper),window.removeEventListener("mouseup",this.onEndResizeCropper)},onCroperMove:function(t){this.isMove=!0,window.addEventListener("mousemove",this.onMoveCropper),window.addEventListener("mouseup",this.onEndMoveCropper),this.cropperX=t.clientX,this.cropperY=t.clientY,this.cropperOriginX=this.cropperOffsetX,this.cropperOriginY=this.cropperOffsetY},onMoveCropper:function(t){var e=t.clientX-this.cropperX,n=t.clientY-this.cropperY;this.cropperOffsetX=this.cropperOriginX+e,this.cropperOffsetY=this.cropperOriginY+n},onEndMoveCropper:function(){this.isMove=!1,window.removeEventListener("mousemove",this.onMoveCropper),window.removeEventListener("mouseup",this.onEndMoveCropper)},setCanvas:function(){var t=this;return p()(r.a.mark(function e(){return r.a.wrap(function(e){for(;;)switch(e.prev=e.next){case 0:return e.abrupt("return",new s.a(function(e,n){t.showCanvas=!0,t.$nextTick(function(){t.draw.drawImage({x:0,y:0,image:t.image,width:t.container.width,height:t.container.height,offsetX:t.cropperOffsetX,offsetY:t.cropperOffsetY}),e()})}));case 1:case"end":return e.stop()}},e,t)}))()},clearCanvas:function(){this.showCanvas=!1,this.draw.clear()},onDrawType:function(t){if(!t)return this.toolbarOptionsShow=!1,void(this.draw.layers.length||this.clearCanvas());this.showCanvas||(this.draw.setDrawConfig({color:this.toolbarColor,fontSize:this.toolbarFontSize,lineWidth:b.lineWidth[this.toolbarLineWidth]}),this.setCanvas()),this.toolbarOptionsShow=!0,this.draw.setDrawConfig({type:t})},onUndoDraw:function(){this.draw.undo()},onSaveDraw:function(t){var e=this;return p()(r.a.mark(function n(){var o;return r.a.wrap(function(n){for(;;)switch(n.prev=n.next){case 0:if(n.prev=0,n.t0=e.showCanvas,n.t0){n.next=5;break}return n.next=5,e.setCanvas();case 5:return n.next=7,e.draw.toImage(1);case 7:o=n.sent,console.log(o),e.$emit(t,o),n.next=15;break;case 12:throw n.prev=12,n.t1=n.catch(0),n.t1;case 15:case"end":return n.stop()}},n,e,[[0,12]])}))()},onAbandonDraw:function(){this.isCrop=!1,this.clearCanvas(),this.$emit("quit")}},beforeDestroy:function(){window.removeEventListener("keydown",this.onEscKeyDown,!1),this.showImg=!1,this.image=null,this.draw.destroy()},watch:{toolbarColor:function(t){this.draw.setDrawConfig({color:t})},toolbarFontSize:function(t){this.draw.setDrawConfig({fontSize:t})},toolbarLineWidth:function(t){this.draw.setDrawConfig({lineWidth:b.lineWidth[t]})},cropperOffsetX:function(t,e){if(t<=0)return this.cropperOffsetX=1,void(this.isMove||(this.cropperWidth=this.cropperOriginX));t+this.cropperWidth>=this.container.width&&(this.cropperOffsetX=this.container.width-this.cropperWidth-1)},cropperOffsetY:function(t,e){if(t<=0)return this.cropperOffsetY=1,void(this.isMove||(this.cropperHeight=this.cropperOriginY));t+this.cropperHeight>=this.container.height&&(this.cropperOffsetY=this.container.height-this.cropperHeight-1)},cropperWidth:function(t,e){t+this.cropperOffsetX>=this.container.width&&(this.cropperWidth=this.container.width-this.cropperOffsetX)},cropperHeight:function(t,e){t+this.cropperOffsetY>=this.container.height&&(this.cropperHeight=this.container.height-this.cropperOffsetY-1)},isCrop:function(t){if(!t){var e=this.$refs.toolbar;e&&(e.activeType="")}}}},E={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{ref:"drawer-container",staticClass:"drawer-container",attrs:{ondragstart:"return false"}},[n("div",{staticClass:"drawer-img-box"},[n("img",{staticClass:"drawer-img",attrs:{src:t.showImg?t.img:""}})]),t._v(" "),n("div",{staticClass:"cropper-drag-box",class:{"cropper-modal":t.isCrop},style:{cursor:t.isToolbarShow&&t.isCrop?"inherit":"crosshair"},on:{mousedown:function(e){return e.stopPropagation(),e.preventDefault(),t.onCropStart(e)},dblclick:t.onModalDoubleClick}}),t._v(" "),n("div",{directives:[{name:"show",rawName:"v-show",value:t.isCrop,expression:"isCrop"}],staticClass:"cropper-crop-box",style:t.cropperBoxStyle},[n("div",{staticClass:"cropper-img"},[n("img",{style:t.cropperImgStyle,attrs:{src:t.img}})]),t._v(" "),n("div",{staticClass:"cropper-move",on:{mousedown:function(e){return e.stopPropagation(),e.preventDefault(),t.onCroperMove(e)}}}),t._v(" "),n("span",{staticClass:"cropper-info",style:t.cropperInfoStyle},[t._v("\n "+t._s(t.cropperWidth)+" × "+t._s(t.cropperHeight)+"\n ")]),t._v(" "),n("crop-border"),t._v(" "),n("div",{directives:[{name:"show",rawName:"v-show",value:t.isToolbarShow,expression:"isToolbarShow"}],staticClass:"toolbar-container",style:t.toolbarStyle},[n("toolbar",{ref:"toolbar",attrs:{color:t.toolbarColor,fontSize:t.toolbarFontSize,lineWidth:t.toolbarLineWidth,toolStyle:t.toolStyle,optionsStyle:t.optionsStyle},on:{"update:color":function(e){t.toolbarColor=e},"update:fontSize":function(e){t.toolbarFontSize=e},"update:lineWidth":function(e){t.toolbarLineWidth=e},drawType:t.onDrawType,undoDraw:t.onUndoDraw,saveDraw:function(e){t.onSaveDraw("saveImage")},abandonDraw:t.onAbandonDraw,completeDraw:function(e){t.onSaveDraw("copyImage")}}})],1),t._v(" "),n("div",{directives:[{name:"show",rawName:"v-show",value:t.showCanvas,expression:"showCanvas"}],staticClass:"full"},[n("div",{attrs:{id:"container"}})])],1)])},staticRenderFns:[]};var z={name:"App",methods:{onSaveImage:function(t){var e=document.createElement("a");e.download="painting-"+ +new Date+".png",e.href=window.URL.createObjectURL(t),e.click()},onCopyImage:function(t){alert("copyToClipBord")},onQuitDraw:function(t){alert("quit")}},components:{VuePainting:n("VU/8")(D,E,!1,function(t){n("m610"),n("44CZ")},"data-v-dfd9f096",null).exports}},W={render:function(){var t=this.$createElement,e=this._self._c||t;return e("div",{attrs:{id:"app"}},[e("vue-painting",{attrs:{img:n("x30L")},on:{saveImage:this.onSaveImage,copyImage:this.onCopyImage,quit:this.onQuitDraw}},[this._v(">")])],1)},staticRenderFns:[]};var Y=n("VU/8")(z,W,!1,function(t){n("NJGM")},null,null).exports;o.a.config.productionTip=!1,new o.a({el:"#app",components:{App:Y},template:"<App/>"})},x30L:function(t,e,n){t.exports=n.p+"static/img/bg.6905669.png"},xG9s:function(t,e,n){var o=n("8ePf");"string"==typeof o&&(o=[[t.i,o,""]]),o.locals&&(t.exports=o.locals);n("rjj0")("50b6f004",o,!0,{})}},["uDKc"]);