| 1 |
- (window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-0921874a"],{"05df":function(t,o,e){var i=e("72ff");"string"===typeof i&&(i=[[t.i,i,""]]),i.locals&&(t.exports=i.locals);var a=e("499e").default;a("0ced1229",i,!0,{sourceMap:!1,shadowMode:!1})},"46d2":function(t){t.exports=JSON.parse('{"name":"vue-img-cutter","version":"2.1.10","description":"A image crop plug-in for Vue,you can use it to rotate、zoom images and cut any size","author":"acccccccb <tabzhang@foxmail.com>","private":false,"scripts":{"dev":"webpack-dev-server --inline --progress --config build/webpack.dev.conf.js","start":"npm run dev","build":"node build/build.js"},"dependencies":{"vue":"^2.5.2"},"devDependencies":{"autoprefixer":"^7.1.2","babel-core":"^6.22.1","babel-helper-vue-jsx-merge-props":"^2.0.3","babel-loader":"^7.1.1","babel-plugin-syntax-jsx":"^6.18.0","babel-plugin-transform-runtime":"^6.22.0","babel-plugin-transform-vue-jsx":"^3.5.0","babel-preset-env":"^1.3.2","babel-preset-stage-2":"^6.22.0","chalk":"^2.0.1","copy-webpack-plugin":"^4.0.1","css-loader":"^0.28.0","extract-text-webpack-plugin":"^3.0.0","file-loader":"^1.1.4","friendly-errors-webpack-plugin":"^1.6.1","html-webpack-plugin":"^2.30.1","js-yaml":"^3.13.1","lodash":"^4.17.15","mem":"^6.0.0","mixin-deep":"^2.0.1","node-notifier":"^5.1.2","optimize-css-assets-webpack-plugin":"^3.2.0","ora":"^1.2.0","portfinder":"^1.0.13","postcss-import":"^11.0.0","postcss-loader":"^2.0.8","postcss-url":"^7.2.1","rimraf":"^2.6.0","semver":"^5.3.0","set-value":"^3.0.1","shelljs":"^0.7.6","uglifyjs-webpack-plugin":"^1.1.1","url-loader":"^0.5.8","vue-loader":"^13.3.0","vue-style-loader":"^3.0.1","vue-template-compiler":"^2.5.2","webpack":"^3.6.0","webpack-bundle-analyzer":"^2.13.1","webpack-dev-server":"^2.11.5","webpack-merge":"^4.1.0"},"engines":{"node":">= 6.0.0","npm":">= 3.0.0"},"browserslist":["> 1%","last 2 versions","not ie <= 8"],"main":"./src/index.js","repository":{"type":"git","url":"git+https://github.com/acccccccb/vue-img-cutter.git"},"keywords":["image","crop","cutter","vue","裁剪"],"license":"Apache2.0","bugs":{"url":"https://github.com/acccccccb/vue-img-cutter/issues"},"homepage":"https://ihtmlcss.com/demo/dist/#/croptool"}')},"72ff":function(t,o,e){var i=e("24fb");o=i(!1),o.push([t.i,".vue-img-cutter[data-v-83221ac8]{font-size:12px;line-height:130%}.fl[data-v-83221ac8]{float:left}.fr[data-v-83221ac8]{float:right}.i-dialog-footer[data-v-83221ac8]{display:block;width:100%;margin-top:15px;margin-bottom:15px}.mask[data-v-83221ac8]{background:rgba(0,0,0,.6);position:fixed;overflow-y:scroll;overflow-x:hidden;top:0;left:0;width:100%;height:100%;z-index:999}.dialogBox[data-v-83221ac8]{clear:both}.dialogBoxModal[data-v-83221ac8]{position:relative;padding-top:100px;padding-bottom:100px;clear:both}.dialogMainModal[data-v-83221ac8]{position:absolute;top:100px;left:50%;margin-bottom:100px;-webkit-transform:translateX(-50%);transform:translateX(-50%);border:1px solid rgba(0,0,0,.8);border-radius:3px;padding:15px 15px 0 15px;-webkit-animation:dialogShow-data-v-83221ac8 .3s;animation:dialogShow-data-v-83221ac8 .3s}.dialogMain[data-v-83221ac8],.dialogMainModal[data-v-83221ac8]{line-height:125%;font-size:16px;-webkit-box-sizing:border-box;box-sizing:border-box;background:#fff;z-index:1000;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}@-webkit-keyframes dialogShow-data-v-83221ac8{0%{margin-top:-50px;opacity:0}to{margin-top:0;opacity:1}}@keyframes dialogShow-data-v-83221ac8{0%{margin-top:-50px;opacity:0}to{margin-top:0;opacity:1}}.toolMain[data-v-83221ac8]{-webkit-box-sizing:border-box;box-sizing:border-box}.toolBox[data-v-83221ac8]{border:1px solid #dedede;background-image:linear-gradient(45deg,rgba(0,0,0,.25) 25%,transparent 0,transparent 75%,rgba(0,0,0,.25) 0),linear-gradient(45deg,rgba(0,0,0,.25) 25%,transparent 0,transparent 75%,rgba(0,0,0,.25) 0);background-color:#eee;background-size:30px 30px;background-position:0 0,15px 15px;position:relative}.tool-title[data-v-83221ac8]{margin-bottom:10px}.canvas[data-v-83221ac8]{z-index:98}.canvas[data-v-83221ac8],.canvasSelectBox[data-v-83221ac8]{position:absolute;top:0;left:0}.canvasSelectBox[data-v-83221ac8]{z-index:99}@-webkit-keyframes zi-antBorder-data-v-83221ac8{0%{background-position:0 0}50%{background-position:0 5px}to{background-position:0 10px}}@keyframes zi-antBorder-data-v-83221ac8{0%{background-position:0 0}50%{background-position:0 5px}to{background-position:0 10px}}.toolBoxControl[data-v-83221ac8]{background:hsla(0,0%,100%,0);position:absolute;z-index:101;-webkit-box-sizing:border-box;box-sizing:border-box}.toolBoxControlBox[data-v-83221ac8]{width:100%;height:100%;position:relative;background:transparent;z-index:103;pointer-events:none}.controlBoxInnerLine[data-v-83221ac8]{position:absolute;z-index:1;background-size:10px 10px;background-image:linear-gradient(-45deg,#409eff 25%,rgba(64,158,255,0) 0,rgba(64,158,255,0) 50%,#409eff 0,#409eff 75%,rgba(64,158,255,0) 0,rgba(64,158,255,0));-webkit-animation:zi-antBorder-data-v-83221ac8 .8s linear 0s infinite normal;animation:zi-antBorder-data-v-83221ac8 .8s linear 0s infinite normal;pointer-events:none}.controlBoxInnerLineTop[data-v-83221ac8]{height:1px;width:100%;top:-1px}.controlBoxInnerLineBottom[data-v-83221ac8]{height:1px;width:100%;bottom:-1px}.controlBoxInnerLineLeft[data-v-83221ac8]{height:100%;width:1px;left:-1px;top:0}.controlBoxInnerLineRight[data-v-83221ac8]{height:100%;width:1px;right:-1px;top:0}.toolBoxControlLine[data-v-83221ac8]{position:absolute;z-index:1;background:transparent}.toolBoxControlLineItem-1[data-v-83221ac8]{top:33%}.toolBoxControlLineItem-1[data-v-83221ac8],.toolBoxControlLineItem-2[data-v-83221ac8]{width:100%;height:1px;-webkit-box-sizing:border-box;box-sizing:border-box;border-bottom:1px dashed #409eff}.toolBoxControlLineItem-2[data-v-83221ac8]{top:66%}.toolBoxControlLineItem-3[data-v-83221ac8]{left:33%}.toolBoxControlLineItem-3[data-v-83221ac8],.toolBoxControlLineItem-4[data-v-83221ac8]{border-right:1px dashed #409eff;height:100%;width:1px;-webkit-box-sizing:border-box;box-sizing:border-box}.toolBoxControlLineItem-4[data-v-83221ac8]{left:66%}.controlBox[data-v-83221ac8]{width:100%;height:100%;position:absolute;cursor:move;z-index:1;pointer-events:none}.controlBtn[data-v-83221ac8]{border:1px solid hsla(0,0%,100%,.5);-webkit-box-sizing:border-box;box-sizing:border-box;width:6px;height:6px;background:#409eff;position:absolute;border-radius:50%;z-index:999;pointer-events:auto!important}.leftUp[data-v-83221ac8]{top:0;margin-top:-3px;cursor:se-resize}.leftDown[data-v-83221ac8],.leftUp[data-v-83221ac8]{left:0;margin-left:-3px}.leftDown[data-v-83221ac8]{bottom:0;margin-bottom:-3px;cursor:sw-resize}.rightUp[data-v-83221ac8]{top:0;margin-top:-3px;cursor:sw-resize}.rightDown[data-v-83221ac8],.rightUp[data-v-83221ac8]{right:0;margin-right:-3px}.rightDown[data-v-83221ac8]{bottom:0;margin-bottom:-3px;cursor:se-resize}.topCenter[data-v-83221ac8]{top:0;margin-top:-3px}.downCenter[data-v-83221ac8],.topCenter[data-v-83221ac8]{right:50%;margin-right:-3px;cursor:s-resize}.downCenter[data-v-83221ac8]{bottom:0;margin-bottom:-3px}.leftCenter[data-v-83221ac8]{left:0;margin-left:-3px}.leftCenter[data-v-83221ac8],.rightCenter[data-v-83221ac8]{top:50%;margin-top:-3px;cursor:e-resize}.rightCenter[data-v-83221ac8]{right:0;margin-right:-3px}.toolBar[data-v-83221ac8]{margin-top:10px}.selectArea[data-v-83221ac8]{display:block;width:260px;text-align:right;color:#fff;position:absolute;top:-20px;right:0;font-size:10px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.tips[data-v-83221ac8]{position:absolute;top:50%;left:50%;color:red;z-index:101;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.btn[data-v-83221ac8]{display:inline-block;text-align:center;background:#dedede;height:40px;line-height:40px;padding:0 20px;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:4px;cursor:pointer;border:1px solid;font-size:14px;-webkit-transition:background .3s,color .3s;transition:background .3s,color .3s;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.btn[disabled][data-v-83221ac8]{color:#333;cursor:default}.btn[disabled][data-v-83221ac8],.btn[disabled][data-v-83221ac8]:hover{opacity:.6;border-color:#dedede!important;background-color:#fff!important}.btn[disabled][data-v-83221ac8]:hover{color:#333!important}.btn-default[data-v-83221ac8]{color:#333;border-color:#dcdfe6;background-color:#fff;-webkit-transition:background .3s,color .3s;transition:background .3s,color .3s}.btn-default[data-v-83221ac8]:hover{color:#409eff;border-color:#c6e2ff;background-color:#ecf5ff}.btn-primary[data-v-83221ac8]{color:#fff;background-color:#409eff;border-color:#409eff;-webkit-transition:background .3s,color .3s;transition:background .3s,color .3s}.btn-primary[data-v-83221ac8]:hover{background:#66b1ff;border-color:#66b1ff;color:#fff}.btn-warning[data-v-83221ac8]{color:#fff;background-color:#e6a23c;border-color:#e6a23c}.btn-warning[data-v-83221ac8]:hover{color:#fff;background-color:#eeba6c;border-color:#e6a23c}.btn-primary-plain[data-v-83221ac8],.btn-warning[data-v-83221ac8]:hover{-webkit-transition:background .3s,color .3s;transition:background .3s,color .3s}.btn-primary-plain[data-v-83221ac8]{color:#409eff;border-color:#c6e2ff;background-color:#ecf5ff}.btn-primary-plain[data-v-83221ac8]:hover{background:#66b1ff;border-color:#66b1ff;color:#fff}.btn-xs[data-v-83221ac8]{height:26px;line-height:26px;padding:0 10px;font-size:12px}.dialog-footer[data-v-83221ac8]{float:right}.fade-enter-active[data-v-83221ac8],.fade-leave-active[data-v-83221ac8]{-webkit-transition:opacity .3s;transition:opacity .3s}.fade-enter[data-v-83221ac8],.fade-leave-to[data-v-83221ac8]{opacity:0}.fade-in-enter[data-v-83221ac8]{margin-top:-50px;opacity:0}.fade-in-active[data-v-83221ac8],.fade-in-enter[data-v-83221ac8],.fade-out-active[data-v-83221ac8],.fade-out-enter[data-v-83221ac8]{-webkit-transition:margin-top .2s,opacity .2s;transition:margin-top .2s,opacity .2s}.fade-out-active[data-v-83221ac8]{margin-top:-50px;opacity:0}.file-input[data-v-83221ac8]{height:40px;line-height:40px;padding:0 10px;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:4px;border:1px solid #dedede}.file-input[data-v-83221ac8]::-webkit-input-placeholder{color:#c0c4cc}.file-input[data-v-83221ac8]::-moz-placeholder{color:#c0c4cc}.file-input[data-v-83221ac8]:-ms-input-placeholder{color:#c0c4cc}.file-input[data-v-83221ac8]::-ms-input-placeholder{color:#c0c4cc}.file-input[data-v-83221ac8]::placeholder{color:#c0c4cc}.closeIcon[data-v-83221ac8],.toolbar-item[data-v-83221ac8]{display:inline-block}.closeIcon[data-v-83221ac8]{float:right;cursor:pointer;background:#c6e2ff;color:#fff;width:18px;height:18px;line-height:18px;text-align:center;border-radius:50%;margin:0;padding:0;-webkit-transition:background .3s,-webkit-transform .3s;transition:background .3s,-webkit-transform .3s;transition:transform .3s,background .3s;transition:transform .3s,background .3s,-webkit-transform .3s}.closeIcon[data-v-83221ac8]:hover{background:#409eff;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.copyright[data-v-83221ac8]{font-size:10px!important;clear:both!important;width:100%!important;text-align:right!important;display:block!important;opacity:.5!important;position:absolute!important;bottom:0!important;right:0!important;line-height:100%!important;z-index:100!important}.copyright a[data-v-83221ac8]{color:#fff!important;text-decoration:none!important;position:relative!important;opacity:1!important;display:inline-block!important;padding:2px!important;background:rgba(0,0,0,.4)}.dockMain[data-v-83221ac8]{position:absolute;z-index:1002;bottom:5px;left:5px;opacity:.5;-webkit-transition:opacity .5s;transition:opacity .5s;-webkit-box-sizing:border-box;box-sizing:border-box;padding:5px 5px;border-radius:5px}.dockMain[data-v-83221ac8]:hover{opacity:1}.dockBtn[data-v-83221ac8]{font-size:10px;cursor:pointer;display:inline-block;margin-right:4px;color:#409eff;border:1px solid #c6e2ff;background-color:#ecf5ff;padding:1px 4px;border-radius:3px;height:20px;line-height:16px;-webkit-transition:background .2s,color .2s;transition:background .2s,color .2s;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.dockBtn[data-v-83221ac8]:hover{color:#fff;background-color:#409eff;border-color:#409eff}.dockBtnScrollBar[data-v-83221ac8]{display:inline-block;margin-right:4px;margin-left:10px;background:#409eff;width:200px;height:10px;border-radius:5px;position:relative;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.scrollBarControl[data-v-83221ac8]{background:#fff;border:2px solid #409eff;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:50%;width:20px;height:20px;top:50%;-webkit-box-shadow:0 0 3px #1f5184;box-shadow:0 0 3px #1f5184}.scrollBarControl[data-v-83221ac8],.scrollBarText[data-v-83221ac8]{position:absolute;cursor:pointer;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.scrollBarText[data-v-83221ac8]{background:rgba(0,0,0,.7);padding:2px;color:#fff;top:-16px;height:14px;line-height:14px;text-align:center;font-size:10px;border-radius:3px}",""]),t.exports=o},"7a10":function(t,o,e){"use strict";var i=e("05df"),a=e.n(i);a.a},dcd0:function(t,o,e){"use strict";var i=function(){var t=this,o=t.$createElement,e=t._self._c||o;return e("div",[!0===t.showChooseBtn&&!0===t.isModal?e("div",{on:{click:t.handleOpen}},[t._t("openImgCutter"),t._t("open")],2):t._e(),t.$slots.openImgCutter||t.$slots.open||!0!==t.isModal?t._e():e("button",{staticClass:"btn btn-primary",attrs:{type:"button"},on:{click:t.handleOpen}},[t._v(t._s(t.label))]),e("transition",{attrs:{name:"fade"}},[t.visible?e("div",{ref:"mask",class:!0===t.isModal?"mask vue-img-cutter":""},[t.visible?e("div",{class:!0===t.isModal?"dialogBoxModal":"dialogBox"},[e("transition",{attrs:{name:"fade","enter-class":"fade-in-enter","enter-active-class":"fade-in-active","leave-class":"fade-out-enter","leave-active-class":"fade-out-active"}},[e("div",{ref:"dialogMainModalRef",class:!0===t.isModal?"dialogMainModal":"dialogMain",style:"width:"+(!0===t.isModal?t.boxWidth+32:t.boxWidth)+"px"},[e("div",{staticClass:"toolMain"},[!0===t.isModal?e("div",{staticClass:"tool-title"},[t._v(" 图片裁剪 "),e("span",{staticClass:"closeIcon",on:{click:t.handleClose}},[t._v("×")])]):t._e(),e("div",{ref:"toolBox",staticClass:"toolBox",style:"height:"+t.boxHeight+"px;width:"+t.boxWidth+"px",on:{mousemove:t.controlBtnMouseMove,mouseup:t.controlBtnMouseUp,mouseleave:t.controlBtnMouseUp}},[e("div",{directives:[{name:"show",rawName:"v-show",value:!t.drawImg.img&&!0===t.showChooseBtn,expression:"!drawImg.img && showChooseBtn===true"}],staticClass:"tips"},[e("div",{staticClass:"btn btn-warning btn-xs",on:{click:t.chooseImg}},[t._v(t._s(t.label))])]),1==t.tool?e("div",{directives:[{name:"show",rawName:"v-show",value:this.drawImg.img&&!0!==t.dropImg.active&&1==t.controlBox.disable&&1==t.toolBox.disable,expression:"this.drawImg.img && dropImg.active!==true && controlBox.disable==true && toolBox.disable==true"}],staticClass:"dockMain",style:"background:"+this.toolBgc,on:{mouseenter:t.dropImgOff}},[t.rate?e("div",{staticClass:"dockBtn"},[t._t("ratio",[t._v(" Ratio: ")]),t._v(" "+t._s(t.rate)+" ")],2):t._e(),e("div",{staticClass:"dockBtn",on:{click:t.scaleReset}},[t._t("scaleReset",[t._v(" Scale: ")]),t._v(" "+t._s(t.drawImg.swidth>0?(t.drawImg.width/t.drawImg.swidth).toFixed(2):"-")+" ")],2),!1===t.originalGraph?e("div",{staticClass:"dockBtn",on:{click:function(o){return t.turnImg(-90)}}},[t._t("turnLeft",[t._v(" ↳ ")])],2):t._e(),!1===t.originalGraph?e("div",{staticClass:"dockBtn",on:{click:function(o){return t.turnImg(90)}}},[t._t("turnRight",[t._v(" ↲ ")])],2):t._e(),!1===t.originalGraph?e("div",{staticClass:"dockBtn",on:{click:function(o){return t.turnReset()}}},[t._t("reset",[t._v(" ↻ ")])],2):t._e(),!1===t.originalGraph?e("div",{staticClass:"dockBtnScrollBar"},[e("div",{ref:"dockBtnScrollControl",staticClass:"scrollBarControl",style:"left:"+t.rotateControl.position+"px",on:{mousemove:t.scrollBarControlMove,mousedown:t.scrollBarControlOn,mouseleave:t.scrollBarControlOff,mouseup:t.scrollBarControlOff}}),1==t.rotateControl.active?e("div",{staticClass:"scrollBarText",style:"left:"+t.rotateControl.position+"px"},[t._v(" "+t._s(t.rotateImg.angle.toFixed(0)+"°")+" ")]):t._e()]):t._e(),!1===t.originalGraph?e("div",{staticClass:"dockBtn",on:{click:t.flipHorizontal}},[t._t("flipHorizontal",[t._v(" ⇆ ")])],2):t._e(),!1===t.originalGraph?e("div",{staticClass:"dockBtn",on:{click:t.flipVertically}},[t._t("turnRight",[t._v(" ⇅ ")])],2):t._e()]):t._e(),e("div",{directives:[{name:"show",rawName:"v-show",value:null!=t.drawImg.img,expression:"drawImg.img!=null"}],ref:"toolBoxControl",staticClass:"toolBoxControl",on:{mousedown:t.toolBoxMouseDown,mouseup:t.toolBoxMouseUp,mousemove:t.toolBoxMouseMove,mouseleave:t.toolBoxMouseLeave}},[e("div",{staticClass:"toolBoxControlBox"},[e("div",{staticClass:"controlBox"},[e("div",{staticClass:"controlBoxInnerLine controlBoxInnerLineTop"}),e("div",{staticClass:"controlBoxInnerLine controlBoxInnerLineBottom"}),e("div",{staticClass:"controlBoxInnerLine controlBoxInnerLineLeft"}),e("div",{staticClass:"controlBoxInnerLine controlBoxInnerLineRight"}),!1===t.originalGraph?e("div",{staticClass:"selectArea"},[t._v(" 宽:"+t._s(t.toolBox.width)+" 高:"+t._s(t.toolBox.height)+" (x:"+t._s(t.toolBoxPosition.x)+",y:"+t._s(t.toolBoxPosition.y)+") ")]):t._e(),!0===t.originalGraph?e("div",{staticClass:"selectArea"},[t._v(" 宽:"+t._s((t.toolBox.width/(t.drawImg.width/t.drawImg.swidth)).toFixed(0))+" 高:"+t._s((t.toolBox.height/(t.drawImg.width/t.drawImg.swidth)).toFixed(0))+" (x:"+t._s(t.toolBoxPosition.x)+",y:"+t._s(t.toolBoxPosition.y)+") ")]):t._e(),!0===t.sizeChange?e("div",{staticClass:"leftUp controlBtn",attrs:{"data-name":"leftUp"},on:{mousedown:function(o){return t.controlBtnMouseDown(o,"leftUp")}}}):t._e(),!0===t.sizeChange?e("div",{staticClass:"leftDown controlBtn",attrs:{"data-name":"leftDown"},on:{mousedown:function(o){return t.controlBtnMouseDown(o,"leftDown")}}}):t._e(),!0===t.sizeChange?e("div",{staticClass:"rightUp controlBtn",attrs:{"data-name":"rightUp"},on:{mousedown:function(o){return t.controlBtnMouseDown(o,"rightUp")}}}):t._e(),!0===t.sizeChange?e("div",{staticClass:"rightDown controlBtn",attrs:{"data-name":"rightDown"},on:{mousedown:function(o){return t.controlBtnMouseDown(o,"rightDown")}}}):t._e(),!0===t.sizeChange&&!t.rate&&this.toolBox.width>20?e("div",{staticClass:"topCenter controlBtn",attrs:{"data-name":"topCenter"},on:{mousedown:function(o){return t.controlBtnMouseDown(o,"topCenter")}}}):t._e(),!0===t.sizeChange&&!t.rate&&this.toolBox.width>20?e("div",{staticClass:"downCenter controlBtn",attrs:{"data-name":"downCenter"},on:{mousedown:function(o){return t.controlBtnMouseDown(o,"downCenter")}}}):t._e(),!0===t.sizeChange&&!t.rate&&this.toolBox.height>20?e("div",{staticClass:"leftCenter controlBtn",attrs:{"data-name":"leftCenter"},on:{mousedown:function(o){return t.controlBtnMouseDown(o,"leftCenter")}}}):t._e(),!0===t.sizeChange&&!t.rate&&this.toolBox.height>20?e("div",{staticClass:"rightCenter controlBtn",attrs:{"data-name":"rightCenter"},on:{mousedown:function(o){return t.controlBtnMouseDown(o,"rightCenter")}}}):t._e()]),e("div",{staticClass:"toolBoxControlLine toolBoxControlLineItem-1"}),e("div",{staticClass:"toolBoxControlLine toolBoxControlLineItem-2"}),e("div",{staticClass:"toolBoxControlLine toolBoxControlLineItem-3"}),e("div",{staticClass:"toolBoxControlLine toolBoxControlLineItem-4"})])]),e("div",{staticClass:"copyright"},[t.DoNotDisplayCopyright?t._e():e("a",{attrs:{target:"_blank",href:"https://github.com/acccccccb/vue-img-cutter",rel:"nofollow"}},[t._v("vue-img-cutter "+t._s(t.version))])]),e("canvas",{ref:"canvasSelectBox",staticClass:"canvasSelectBox",attrs:{width:t.boxWidth,height:t.boxHeight},on:{mousedown:t.dropImgOn,mouseup:t.dropImgOff,mousemove:t.dropImgMove}}),e("canvas",{ref:"canvas",staticClass:"canvas",attrs:{width:t.boxWidth,height:t.boxHeight}})])]),e("div",{staticClass:"i-dialog-footer"},[e("input",{ref:"inputFile",staticStyle:{width:"1px",height:"1px",border:"none",opacity:"0"},attrs:{type:"file",accept:"image/gif, image/jpeg ,image/png"},on:{change:t.putImgToCanv}}),e("span",{on:{click:t.chooseImg}},[t._t("choose",[!0===t.showChooseBtn?e("div",{staticClass:"btn btn-primary btn-primary-plain"},[t._v(t._s(t.label))]):t._e()])],2),e("div",{staticClass:"btn-group fr"},[e("span",{on:{click:t.handleClose}},[t._t("cancel",[e("button",{staticClass:"btn btn-default",attrs:{type:"button"}},[t._v("取消")])])],2),e("span",{on:{click:function(o){return t.cropPicture(!1)}}},[t._t("confirm",[e("button",{staticClass:"btn btn-primary",staticStyle:{"margin-left":"15px"},attrs:{type:"button",disabled:!t.drawImg.img}},[t._v("确定")])])],2)])])])]),e("div",{staticStyle:{clear:"both"}})],1):t._e()]):t._e()])],1)},a=[],r=e("46d2"),n={name:"ImgCutter",props:{crossOrigin:{type:Boolean,default:!1,required:!1},crossOriginHeader:{type:String,default:"*",required:!1},label:{type:String,default:"选择图片",required:!1},isModal:{type:Boolean,default:!0,required:!1},lockScroll:{type:Boolean,default:!0,required:!1},showChooseBtn:{type:Boolean,default:!0,required:!1},boxWidth:{type:Number,default:800,required:!1},boxHeight:{type:Number,default:400,required:!1},cutWidth:{type:Number,default:200,required:!1},cutHeight:{type:Number,default:200,required:!1},rate:{type:String,default:null,required:!1},tool:{type:Boolean,default:!0,required:!1},toolBgc:{type:String,default:"#fff",required:!1},sizeChange:{type:Boolean,default:!0,required:!1},originalGraph:{type:Boolean,default:!1,required:!1},moveAble:{type:Boolean,default:!0,required:!1},CuttingOriginal:{type:Boolean,default:!1,required:!1},WatermarkText:{type:String,default:"",required:!1},WatermarkTextFont:{type:String,default:"12px Sans-serif",required:!1},WatermarkTextColor:{type:String,default:"#fff",required:!1},WatermarkTextX:{type:Number,default:.95,required:!1},WatermarkTextY:{type:Number,default:.95,required:!1},smallToUpload:{type:Boolean,default:!1,required:!1},saveCutPosition:{type:Boolean,default:!1,required:!1},scaleAble:{type:Boolean,default:!0,required:!1},DoNotDisplayCopyright:{type:Boolean,default:!1,required:!1}},model:["label","boxWidth","boxHeight","rate","tool","DoNotDisplayCopyright"],data(){let t,o;return t=this.boxWidth/2,o=this.boxHeight/2,{version:"",visible:!1,fileName:"",cutImageObj:null,onPrintImgTimmer:null,toolBoxPosition:{x:0,y:0},drawImg:{img:null,sx:0,sy:0,swidth:0,sheight:0,x:0,y:0,width:0,height:0},toolBox:{disable:!0,width:t,height:o,x:0,y:0,boxMove:{start:{x:0,y:0},moveTo:{x:0,y:0}}},dropImg:{active:!1,pageX:0,pageY:0,params:{}},rotateImg:{angle:0},rotateControl:{active:!1,start:{x:0,y:0},position:100},scaleImg:{rate:0,params:{}},controlBox:{disable:!0,btnName:"",start:{x:0,y:0,width:0,height:0}},selectBox:!1,selectBoxColor:"rgba(0,0,0,0.6)",isFlipHorizontal:!1,isFlipVertically:!1}},mounted(){this.version=r.version,!1===this.isModal&&(this.visible=!0,this.$nextTick(()=>{this.$refs["toolBox"].onmousewheel=this.scaleImgWheel,this.$refs["toolBox"].addEventListener("DOMMouseScroll",this.scaleImgWheel)}))},methods:{handleOpen:function(t){let o=this,e=t=>{if(o.$refs["toolBox"].onmousewheel=this.scaleImgWheel,o.$refs["toolBox"].addEventListener("DOMMouseScroll",this.scaleImgWheel),!0===o.isModal){!0===o.lockScroll&&(document.body.style.overflowY="hidden");let t=o.$refs["dialogMainModalRef"].offsetHeight+200,e=window.innerHeight,i=o.$refs["mask"];i.style.overflowY=t>e?"scroll":"hidden"}t&&"function"===typeof t&&t()};if(t&&"object"==typeof t&&t.src){if(!t.name)throw new Error("传入参数必须包含：src,name");{let i=new Image;!0===this.crossOrigin&&(i.crossOrigin=this.crossOriginHeader),i.name=t.name,i.style.position="fixed",i.style.top=-5e3,i.style.opacity=0,i.onerror=function(t){console.error("图片加载失败"),o.$emit("error",{event:t,msg:"图片加载失败"}),o.clearCutImageObj()},i.onload=function(){if(!0!==i.complete)throw new Error("图片加载失败");o.visible=!0,o.$nextTick(()=>{e(()=>{o.importImgToCanv(i)})})},i.src=t.src,this.cutImageObj=i,document.body.appendChild(i),this.$emit("onChooseImg",t)}}else o.visible=!0,o.$nextTick(()=>{e()})},handleClose:function(){this.clearAll(),!0===this.isModal&&(!0===this.lockScroll&&(document.body.style.overflowY="scroll"),this.$nextTick(()=>{this.visible=!1}))},chooseImg:function(){this.$refs["inputFile"].click()},importImgToCanv:function(t){let o=this;o.fileName=t.name;let e,i=t.height,a=t.width,r=o.boxWidth,n=o.boxHeight,s={...o.drawImg};s.img=t,o.scaleImg.rate=a/i,i<n&&a<r?(e=1,s.x=(r-a)/2,s.y=(n-i)/2):a/i<=r/n?(e=n/i,s.x=(r-a*e)/2):(e=r/a,s.y=(n-i*e)/2),s.swidth=a,s.sheight=i,s.width=a*e,s.height=i*e,s.x=(r-s.width)/2,s.y=(n-s.height)/2,o.$set(o,"drawImg",s),o.printImg(),o.putToolBox()},putImgToCanv:function(t){let o,e=this;if(!t.target.files)return console.error("IE9及以下需要自己传入image对象"),!1;if(o=t.target.files[0]||null,o){this.fileName=o.name;let t=new FileReader;new Image,t.readAsDataURL(o),t.onload=function(i){let a=i.target.result,r=document.createElement("img");r.src=a;let n=setInterval((function(){if(2==t.readyState){if(clearInterval(n),!e.sizeChange&&e.smallToUpload&&r.width<=e.cutWidth&&r.height<=e.cutHeight)return e.handleClose(),void e.$emit("cutDown",{filename:o.name,file:o});let t,i=r.height,a=r.width,s=e.boxWidth,l=e.boxHeight,d={...e.drawImg};d.img=r,e.scaleImg.rate=a/i,i<l&&a<s?(t=1,d.x=(s-a)/2,d.y=(l-i)/2):a/i<=s/l?(t=l/i,d.x=(s-a*t)/2):(t=s/a,d.y=(l-i*t)/2),d.swidth=a,d.sheight=i,d.width=a*t,d.height=i*t,d.x=(s-d.width)/2,d.y=(l-d.height)/2,e.$set(e,"drawImg",d),e.printImg(),e.putToolBox()}}),200)},this.$emit("onChooseImg",o)}},putToolBox:function(){this.toolBox.width!==this.boxWidth/2&&this.toolBox.height!==this.boxHeight/2&&!1!==this.saveCutPosition||(this.toolBox.width=this.cutWidth>this.boxWidth?this.boxWidth:this.cutWidth,this.toolBox.height=this.cutHeight>this.boxHeight?this.boxHeight:this.cutHeight),(0===this.toolBox.x&&0===this.toolBox.y||!1===this.saveCutPosition)&&(this.toolBox.x=this.boxWidth/2-this.toolBox.width/2,this.toolBox.y=this.boxHeight/2-this.toolBox.height/2),this.drawControlBox(this.toolBox.width,this.toolBox.height,this.toolBox.x,this.toolBox.y)},isSupportFileApi:function(){return!!(window.File&&window.FileList&&window.FileReader&&window.Blob&&-1===navigator.userAgent.indexOf("Edge")&&-1===navigator.userAgent.indexOf("MSIE")&&-1===navigator.userAgent.indexOf("Trident"))},dataURLtoFile:function(t,o){let e=t.split(","),i=e[0].match(/:(.*?);/)[1],a=atob(e[1]),r=a.length,n=new Uint8Array(r);while(r--)n[r]=a.charCodeAt(r);if(this.isSupportFileApi()){let t=new File([n],o,{type:i});return t}return"不支持File对象"},clearAll:function(){let t=this,o=t.$refs["canvas"],e=o.getContext("2d");e.clearRect(0,0,o.width,o.height);let i=t.$refs["canvasSelectBox"],a=i.getContext("2d");a.clearRect(0,0,i.width,i.height);let r=t.drawImg.sx,n=t.drawImg.sy;this.drawImg={img:null,sx:r,sy:n,swidth:0,sheight:0,x:0,y:0,width:0,height:0},this.isFlipHorizontal=!1,this.isFlipVertically=!1,this.$refs["inputFile"].value="",this.rotateImg.angle=0,this.drawImg.img=null,this.turnReset(),this.clearCutImageObj(),this.$emit("onClearAll")},clearCutImageObj:function(){null!==this.cutImageObj&&void 0!==this.cutImageObj&&("function"===typeof this.cutImageObj.remove?this.cutImageObj.remove():this.cutImageObj.removeNode()),this.cutImageObj=null},drawControlBox:function(t,o,e,i){t>this.boxWidth&&(t=this.boxWidth),o>this.boxHeight&&(o=this.boxHeight),e<0&&(e=0),i<0&&(i=0);let a,r,n=this.$refs["toolBoxControl"],s=this.$refs["canvasSelectBox"],l=s.getContext("2d");if(l.fillStyle=this.selectBoxColor,l.clearRect(0,0,s.width,s.height),l.fillRect(0,0,s.width,s.height),this.rate&&""!==this.rate){let e=this.rate.split(":")[0]/this.rate.split(":")[1];e>=1?(a=t,r=t/e):(a=o*e,r=o)}else a=t,r=o;this.toolBox.width=a,this.toolBox.height=r,n.style.width=Math.abs(a)+"px",n.style.height=Math.abs(r)+"px",this.toolBox.boxMove.moveTo.x=e,this.toolBox.boxMove.moveTo.y=i,a<0&&(e+=a),r<0&&(i+=r),e+this.toolBox.width>this.boxWidth&&(e=this.boxWidth-this.toolBox.width),e<0&&(e=0),i+this.toolBox.height>this.boxHeight&&(i=this.boxHeight-this.toolBox.height),i<0&&(i=0),this.toolBoxPosition.x=e,this.toolBoxPosition.y=i,n.style.left=e+"px",n.style.top=i+"px",l.clearRect(e,i,Math.abs(a),Math.abs(r)),this.onPrintImgTimmer&&clearTimeout(this.onPrintImgTimmer),this.onPrintImgTimmer=setTimeout(()=>{this.cropPicture(!0)},100)},resetToolBox:function(){this.toolBox.width<0&&(this.toolBox.boxMove.moveTo.x=this.toolBox.x-this.toolBox.width),this.toolBox.height<0&&(this.toolBox.boxMove.moveTo.y=this.toolBox.y-this.toolBox.height),this.toolBox.width=Math.abs(this.toolBox.width),this.toolBox.height=Math.abs(this.toolBox.height)},toolBoxMouseDown:function(t){let o=this.$refs["toolBoxControl"];this.toolBox.x=parseInt(o.style.left.split("px")[0]),this.toolBox.y=parseInt(o.style.top.split("px")[0]),this.toolBox.disable=!1,this.dropImg.active=!1,this.toolBox.boxMove.start={x:t.pageX,y:t.pageY}},toolBoxMouseMove:function(t){if(this.dropImg.active&&this.dropImgMove(t),!1===this.toolBox.disable&&!0===this.moveAble){let o=t.pageX-this.toolBox.boxMove.start.x,e=t.pageY-this.toolBox.boxMove.start.y,i=this.toolBox.x+o,a=this.toolBox.y+e;this.drawControlBox(this.toolBox.width,this.toolBox.height,i,a)}},toolBoxMouseLeave:function(){this.toolBox.disable=!0,this.onPrintImgTimmer&&clearTimeout(this.onPrintImgTimmer),this.onPrintImgTimmer=setTimeout(()=>{this.cropPicture(!0)},100),this.resetToolBox()},toolBoxMouseUp:function(t){this.toolBox.x=parseInt(this.toolBoxPosition.x),this.toolBox.y=parseInt(this.toolBoxPosition.y),this.toolBox.disable=!0,this.dropImg.active=!1,this.resetToolBox()},printImg:function(){if(this.drawImg.img){let t=this.$refs["canvas"],o=t.getContext("2d");o.font="18px bold 黑体",o.fillStyle="#ff0",o.textAlign="center",o.textBaseline="middle",o.save(),o.clearRect(0,0,t.width,t.height),o.translate(this.drawImg.x+this.drawImg.width/2,this.drawImg.y+this.drawImg.height/2),o.rotate(this.rotateImg.angle*Math.PI/180),o.translate(-(this.drawImg.x+this.drawImg.width/2),-(this.drawImg.y+this.drawImg.height/2)),o.translate(this.drawImg.x,this.drawImg.y),o.scale(this.isFlipHorizontal?-1:1,this.isFlipVertically?-1:1),o.drawImage(this.drawImg.img,this.drawImg.sx,this.drawImg.sy,this.drawImg.swidth,this.drawImg.sheight,this.isFlipHorizontal?-this.drawImg.width:0,this.isFlipVertically?-this.drawImg.height:0,this.drawImg.width,this.drawImg.height),o.translate(-this.drawImg.x,this.drawImg.y),o.restore(),this.onPrintImgTimmer&&clearTimeout(this.onPrintImgTimmer),this.onPrintImgTimmer=setTimeout(()=>{this.cropPicture(!0)},100)}},dropImgOn:function(t){this.dropImg.active=!0,this.dropImg.params={...this.drawImg},this.dropImg.pageX=t.pageX,this.dropImg.pageY=t.pageY},dropImgOff:function(){this.dropImg.active=!1,this.onPrintImgTimmer&&clearTimeout(this.onPrintImgTimmer),this.onPrintImgTimmer=setTimeout(()=>{this.cropPicture(!0)},100)},dropImgMove:function(t){let o=this;if(this.dropImg.active&&this.drawImg.img){let e={...o.drawImg};e.x=o.dropImg.params.x-(o.dropImg.pageX-t.pageX),e.y=o.dropImg.params.y-(o.dropImg.pageY-t.pageY),o.$set(o,"drawImg",e),o.printImg(),t.stopPropagation()}},scaleReset:function(){this.drawImg.width=this.drawImg.swidth,this.drawImg.height=this.drawImg.sheight,this.printImg()},scaleImgWheel:function(t){let o=this;if(o.drawImg.img&&!0===this.scaleAble){let e,i=t||window.event;i.wheelDelta?e=-i.wheelDelta/40:i.detail&&(e=i.detail);let a=50;o.drawImg.x=o.drawImg.width-9*e>a?o.drawImg.x+3*e:o.drawImg.x,o.drawImg.y=o.drawImg.width-9*e>a?o.drawImg.y+3*e:o.drawImg.y,o.drawImg.width=o.drawImg.width-9*e>a?o.drawImg.width-9*e:a,o.drawImg.height=o.drawImg.width/o.scaleImg.rate,o.printImg(),this.onPrintImgTimmer&&clearTimeout(this.onPrintImgTimmer),this.onPrintImgTimmer=setTimeout(()=>{this.cropPicture(!0)},100)}return t.preventDefault(),t.returnValue=!1,!1},flipHorizontal:function(){this.drawImg.img&&(0==this.isFlipHorizontal?this.isFlipHorizontal=!0:this.isFlipHorizontal=!1,this.printImg())},flipVertically:function(){this.drawImg.img&&(0==this.isFlipVertically?this.isFlipVertically=!0:this.isFlipVertically=!1,this.printImg())},turnImg:function(t){let o=this.rotateImg.angle,e=o+t;e>=-180&&e<=180&&(this.rotateImg.angle=e,this.rotateControl.position=e/180*100+100,this.printImg("rotate"))},turnReset:function(){this.rotateImg.angle=0,this.rotateControl.position=100,this.printImg("rotate")},controlBtnMouseDown:function(t,o){this.controlBox.disable=!1,this.controlBox.btnName=o,this.controlBox.start.x=t.clientX,this.controlBox.start.y=t.clientY,this.controlBox.start.width=this.toolBox.width,this.controlBox.start.height=this.toolBox.height,t.stopPropagation()},controlBtnMouseUp:function(t){this.controlBox.disable=!0,this.dropImgOff(),this.resetToolBox(),this.toolBoxMouseUp(),t.stopPropagation()},controlBtnMouseMove:function(t){if(!1===this.controlBox.disable){let o,e,i=t.clientX-this.controlBox.start.x,a=t.clientY-this.controlBox.start.y;"leftUp"==this.controlBox.btnName&&(o=this.toolBox.x+i,e=this.toolBox.y+a,this.toolBox.width=this.controlBox.start.width-i,this.toolBox.height=this.controlBox.start.height-a),"rightUp"==this.controlBox.btnName&&(o=this.toolBox.x,e=this.toolBox.y+a,this.toolBox.width=this.controlBox.start.width+i,this.toolBox.height=this.controlBox.start.height-a),"rightDown"==this.controlBox.btnName&&(o=this.toolBox.x,e=this.toolBox.y,this.toolBox.width=this.controlBox.start.width+i,this.toolBox.height=this.controlBox.start.height+a),"leftDown"==this.controlBox.btnName&&(o=this.toolBox.x+i,e=this.toolBox.y,this.toolBox.width=this.controlBox.start.width-i,this.toolBox.height=this.controlBox.start.height+a),"topCenter"==this.controlBox.btnName&&(o=this.toolBox.x,e=this.toolBox.y+a,this.toolBox.width=this.controlBox.start.width,this.toolBox.height=this.controlBox.start.height-a),"downCenter"==this.controlBox.btnName&&(o=this.toolBox.x,e=this.toolBox.y,this.toolBox.width=this.controlBox.start.width,this.toolBox.height=this.controlBox.start.height+a),"leftCenter"==this.controlBox.btnName&&(o=this.toolBox.x+i,e=this.toolBox.y,this.toolBox.width=this.controlBox.start.width-i,this.toolBox.height=this.controlBox.start.height),"rightCenter"==this.controlBox.btnName&&(o=this.toolBox.x,e=this.toolBox.y,this.toolBox.width=this.controlBox.start.width+i,this.toolBox.height=this.controlBox.start.height),this.drawControlBox(this.toolBox.width,this.toolBox.height,o,e)}t.stopPropagation()},cropPicture:function(t){let o=this;if(this.drawImg.img){let e=this.$refs["canvas"];if(this.WatermarkText&&!t){let t=e.getContext("2d");t.font=this.WatermarkTextFont,t.fillStyle=this.WatermarkTextColor,t.textAlign="right",t.textBaseline="bottom",t.fillText(this.WatermarkText,this.toolBox.x+this.toolBox.width*this.WatermarkTextX,this.toolBox.y+this.toolBox.height*this.WatermarkTextY)}let i=new Image;!0===this.crossOrigin&&(i.crossOrigin=this.crossOriginHeader),i.src=e.toDataURL(),HTMLCanvasElement.prototype.toBlob||Object.defineProperty(HTMLCanvasElement.prototype,"toBlob",{value:function(t,o,i){window.atob?setTimeout((function(){let a=atob(e.toDataURL(o,i).split(",")[1]),r=a.length,n=new Uint8Array(r);for(var s=0;s<r;s++)n[s]=a.charCodeAt(s);t(new Blob([n],{type:o||"image/png"}))}),200):t(!1,{type:"image/png"})}}),e.toBlob(e=>{if(e){let a=new FileReader;a.readAsDataURL(e),a.onload=function(){let e=setInterval((function(){if(2==a.readyState){clearInterval(e);let a=document.createElement("canvas"),r=a.getContext("2d");if(1==o.originalGraph){let t=o.drawImg.width/o.drawImg.swidth,e=o.toolBox.width/t,i=o.toolBox.height/t;a.width=e,a.height=i;let n=(o.toolBox.x-o.drawImg.x)/t,s=(o.toolBox.y-o.drawImg.y)/t,l=o.drawImg.swidth,d=o.drawImg.sheight;r.translate(-n,-s),r.drawImage(o.drawImg.img,0,0,l,d)}else{a.width=o.toolBox.width,a.height=o.toolBox.height;let t=o.toolBox;if(o.rate){let e=o.rate.split(":")[0]/o.rate.split(":")[1],a=o.rate.split(":")[0],n=o.rate.split(":")[1];a>=n?r.drawImage(i,t.x,t.y,t.width,t.width*e,0,0,t.width,t.width*e):r.drawImage(i,t.x,t.y,t.width,t.width/e,0,0,t.width,t.width/e)}else r.drawImage(i,t.x,t.y,t.width,t.height,0,0,t.width,t.height)}a.toBlob((function(e){t?o.$emit("onPrintImg",{fileName:o.fileName,blob:e,file:o.dataURLtoFile(a.toDataURL(),o.fileName),dataURL:a.toDataURL()}):(o.handleClose(),o.$emit("cutDown",{fileName:o.fileName,blob:e,file:o.dataURLtoFile(a.toDataURL(),o.fileName),dataURL:a.toDataURL()}))}),"image/jpeg",.95)}}),200)}}else{let e=document.createElement("canvas");e.width=o.toolBox.width,e.height=o.toolBox.height;let a=e.getContext("2d"),r=o.toolBox;if(o.rate){let t=o.rate.split(":")[0]/o.rate.split(":")[1];a.drawImage(i,r.x,r.y,r.width,r.width*t,0,0,r.width,r.width*t)}else a.drawImage(i,r.x,r.y,r.width,r.height,0,0,r.width,r.height);t?o.$emit("onPrintImg",{fileName:o.fileName,dataURL:e.toDataURL()}):(o.handleClose(),o.$emit("cutDown",{fileName:o.fileName,dataURL:e.toDataURL()}))}})}else t||(console.warn("No picture selected"),o.$emit("error",{err:1,msg:"No picture selected"}))},scrollBarControlMove:function(t){if(this.rotateControl.active){let o=t.pageX-this.rotateControl.start.x,e=this.rotateControl.start.position+o;e<=0&&(e=0),e>=200&&(e=200),this.rotateControl.position=e,this.rotateImg.angle=(e-100)/100*180,this.printImg()}},scrollBarControlOn:function(t){this.rotateControl.active=!0,this.rotateControl.start.x=t.pageX,this.rotateControl.start.y=t.pageY,this.rotateControl.start.position=this.rotateControl.position},scrollBarControlOff:function(){this.rotateControl.active=!1}}},s=n,l=(e("7a10"),e("2877")),d=Object(l["a"])(s,i,a,!1,null,"83221ac8",null),h=d.exports;o["a"]=h}}]);
|
