vue-img-cutter/dist/vue-img-cutter.umd.js

A image crop plug-in for Vue,you can use it to rotate、zoom images and cut any size

(function(e,t){typeof exports==`object`&&typeof module<`u`?module.exports=t(require(`vue`)):typeof define==`function`&&define.amd?define([`vue`],t):(e=typeof globalThis<`u`?globalThis:e||self,e.VueImgCutter=t(e.Vue))})(this,function(e){var t={name:`vue-img-cutter`,version:`3.1.1`,description:`A image crop plug-in for Vue,you can use it to rotate、zoom images and cut any size`,author:`ihtmlcss.com`,private:!1,engines:{node:`>=22.22.2`},scripts:{dev:`vite`,build:`vite build`,"build:page":`vite build --mode=page`,lint:`eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx --fix`,preview:`vite preview`},dependencies:{"core-js":`^3.49.0`,vue:`^3.5.33`,"vue-i18n":`^11.4.0`},devDependencies:{"@eslint/eslintrc":`^3.3.5`,"@microsoft/api-extractor":`^7.58.7`,"@types/node":`^25.6.0`,"@typescript-eslint/parser":`^8.59.2`,"@vitejs/plugin-vue":`^6.0.6`,"@vue/eslint-config-typescript":`^14.7.0`,"@vue/language-core":`^3.1.8`,eslint:`^9.39.4`,"eslint-config-prettier":`^10.1.8`,"eslint-plugin-prettier":`^5.5.5`,"eslint-plugin-vue":`^10.9.0`,globals:`^17.6.0`,prettier:`^3.8.3`,typescript:`^6.0.3`,vite:`^8.0.10`,"vite-plugin-dts":`^5.0.0`,"vite-plugin-eslint":`^1.8.1`,"vue-eslint-parser":`^10.4.0`},main:`./dist/vue-img-cutter.umd.js`,module:`./dist/vue-img-cutter.es.js`,exports:{".":{types:`./dist/vue-img-cutter.d.ts`,import:`./dist/vue-img-cutter.es.js`,require:`./dist/vue-img-cutter.umd.js`},"./vue-img-cutter.css":`./dist/vue-img-cutter.css`},files:[`dist`],repository:{type:`git`,url:`git+https://github.com/acccccccb/vue-img-cutter.git`},keywords:[`image`,`crop`,`cutter`,`vue`,`裁剪`],license:`MIT`,bugs:{url:`https://github.com/acccccccb/vue-img-cutter/issues`},homepage:`https://ihtmlcss.com/demo/dist/#/croptool`,volta:{node:`22.22.2`},browserslist:[`> 1%`,`last 2 versions`,`not dead`],type:`module`},n=(0,e.defineComponent)({name:`ImgCutter`,props:{modalTitle:{type:String,default:`图片裁剪`,required:!1},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},imgMove:{type:Boolean,default:!0,required:!1},sizeChange:{type:Boolean,default:!0,required:!1},originalGraph:{type:Boolean,default:!1,required:!1},moveAble:{type:Boolean,default:!0,required:!1},previewMode:{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},index:{default:null,required:!1,type:[String,Number]},fileType:{default:`png`,required:!1,type:String},toolBoxOverflow:{type:Boolean,default:!0,required:!1},DoNotDisplayCopyright:{type:Boolean,default:!1,required:!1},quality:{type:Number,default:1,required:!1},accept:{type:String,default:`image/gif, image/jpeg ,image/png`,required:!1},afterChooseImg:{type:Function,default:null,required:!1}},emits:[`onImageLoadError`,`error`,`onImageLoadComplete`,`onChooseImg`,`onClearAll`,`cutDown`,`onPrintImg`],data(){let e,t;return e=this.boxWidth/2,t=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:e,height:t,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: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}},computed:{showToolBoxWidth(){let e;return e=this.originalGraph?this.toolBox.width/(this.drawImg.width/this.drawImg.swidth):this.toolBox.width,Number(e).toFixed(0)},showToolBoxHeight(){let e;return e=this.originalGraph?this.toolBox.height/(this.drawImg.width/this.drawImg.swidth):this.toolBox.height,Number(e).toFixed(0)},showToolBoxX(){let e;return e=this.toolBoxPosition.x,Number(e).toFixed(0)},showToolBoxY(){let e;return e=this.toolBoxPosition.y,Number(e).toFixed(0)}},mounted(){this.version=t.version,this.isModal===!1&&(this.visible=!0,this.$nextTick(()=>{this.$refs.toolBox&&(this.$refs.toolBox.onmousewheel=this.scaleImgWheel,this.$refs.toolBox.addEventListener(`DOMMouseScroll`,this.scaleImgWheel))}))},methods:{handleOpen(e){let t=e=>{if(this.$refs.toolBox&&(this.$refs.toolBox.onmousewheel=this.scaleImgWheel,this.$refs.toolBox.addEventListener(`DOMMouseScroll`,this.scaleImgWheel)),this.isModal===!0){this.lockScroll===!0&&(document.body.style.overflowY=`hidden`);let e=this.$refs.dialogMainModalRef.offsetHeight+200,t=window.innerHeight,n=this.$refs.mask;e>t?n.style.overflowY=`scroll`:n.style.overflowY=`hidden`}e&&typeof e==`function`&&e()};if(e&&typeof e==`object`&&e.src)if(e.name){let n=new Image;this.crossOrigin===!0&&(n.crossOrigin=this.crossOriginHeader),n.name=e.name,n.style.position=`fixed`,n.style.top=`-5000px`,n.style.opacity=`0`,n.onerror=e=>{throw this.$emit(`onImageLoadError`,e),this.$emit(`error`,{type:3,index:this.index,msg:`图片加载失败`}),Error(`图片加载失败`)},n.onload=()=>{if(n.complete===!0)this.$emit(`onImageLoadComplete`,n),this.visible=!0,this.$nextTick(()=>{t(()=>{this.importImgToCanv(n)})});else throw this.$emit(`onImageLoadError`,Error(`图片加载失败`)),this.$emit(`error`,{type:3,index:this.index,msg:`图片加载失败`}),Error(`图片加载失败`)},n.src=e.src,this.cutImageObj=n,document.body.appendChild(n),this.$emit(`onChooseImg`,e,this.index)}else throw Error(`传入参数必须包含：src,name`);else this.visible=!0,this.$nextTick(()=>{t()})},handleClose(){this.clearAll(),this.isModal===!0&&(this.lockScroll===!0&&(document.body.style.overflowY=`scroll`),this.$nextTick(()=>{this.visible=!1}))},chooseImg(){this.$refs.inputFile.click()},importImgToCanv(e){let t=e.height,n=e.width,r=this.boxWidth,i=this.boxHeight,a,o={...this.drawImg};this.fileName=e.name,o.img=e,this.scaleImg.rate=n/t,t<i&&n<r?(a=1,o.x=(r-n)/2,o.y=(i-t)/2):n/t<=r/i?(a=i/t,o.x=(r-n*a)/2):(a=r/n,o.y=(i-t*a)/2),o.swidth=n,o.sheight=t,o.width=n*a,o.height=t*a,o.x=(r-o.width)/2,o.y=(i-o.height)/2,this.drawImg=o,this.printImg(),this.putToolBox()},async putImgToCanv(e){let t=!1;if(t=typeof this.afterChooseImg==`function`?await this.afterChooseImg(e):!0,!t)return;let n=null;if(e.target.files)n=e.target.files[0]||null;else return console.error(`IE9及以下需要自己传入image对象`),!1;if(n){if(this.accept.indexOf(n.type)===-1)return this.$emit(`error`,{type:1,index:this.index,event:e,msg:`文件类型错误`}),!1;this.fileName=n.name;let t=new FileReader;t.readAsDataURL(n),t.onerror=t=>{console.error(t),this.$emit(`error`,{type:2,index:this.index,event:e,msg:t?.toString()||`文件读取错误`})},t.onload=e=>{let r=e.target.result,i=document.createElement(`img`);i.src=r;let a=setInterval(()=>{if(t.readyState===2){if(clearInterval(a),!this.sizeChange&&this.smallToUpload&&i.width<=this.cutWidth&&i.height<=this.cutHeight){this.handleClose();let e=this.changeFileName(n.name,this.fileType);this.$emit(`cutDown`,{filename:e,file:n,index:this.index});return}let e=i.height,t=i.width,r=this.boxWidth,o=this.boxHeight,s,c={...this.drawImg};c.img=i,this.scaleImg.rate=t/e,e<o&&t<r?(s=1,c.x=(r-t)/2,c.y=(o-e)/2):t/e<=r/o?(s=o/e,c.x=(r-t*s)/2):(s=r/t,c.y=(o-e*s)/2),c.swidth=t,c.sheight=e,c.width=t*s,c.height=e*s,c.x=(r-c.width)/2,c.y=(o-c.height)/2,this.drawImg=c,this.printImg(),this.putToolBox()}},200)},this.$emit(`onChooseImg`,n,this.index)}},putToolBox(){(this.toolBox.width===this.boxWidth/2||this.toolBox.height===this.boxHeight/2||this.saveCutPosition===!1)&&(this.toolBox.width=this.cutWidth>this.boxWidth?this.boxWidth:this.cutWidth,this.toolBox.height=this.cutHeight>this.boxHeight?this.boxHeight:this.cutHeight),(this.toolBox.x===0&&this.toolBox.y===0||this.saveCutPosition===!1)&&(this.toolBox.x=this.boxWidth/2-this.toolBox.width/2,this.toolBox.y=this.boxHeight/2-this.toolBox.height/2),this.checkToolBoxOverflow().then(()=>{this.printImg()}),this.drawControlBox(this.toolBox.width,this.toolBox.height,this.toolBox.x,this.toolBox.y)},checkToolBoxOverflow(){return new Promise(e=>{if(!this.toolBoxOverflow){if(this.drawImg.width<this.toolBox.width||this.drawImg.height<this.toolBox.height){let e=this.drawImg.width/this.drawImg.height;this.drawImg.width<this.toolBox.width&&(this.drawImg.width=this.toolBox.width,this.drawImg.height=this.drawImg.width/e),this.drawImg.height<this.toolBox.height&&(this.drawImg.height=this.toolBox.height,this.drawImg.width=this.drawImg.height*e),this.drawImg.x=(this.boxWidth-this.drawImg.width)/2,this.drawImg.y=(this.boxHeight-this.drawImg.height)/2}this.drawImg.x>this.toolBox.x&&(this.drawImg.x=this.toolBox.x),this.drawImg.x+this.drawImg.width<this.toolBox.x+this.toolBox.width&&(this.drawImg.x=this.toolBox.x+this.toolBox.width-this.drawImg.width),this.drawImg.y>this.toolBox.y&&(this.drawImg.y=this.toolBox.y),this.drawImg.y+this.drawImg.height<this.toolBox.y+this.toolBox.height&&(this.drawImg.y=this.toolBox.y+this.toolBox.height-this.drawImg.height)}e()})},isSupportFileApi(){return!!(window.File&&window.FileList&&window.FileReader&&window.Blob&&navigator.userAgent.indexOf(`Edge`)===-1&&navigator.userAgent.indexOf(`MSIE`)===-1&&navigator.userAgent.indexOf(`Trident`)===-1)},dataURLtoFile(e,t){let n=e.split(`,`),r=n[0].match(/:(.*?);/)[1],i=atob(n[1]),a=i.length,o=new Uint8Array(a);for(;a--;)o[a]=i.charCodeAt(a);return this.isSupportFileApi()?new File([o],t,{type:r}):`不支持File对象`},clearAll(){let e=this,t=e.$refs.canvas,n=t.getContext(`2d`);n&&n.clearRect(0,0,t.width,t.height);let r=e.$refs.canvasSelectBox,i=r.getContext(`2d`);i&&i.clearRect(0,0,r.width,r.height);let a=e.drawImg.sx,o=e.drawImg.sy;this.drawImg={img:null,sx:a,sy:o,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`,this.index)},clearCutImageObj(){this.cutImageObj!==null&&this.cutImageObj!==void 0&&(typeof this.cutImageObj.remove==`function`?this.cutImageObj.remove():this.cutImageObj.removeNode&&this.cutImageObj.removeNode()),this.cutImageObj=null},drawControlBox(e,t,n,r){this.toolBoxOverflow||(e<1&&(e=1),t<1&&(t=1),e>this.drawImg.width&&(e=this.drawImg.width),t>this.drawImg.height&&(t=this.drawImg.height),n<this.drawImg.x&&(n=this.drawImg.x),r<this.drawImg.y&&(r=this.drawImg.y),n>this.drawImg.x+this.drawImg.width-e&&(n=this.drawImg.x+this.drawImg.width-e),r>this.drawImg.y+this.drawImg.height-t&&(r=this.drawImg.y+this.drawImg.height-t)),e>this.boxWidth&&(e=this.boxWidth),t>this.boxHeight&&(t=this.boxHeight),n<0&&(n=0),r<0&&(r=0);let i=this.$refs.toolBoxControl,a=this.$refs.canvasSelectBox,o=a.getContext(`2d`);if(!o)return;o.fillStyle=this.selectBoxColor,o.clearRect(0,0,a.width,a.height),o.fillRect(0,0,a.width,a.height);let s,c;if(this.rate&&this.rate!==``){let n=Number(this.rate.split(`:`)[0])/Number(this.rate.split(`:`)[1]);n>=1?(s=e,c=e/n,c+r>this.drawImg.y+this.drawImg.height&&(c=this.drawImg.y+this.drawImg.height-r,s=c*n)):(s=t*n,c=t)}else s=e,c=t;this.toolBox.width=Math.abs(s),this.toolBox.height=Math.abs(c),i.style.width=Math.abs(s)+`px`,i.style.height=Math.abs(c)+`px`,this.toolBox.boxMove.moveTo.x=n,this.toolBox.boxMove.moveTo.y=r,s<0&&(n+=s),c<0&&(r+=c),n+this.toolBox.width>this.boxWidth&&(n=this.boxWidth-this.toolBox.width),n<0&&(n=0),r+this.toolBox.height>this.boxHeight&&(r=this.boxHeight-this.toolBox.height),r<0&&(r=0),this.toolBoxPosition.x=n,this.toolBoxPosition.y=r,i.style.left=n+`px`,i.style.top=r+`px`,o.clearRect(n,r,Math.abs(s),Math.abs(c)),this.onPrintImgTimmer&&clearTimeout(this.onPrintImgTimmer),this.onPrintImgTimmer=setTimeout(()=>{this.cropPicture(!0)},100)},resetToolBox(){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(e){let t=this.$refs.toolBoxControl;this.toolBox.x=parseInt(t.style.left.split(`px`)[0]),this.toolBox.y=parseInt(t.style.top.split(`px`)[0]),this.toolBox.disable=!1,this.dropImg.active=!1,this.toolBox.boxMove.start={x:e.pageX,y:e.pageY}},toolBoxMouseMove(e){if(this.dropImg.active&&this.dropImgMove(e),this.toolBox.disable===!1&&this.moveAble===!0){let t=e.pageX-this.toolBox.boxMove.start.x,n=e.pageY-this.toolBox.boxMove.start.y,r=this.toolBox.x+t,i=this.toolBox.y+n;this.drawControlBox(this.toolBox.width,this.toolBox.height,r,i)}},toolBoxMouseLeave(){this.toolBox.disable=!0,this.onPrintImgTimmer&&clearTimeout(this.onPrintImgTimmer),this.onPrintImgTimmer=setTimeout(()=>{this.cropPicture(!0)},100),this.resetToolBox()},toolBoxMouseUp(){this.toolBox.x=parseInt(String(this.toolBoxPosition.x)),this.toolBox.y=parseInt(String(this.toolBoxPosition.y)),this.toolBox.disable=!0,this.dropImg.active=!1,this.resetToolBox()},printImg(){if(this.drawImg.img){let e=this.$refs.canvas,t=e.getContext(`2d`);if(!t)return;t.font=`18px bold 黑体`,t.fillStyle=`#ff0`,t.textAlign=`center`,t.textBaseline=`middle`,t.save(),t.clearRect(0,0,e.width,e.height),t.translate(this.drawImg.x+this.drawImg.width/2,this.drawImg.y+this.drawImg.height/2),t.rotate(this.rotateImg.angle*Math.PI/180),t.translate(-(this.drawImg.x+this.drawImg.width/2),-(this.drawImg.y+this.drawImg.height/2)),t.translate(this.drawImg.x,this.drawImg.y),t.scale(this.isFlipHorizontal?-1:1,this.isFlipVertically?-1:1);try{t.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)}catch(e){console.error(e),this.onPrintImgTimmer&&clearTimeout(this.onPrintImgTimmer),this.$emit(`error`,{type:3,index:this.index,msg:e.toString()||`图片加载失败`});return}t.translate(-this.drawImg.x,this.drawImg.y),t.restore(),this.onPrintImgTimmer&&clearTimeout(this.onPrintImgTimmer),this.onPrintImgTimmer=setTimeout(()=>{this.cropPicture(!0)},100)}},dropImgOn(e){this.imgMove===!0&&(this.dropImg.active=!0,this.dropImg.params={...this.drawImg},this.dropImg.pageX=e.pageX,this.dropImg.pageY=e.pageY)},dropImgOff(){this.dropImg.active=!1,this.onPrintImgTimmer&&clearTimeout(this.onPrintImgTimmer),this.onPrintImgTimmer=setTimeout(()=>{this.cropPicture(!0)},100)},dropImgMove(e){if(this.dropImg.active&&this.drawImg.img){let t={...this.drawImg};t.x=(this.dropImg.params.x||0)-(this.dropImg.pageX-e.pageX),t.y=(this.dropImg.params.y||0)-(this.dropImg.pageY-e.pageY),this.toolBoxOverflow||(t.x>this.toolBox.x&&(t.x=this.toolBox.x),t.x<this.toolBox.x+this.toolBox.width-t.width&&(t.x=this.toolBox.x+this.toolBox.width-t.width),t.y>this.toolBox.y&&(t.y=this.toolBox.y),t.y<this.toolBox.y+this.toolBox.height-t.height&&(t.y=this.toolBox.y+this.toolBox.height-t.height)),this.drawImg=t,this.printImg(),e.stopPropagation()}},scaleReset(){this.drawImg.width=this.drawImg.swidth,this.drawImg.height=this.drawImg.sheight,this.printImg()},scaleImgWheel(e){if(this.drawImg.img&&this.scaleAble===!0){let t,n=e||window.event;t=n.wheelDelta?-(n.wheelDelta/40):n.detail?n.detail:0,this.drawImg.x=this.drawImg.width-t*9>50?this.drawImg.x+t*3:this.drawImg.x,this.drawImg.y=this.drawImg.width-t*9>50?this.drawImg.y+t*3:this.drawImg.y,this.drawImg.width=this.drawImg.width-t*9>50?this.drawImg.width-t*9:50,this.drawImg.height=this.drawImg.width/this.scaleImg.rate,this.checkToolBoxOverflow().then(()=>{this.printImg(),this.onPrintImgTimmer&&clearTimeout(this.onPrintImgTimmer),this.onPrintImgTimmer=setTimeout(()=>{this.cropPicture(!0)},100)})}return e.preventDefault(),e.returnValue=!1,!1},flipHorizontal(){this.drawImg.img&&(this.isFlipHorizontal==0?this.isFlipHorizontal=!0:this.isFlipHorizontal=!1,this.printImg())},flipVertically(){this.drawImg.img&&(this.isFlipVertically==0?this.isFlipVertically=!0:this.isFlipVertically=!1,this.printImg())},turnImg(e){let t=this.rotateImg.angle+e;t>=-180&&t<=180&&(this.rotateImg.angle=t,this.rotateControl.position=t/180*100+100,this.printImg())},turnReset(){this.rotateImg.angle=0,this.rotateControl.position=100,this.printImg()},controlBtnMouseDown(e,t){this.controlBox.disable=!1,this.controlBox.btnName=t,this.controlBox.start.x=e.clientX,this.controlBox.start.y=e.clientY,this.controlBox.start.width=this.toolBox.width,this.controlBox.start.height=this.toolBox.height,e.stopPropagation()},controlBtnMouseUp(e){this.controlBox.disable=!0,this.dropImgOff(),this.resetToolBox(),this.toolBoxMouseUp(),this.scrollBarControlOff(),e.stopPropagation()},controlBtnMouseMove(e){if(this.controlBox.disable===!1){let t=e.clientX-this.controlBox.start.x,n=e.clientY-this.controlBox.start.y,r,i;if(this.controlBox.btnName==`leftUp`){if(!this.rate)r=this.toolBox.x+t,i=this.toolBox.y+n;else{let e=Number(this.rate.split(`:`)[0])/Number(this.rate.split(`:`)[1]);e>=1?(r=this.toolBox.x+t,i=this.toolBox.y+t/e):(r=this.toolBox.x+n*e,i=this.toolBox.y+n)}this.toolBox.width=this.controlBox.start.width-t,this.toolBox.height=this.controlBox.start.height-n}if(this.controlBox.btnName==`rightUp`){if(!this.rate)r=this.toolBox.x,i=this.toolBox.y+n;else{let e=Number(this.rate.split(`:`)[0])/Number(this.rate.split(`:`)[1]);e>=1?(r=this.toolBox.x,i=this.toolBox.y-t/e):(r=this.toolBox.x,i=this.toolBox.y+n)}this.toolBox.width=this.controlBox.start.width+t,this.toolBox.height=this.controlBox.start.height-n}if(this.controlBox.btnName==`rightDown`&&(r=this.toolBox.x,i=this.toolBox.y,this.toolBox.width=this.controlBox.start.width+t,this.toolBox.height=this.controlBox.start.height+n),this.controlBox.btnName==`leftDown`){if(!this.rate)r=this.toolBox.x+t,i=this.toolBox.y;else{let e=Number(this.rate.split(`:`)[0])/Number(this.rate.split(`:`)[1]);e>=1?(r=this.toolBox.x+t,i=this.toolBox.y):(r=this.toolBox.x+-n*e,i=this.toolBox.y)}this.toolBox.width=this.controlBox.start.width-t,this.toolBox.height=this.controlBox.start.height+n}this.controlBox.btnName==`topCenter`&&(r=this.toolBox.x,i=this.toolBox.y+n,this.toolBox.width=this.controlBox.start.width,this.toolBox.height=this.controlBox.start.height-n),this.controlBox.btnName==`downCenter`&&(r=this.toolBox.x,i=this.toolBox.y,this.toolBox.width=this.controlBox.start.width,this.toolBox.height=this.controlBox.start.height+n),this.controlBox.btnName==`leftCenter`&&(r=this.toolBox.x+t,i=this.toolBox.y,this.toolBox.width=this.controlBox.start.width-t,this.toolBox.height=this.controlBox.start.height),this.controlBox.btnName==`rightCenter`&&(r=this.toolBox.x,i=this.toolBox.y,this.toolBox.width=this.controlBox.start.width+t,this.toolBox.height=this.controlBox.start.height),r!==void 0&&i!==void 0&&this.drawControlBox(this.toolBox.width,this.toolBox.height,r,i)}this.rotateControl.active&&this.scrollBarControlMove(e),e.stopPropagation()},changeFileName(e,t){let n=e.lastIndexOf(`.`);return e.substr(0,n+1)+(t===`jpeg`?`jpg`:t)},cropPicture(e){let t=this;if(this.drawImg.img){let n=this.$refs.canvas;if(this.WatermarkText&&!e){let e=n.getContext(`2d`);e&&(e.font=this.WatermarkTextFont,e.fillStyle=this.WatermarkTextColor,e.textAlign=`right`,e.textBaseline=`bottom`,e.fillText(this.WatermarkText,this.toolBox.x+this.toolBox.width*this.WatermarkTextX,this.toolBox.y+this.toolBox.height*this.WatermarkTextY))}let r=new Image;this.crossOrigin===!0&&(r.crossOrigin=this.crossOriginHeader),r.src=n.toDataURL(`image/${this.fileType}`,t.quality),HTMLCanvasElement.prototype.toBlob||Object.defineProperty(HTMLCanvasElement.prototype,`toBlob`,{value:(e,r,i)=>{window.atob?setTimeout(()=>{let a=atob(n.toDataURL(r,i).split(`,`)[1]),o=a.length,s=new Uint8Array(o),c;for(let e=0;e<o;e++)s[e]=a.charCodeAt(e);try{c=new Blob([s],{type:`image/${t.fileType}`})}catch(e){if(window.BlobBuilder=window.BlobBuilder||window.WebKitBlobBuilder||window.MozBlobBuilder||window.MSBlobBuilder,e.name==`TypeError`&&window.BlobBuilder){let e=window.BlobBuilder,n=new e;n.append(s.buffer),c=n.getBlob(`image/${t.fileType}`)}e.name==`InvalidStateError`&&(c=new Blob([s.buffer],{type:`image/${t.fileType}`}))}e(c)},200):e(null)}}),n.toBlob(n=>{if(n){let i=new FileReader;i.readAsDataURL(n),i.onload=()=>{let n=setInterval(()=>{if(i.readyState==2){clearInterval(n);let i=document.createElement(`canvas`),a=i.getContext(`2d`);if(t.originalGraph==1&&t.drawImg.img){let e=t.drawImg.width/t.drawImg.swidth,n=t.toolBox.width/e,r=t.toolBox.height/e;i.width=n,i.height=r;let o=(t.toolBox.x-t.drawImg.x)/e,s=(t.toolBox.y-t.drawImg.y)/e,c=t.drawImg.swidth,l=t.drawImg.sheight;a&&(a.translate(-o,-s),a.drawImage(t.drawImg.img,0,0,c,l))}else{i.width=t.toolBox.width,i.height=t.toolBox.height;let e=t.toolBox;if(t.rate&&a){let n=Number(t.rate.split(`:`)[0])/Number(t.rate.split(`:`)[1]);Number(t.rate.split(`:`)[0])>=Number(t.rate.split(`:`)[1])?a.drawImage(r,e.x,e.y,e.width,e.width*n,0,0,e.width,e.width*n):a.drawImage(r,e.x,e.y,e.width,e.width/n,0,0,e.width,e.width/n)}else a&&a.drawImage(r,e.x,e.y,e.width,e.height,0,0,e.width,e.height)}i.toBlob(n=>{let r=t.changeFileName(t.fileName,t.fileType);e?t.previewMode&&t.$emit(`onPrintImg`,{index:t.index,fileName:r,blob:n,file:t.dataURLtoFile(i.toDataURL(`image/${t.fileType}`,t.quality),r),dataURL:i.toDataURL(`image/${t.fileType}`,t.quality)}):(t.handleClose(),t.$emit(`cutDown`,{index:t.index,fileName:r,blob:n,file:t.dataURLtoFile(i.toDataURL(`image/${t.fileType}`,t.quality),r),dataURL:i.toDataURL(`image/${t.fileType}`,t.quality)}))},`image/${t.fileType}`,t.quality)}},200)}}else{let n=document.createElement(`canvas`);n.width=t.toolBox.width,n.height=t.toolBox.height;let i=n.getContext(`2d`),a=t.toolBox;if(t.rate&&i){let e=Number(t.rate.split(`:`)[0])/Number(t.rate.split(`:`)[1]);i.drawImage(r,a.x,a.y,a.width,a.width*e,0,0,a.width,a.width*e)}else i&&i.drawImage(r,a.x,a.y,a.width,a.height,0,0,a.width,a.height);let o=t.changeFileName(t.fileName,t.fileType);e?t.$emit(`onPrintImg`,{fileName:o,dataURL:n.toDataURL(`image/${t.fileType}`,t.quality)}):(t.handleClose(),t.$emit(`cutDown`,{fileName:o,dataURL:n.toDataURL(`image/${t.fileType}`,t.quality)}))}},`image/${t.fileType}`,t.quality)}else e||(console.warn(`No picture selected`),t.$emit(`error`,{type:4,err:1,msg:`No picture selected`}))},scrollBarControlMove(e){if(this.rotateControl.active){let t=e.pageX-this.rotateControl.start.x,n=this.rotateControl.start.position+t;n<=0&&(n=0),n>=200&&(n=200),this.rotateControl.position=n,this.rotateImg.angle=(n-100)/100*180,this.printImg()}},scrollBarControlOn(e){this.rotateControl.active=!0,this.rotateControl.start.x=e.pageX,this.rotateControl.start.y=e.pageY,this.rotateControl.start.position=this.rotateControl.position},scrollBarControlOff(){this.rotateControl.active=!1}}}),r=(e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n},i={class:`toolMain`},a={key:0,class:`tool-title`},o={class:`tips`},s={key:0,class:`dockBtn`},c={key:4,class:`dockBtnScrollBar`},l={class:`toolBoxControlBox`},u={class:`controlBox`},d={class:`selectArea`},f={class:`copyright`},p={key:0,target:`_blank`,href:`https://github.com/acccccccb/vue-img-cutter`,rel:`nofollow`},m=[`width`,`height`],h=[`width`,`height`],g={class:`i-dialog-footer`,style:{height:`40px`}},_=[`accept`],v={key:0,class:`btn btn-primary btn-primary-plain`},y={class:`btn-group fr`},b=[`disabled`];function x(t,n,r,x,S,C){return(0,e.openBlock)(),(0,e.createElementBlock)(`div`,null,[t.showChooseBtn===!0&&t.isModal===!0?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:0,onClick:n[0]||=(...e)=>t.handleOpen&&t.handleOpen(...e)},[(0,e.renderSlot)(t.$slots,`openImgCutter`,{},void 0,!0),(0,e.renderSlot)(t.$slots,`open`,{},void 0,!0)])):(0,e.createCommentVNode)(``,!0),!t.$slots.openImgCutter&&!t.$slots.open&&t.isModal===!0?((0,e.openBlock)(),(0,e.createElementBlock)(`button`,{key:1,type:`button`,class:`btn btn-primary`,onClick:n[1]||=(...e)=>t.handleOpen&&t.handleOpen(...e)},(0,e.toDisplayString)(t.label),1)):(0,e.createCommentVNode)(``,!0),(0,e.createVNode)(e.Transition,{name:`fade`},{default:(0,e.withCtx)(()=>[t.visible?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:0,ref:`mask`,class:(0,e.normalizeClass)(t.isModal===!0?`mask vue-img-cutter`:``)},[t.visible?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:0,class:(0,e.normalizeClass)(t.isModal===!0?`dialogBoxModal`:`dialogBox`)},[(0,e.createVNode)(e.Transition,{name:`fade`,"enter-class":`fade-in-enter`,"enter-active-class":`fade-in-active`,"leave-class":`fade-out-enter`,"leave-active-class":`fade-out-active`},{default:(0,e.withCtx)(()=>[(0,e.createElementVNode)(`div`,{ref:`dialogMainModalRef`,class:(0,e.normalizeClass)(t.isModal===!0?`dialogMainModal`:`dialogMain`),style:(0,e.normalizeStyle)(`width:`+(t.isModal===!0?t.boxWidth+32:t.boxWidth)+`px`)},[(0,e.createElementVNode)(`div`,i,[t.isModal===!0?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,a,[(0,e.createTextVNode)((0,e.toDisplayString)(t.modalTitle)+` `,1),(0,e.createElementVNode)(`span`,{class:`closeIcon`,onClick:n[2]||=(...e)=>t.handleClose&&t.handleClose(...e)},`×`)])):(0,e.createCommentVNode)(``,!0),(0,e.createElementVNode)(`div`,{ref:`toolBox`,style:(0,e.normalizeStyle)(`height:`+t.boxHeight+`px;width:`+t.boxWidth+`px`),class:`toolBox`,onMousemove:n[29]||=(...e)=>t.controlBtnMouseMove&&t.controlBtnMouseMove(...e),onMouseup:n[30]||=(...e)=>t.controlBtnMouseUp&&t.controlBtnMouseUp(...e),onMouseleave:n[31]||=(...e)=>t.controlBtnMouseUp&&t.controlBtnMouseUp(...e)},[(0,e.withDirectives)((0,e.createElementVNode)(`div`,o,[(0,e.createElementVNode)(`div`,{class:`btn btn-warning btn-xs`,onClick:n[3]||=(...e)=>t.chooseImg&&t.chooseImg(...e)},(0,e.toDisplayString)(t.label),1)],512),[[e.vShow,!t.drawImg.img&&t.showChooseBtn===!0]]),t.tool==1?(0,e.withDirectives)(((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:0,class:`dockMain`,style:(0,e.normalizeStyle)(`background:`+t.toolBgc),onMouseenter:n[13]||=(...e)=>t.dropImgOff&&t.dropImgOff(...e)},[t.rate?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,s,[(0,e.renderSlot)(t.$slots,`ratio`,{},()=>[n[36]||=(0,e.createTextVNode)(` Ratio: `,-1)],!0),(0,e.createTextVNode)(` `+(0,e.toDisplayString)(t.rate),1)])):(0,e.createCommentVNode)(``,!0),(0,e.createElementVNode)(`div`,{class:`dockBtn`,onClick:n[4]||=(...e)=>t.scaleReset&&t.scaleReset(...e)},[(0,e.renderSlot)(t.$slots,`scaleReset`,{},()=>[n[37]||=(0,e.createTextVNode)(` Scale: `,-1)],!0),(0,e.createTextVNode)(` `+(0,e.toDisplayString)(t.drawImg.swidth>0?(t.drawImg.width/t.drawImg.swidth).toFixed(2):`-`),1)]),t.originalGraph===!1?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:1,class:`dockBtn`,onClick:n[5]||=e=>t.turnImg(-90)},[(0,e.renderSlot)(t.$slots,`turnLeft`,{},()=>[n[38]||=(0,e.createTextVNode)(` ↳ `,-1)],!0)])):(0,e.createCommentVNode)(``,!0),t.originalGraph===!1?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:2,class:`dockBtn`,onClick:n[6]||=e=>t.turnImg(90)},[(0,e.renderSlot)(t.$slots,`turnRight`,{},()=>[n[39]||=(0,e.createTextVNode)(` ↲ `,-1)],!0)])):(0,e.createCommentVNode)(``,!0),t.originalGraph===!1?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:3,class:`dockBtn`,onClick:n[7]||=e=>t.turnReset()},[(0,e.renderSlot)(t.$slots,`reset`,{},()=>[n[40]||=(0,e.createTextVNode)(` ↻ `,-1)],!0)])):(0,e.createCommentVNode)(``,!0),t.originalGraph===!1?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,c,[(0,e.createElementVNode)(`div`,{ref:`dockBtnScrollControl`,style:(0,e.normalizeStyle)(`left:`+t.rotateControl.position+`px`),class:`scrollBarControl`,onMousemove:n[8]||=(...e)=>t.scrollBarControlMove&&t.scrollBarControlMove(...e),onMousedown:n[9]||=(...e)=>t.scrollBarControlOn&&t.scrollBarControlOn(...e),onMouseup:n[10]||=(...e)=>t.scrollBarControlOff&&t.scrollBarControlOff(...e)},null,36),t.rotateControl.active==1?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:0,class:`scrollBarText`,style:(0,e.normalizeStyle)(`left:`+t.rotateControl.position+`px`)},(0,e.toDisplayString)(t.rotateImg.angle.toFixed(0)+`°`),5)):(0,e.createCommentVNode)(``,!0)])):(0,e.createCommentVNode)(``,!0),t.originalGraph===!1?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:5,class:`dockBtn`,onClick:n[11]||=(...e)=>t.flipHorizontal&&t.flipHorizontal(...e)},[(0,e.renderSlot)(t.$slots,`flipHorizontal`,{},()=>[n[41]||=(0,e.createTextVNode)(` ⇆ `,-1)],!0)])):(0,e.createCommentVNode)(``,!0),t.originalGraph===!1?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:6,class:`dockBtn`,onClick:n[12]||=(...e)=>t.flipVertically&&t.flipVertically(...e)},[(0,e.renderSlot)(t.$slots,`flipVertically`,{},()=>[n[42]||=(0,e.createTextVNode)(` ⇅ `,-1)],!0)])):(0,e.createCommentVNode)(``,!0)],36)),[[e.vShow,t.drawImg.img&&t.dropImg.active!==!0&&t.controlBox.disable==1&&t.toolBox.disable==1]]):(0,e.createCommentVNode)(``,!0),(0,e.withDirectives)((0,e.createElementVNode)(`div`,{ref:`toolBoxControl`,class:`toolBoxControl`,style:(0,e.normalizeStyle)({pointerEvents:t.moveAble?`auto`:`none`}),onMousedown:n[22]||=(...e)=>t.toolBoxMouseDown&&t.toolBoxMouseDown(...e),onMouseup:n[23]||=(...e)=>t.toolBoxMouseUp&&t.toolBoxMouseUp(...e),onMousemove:n[24]||=(...e)=>t.toolBoxMouseMove&&t.toolBoxMouseMove(...e),onMouseleave:n[25]||=(...e)=>t.toolBoxMouseLeave&&t.toolBoxMouseLeave(...e)},[(0,e.createElementVNode)(`div`,l,[(0,e.createElementVNode)(`div`,u,[n[43]||=(0,e.createElementVNode)(`div`,{class:`controlBoxInnerLine controlBoxInnerLineTop`},null,-1),n[44]||=(0,e.createElementVNode)(`div`,{class:`controlBoxInnerLine controlBoxInnerLineBottom`},null,-1),n[45]||=(0,e.createElementVNode)(`div`,{class:`controlBoxInnerLine controlBoxInnerLineLeft`},null,-1),n[46]||=(0,e.createElementVNode)(`div`,{class:`controlBoxInnerLine controlBoxInnerLineRight`},null,-1),(0,e.createElementVNode)(`div`,d,` 宽:`+(0,e.toDisplayString)(t.showToolBoxWidth)+` 高:`+(0,e.toDisplayString)(t.showToolBoxHeight)+` (x:`+(0,e.toDisplayString)(t.showToolBoxX)+`,y:`+(0,e.toDisplayString)(t.showToolBoxY)+`) `,1),t.sizeChange===!0?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:0,"data-name":`leftUp`,class:`leftUp controlBtn`,onMousedown:n[14]||=e=>t.controlBtnMouseDown(e,`leftUp`)},null,32)):(0,e.createCommentVNode)(``,!0),t.sizeChange===!0?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:1,"data-name":`leftDown`,class:`leftDown controlBtn`,onMousedown:n[15]||=e=>t.controlBtnMouseDown(e,`leftDown`)},null,32)):(0,e.createCommentVNode)(``,!0),t.sizeChange===!0?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:2,"data-name":`rightUp`,class:`rightUp controlBtn`,onMousedown:n[16]||=e=>t.controlBtnMouseDown(e,`rightUp`)},null,32)):(0,e.createCommentVNode)(``,!0),t.sizeChange===!0?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:3,"data-name":`rightDown`,class:`rightDown controlBtn`,onMousedown:n[17]||=e=>t.controlBtnMouseDown(e,`rightDown`)},null,32)):(0,e.createCommentVNode)(``,!0),t.sizeChange===!0&&!t.rate&&t.toolBox.width>20?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:4,"data-name":`topCenter`,class:`topCenter controlBtn`,onMousedown:n[18]||=e=>t.controlBtnMouseDown(e,`topCenter`)},null,32)):(0,e.createCommentVNode)(``,!0),t.sizeChange===!0&&!t.rate&&t.toolBox.width>20?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:5,"data-name":`downCenter`,class:`downCenter controlBtn`,onMousedown:n[19]||=e=>t.controlBtnMouseDown(e,`downCenter`)},null,32)):(0,e.createCommentVNode)(``,!0),t.sizeChange===!0&&!t.rate&&t.toolBox.height>20?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:6,"data-name":`leftCenter`,class:`leftCenter controlBtn`,onMousedown:n[20]||=e=>t.controlBtnMouseDown(e,`leftCenter`)},null,32)):(0,e.createCommentVNode)(``,!0),t.sizeChange===!0&&!t.rate&&t.toolBox.height>20?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:7,"data-name":`rightCenter`,class:`rightCenter controlBtn`,onMousedown:n[21]||=e=>t.controlBtnMouseDown(e,`rightCenter`)},null,32)):(0,e.createCommentVNode)(``,!0)]),n[47]||=(0,e.createElementVNode)(`div`,{class:`toolBoxControlLine toolBoxControlLineItem-1`},null,-1),n[48]||=(0,e.createElementVNode)(`div`,{class:`toolBoxControlLine toolBoxControlLineItem-2`},null,-1),n[49]||=(0,e.createElementVNode)(`div`,{class:`toolBoxControlLine toolBoxControlLineItem-3`},null,-1),n[50]||=(0,e.createElementVNode)(`div`,{class:`toolBoxControlLine toolBoxControlLineItem-4`},null,-1)])],36),[[e.vShow,t.drawImg.img!=null]]),(0,e.createElementVNode)(`div`,f,[t.DoNotDisplayCopyright?(0,e.createCommentVNode)(``,!0):((0,e.openBlock)(),(0,e.createElementBlock)(`a`,p,` vue-img-cutter `+(0,e.toDisplayString)(t.version),1))]),(0,e.createElementVNode)(`canvas`,{ref:`canvasSelectBox`,class:`canvasSelectBox`,width:t.boxWidth,height:t.boxHeight,onMousedown:n[26]||=(...e)=>t.dropImgOn&&t.dropImgOn(...e),onMouseup:n[27]||=(...e)=>t.dropImgOff&&t.dropImgOff(...e),onMousemove:n[28]||=(...e)=>t.dropImgMove&&t.dropImgMove(...e)},null,40,m),(0,e.createElementVNode)(`canvas`,{ref:`canvas`,class:`canvas`,width:t.boxWidth,height:t.boxHeight},null,8,h)],36)]),(0,e.createElementVNode)(`div`,g,[(0,e.createElementVNode)(`input`,{ref:`inputFile`,type:`file`,accept:t.accept,style:{width:`1px`,height:`1px`,border:`none`,opacity:`0`},onChange:n[32]||=(...e)=>t.putImgToCanv&&t.putImgToCanv(...e)},null,40,_),(0,e.createElementVNode)(`span`,{onClick:n[33]||=(...e)=>t.chooseImg&&t.chooseImg(...e)},[(0,e.renderSlot)(t.$slots,`choose`,{},()=>[t.showChooseBtn===!0?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,v,(0,e.toDisplayString)(t.label),1)):(0,e.createCommentVNode)(``,!0)],!0)]),(0,e.createElementVNode)(`div`,y,[(0,e.createElementVNode)(`span`,{onClick:n[34]||=(...e)=>t.handleClose&&t.handleClose(...e)},[(0,e.renderSlot)(t.$slots,`cancel`,{},()=>[n[51]||=(0,e.createElementVNode)(`button`,{type:`button`,class:`btn btn-default`},`取消`,-1)],!0)]),(0,e.createElementVNode)(`span`,{onClick:n[35]||=e=>t.cropPicture(!1)},[(0,e.renderSlot)(t.$slots,`confirm`,{},()=>[(0,e.createElementVNode)(`button`,{type:`button`,class:`btn btn-primary`,style:{"margin-left":`15px`},disabled:!t.drawImg.img},` 确定 `,8,b)],!0)])])])],6)]),_:3}),n[52]||=(0,e.createElementVNode)(`div`,{style:{clear:`both`}},null,-1)],2)):(0,e.createCommentVNode)(``,!0)],2)):(0,e.createCommentVNode)(``,!0)]),_:3})])}return r(n,[[`render`,x],[`__scopeId`,`data-v-5423aacc`]])});