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

vue-cropper

Package Overview
Dependencies
Maintainers
1
Versions
81
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-cropper - npm Package Compare versions

Comparing version 1.0.4 to 1.0.5

6

dist/vue-cropper.es.js

@@ -1485,3 +1485,3 @@ import { defineComponent, openBlock, createElementBlock, withDirectives, createElementVNode, normalizeStyle, vShow, createCommentVNode, normalizeClass, toDisplayString } from "vue";

},
destroyed() {
unmounted() {
window.removeEventListener("mousemove", this.moveCrop);

@@ -1628,3 +1628,3 @@ window.removeEventListener("mouseup", this.leaveCrop);

}
var VueCropper = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-be5e5ddc"]]);
var VueCropper = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-26736c2c"]]);
const install = function(Vue) {

@@ -1637,3 +1637,3 @@ Vue.component("VueCropper", VueCropper);

const globalCropper = {
version: "1.0.4",
version: "1.0.5",
install,

@@ -1640,0 +1640,0 @@ VueCropper

10

dist/vue-cropper.umd.js

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

var __vite_style__=document.createElement("style");__vite_style__.innerHTML=`.vue-cropper[data-v-be5e5ddc]{position:relative;width:100%;height:100%;box-sizing:border-box;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;direction:ltr;touch-action:none;text-align:left;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC)}.cropper-box[data-v-be5e5ddc],.cropper-box-canvas[data-v-be5e5ddc],.cropper-drag-box[data-v-be5e5ddc],.cropper-crop-box[data-v-be5e5ddc],.cropper-face[data-v-be5e5ddc]{position:absolute;top:0;right:0;bottom:0;left:0;user-select:none}.cropper-box-canvas img[data-v-be5e5ddc]{position:relative;text-align:left;user-select:none;transform:none;max-width:none;max-height:none}.cropper-box[data-v-be5e5ddc]{overflow:hidden}.cropper-move[data-v-be5e5ddc]{cursor:move}.cropper-crop[data-v-be5e5ddc]{cursor:crosshair}.cropper-modal[data-v-be5e5ddc]{background:rgba(0,0,0,.5)}.cropper-view-box[data-v-be5e5ddc]{display:block;overflow:hidden;width:100%;height:100%;outline:1px solid #39f;outline-color:#3399ffbf;user-select:none}.cropper-view-box img[data-v-be5e5ddc]{user-select:none;text-align:left;max-width:none;max-height:none}.cropper-face[data-v-be5e5ddc]{top:0;left:0;background-color:#fff;opacity:.1}.crop-info[data-v-be5e5ddc]{position:absolute;left:0px;min-width:65px;text-align:center;color:#fff;line-height:20px;background-color:#000c;font-size:12px}.crop-line[data-v-be5e5ddc]{position:absolute;display:block;width:100%;height:100%;opacity:.1}.line-w[data-v-be5e5ddc]{top:-3px;left:0;height:5px;cursor:n-resize}.line-a[data-v-be5e5ddc]{top:0;left:-3px;width:5px;cursor:w-resize}.line-s[data-v-be5e5ddc]{bottom:-3px;left:0;height:5px;cursor:s-resize}.line-d[data-v-be5e5ddc]{top:0;right:-3px;width:5px;cursor:e-resize}.crop-point[data-v-be5e5ddc]{position:absolute;width:8px;height:8px;opacity:.75;background-color:#39f;border-radius:100%}.point1[data-v-be5e5ddc]{top:-4px;left:-4px;cursor:nw-resize}.point2[data-v-be5e5ddc]{top:-5px;left:50%;margin-left:-3px;cursor:n-resize}.point3[data-v-be5e5ddc]{top:-4px;right:-4px;cursor:ne-resize}.point4[data-v-be5e5ddc]{top:50%;left:-4px;margin-top:-3px;cursor:w-resize}.point5[data-v-be5e5ddc]{top:50%;right:-4px;margin-top:-3px;cursor:e-resize}.point6[data-v-be5e5ddc]{bottom:-5px;left:-4px;cursor:sw-resize}.point7[data-v-be5e5ddc]{bottom:-5px;left:50%;margin-left:-3px;cursor:s-resize}.point8[data-v-be5e5ddc]{bottom:-5px;right:-4px;cursor:se-resize}@media screen and (max-width: 500px){.crop-point[data-v-be5e5ddc]{position:absolute;width:20px;height:20px;opacity:.45;background-color:#39f;border-radius:100%}.point1[data-v-be5e5ddc]{top:-10px;left:-10px}.point2[data-v-be5e5ddc],.point4[data-v-be5e5ddc],.point5[data-v-be5e5ddc],.point7[data-v-be5e5ddc]{display:none}.point3[data-v-be5e5ddc]{top:-10px;right:-10px}.point4[data-v-be5e5ddc]{top:0;left:0}.point6[data-v-be5e5ddc]{bottom:-10px;left:-10px}.point8[data-v-be5e5ddc]{bottom:-10px;right:-10px}}
`;document.head.appendChild(__vite_style__);(function(w,p){typeof exports=="object"&&typeof module!="undefined"?p(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],p):(w=typeof globalThis!="undefined"?globalThis:w||self,p(w["vue-cropper"]={},w.Vue))})(this,function(w,p){"use strict";const b={};b.getData=e=>new Promise((t,i)=>{let s={};X(e).then(r=>{s.arrayBuffer=r,s.orientation=O(r),t(s)}).catch(r=>{i(r)})});function X(e){let t=null;return new Promise((i,s)=>{if(e.src)if(/^data\:/i.test(e.src))t=H(e.src),i(t);else if(/^blob\:/i.test(e.src)){var r=new FileReader;r.onload=function(h){t=h.target.result,i(t)},Y(e.src,function(h){r.readAsArrayBuffer(h)})}else{var o=new XMLHttpRequest;o.onload=function(){if(this.status==200||this.status===0)t=o.response,i(t);else throw"Could not load image";o=null},o.open("GET",e.src,!0),o.responseType="arraybuffer",o.send(null)}else s("img error")})}function Y(e,t){var i=new XMLHttpRequest;i.open("GET",e,!0),i.responseType="blob",i.onload=function(s){(this.status==200||this.status===0)&&t(this.response)},i.send()}function H(e){e=e.replace(/^data\:([^\;]+)\;base64,/gmi,"");for(var t=atob(e),i=t.length,s=new ArrayBuffer(i),r=new Uint8Array(s),o=0;o<i;o++)r[o]=t.charCodeAt(o);return s}function M(e,t,i){var s="",r;for(r=t,i+=t;r<i;r++)s+=String.fromCharCode(e.getUint8(r));return s}function O(e){var t=new DataView(e),i=t.byteLength,s,r,o,h,a,c,l,n,d,u;if(t.getUint8(0)===255&&t.getUint8(1)===216)for(d=2;d<i;){if(t.getUint8(d)===255&&t.getUint8(d+1)===225){l=d;break}d++}if(l&&(r=l+4,o=l+10,M(t,r,4)==="Exif"&&(c=t.getUint16(o),a=c===18761,(a||c===19789)&&t.getUint16(o+2,a)===42&&(h=t.getUint32(o+4,a),h>=8&&(n=o+h)))),n){for(i=t.getUint16(n,a),u=0;u<i;u++)if(d=n+u*12+2,t.getUint16(d,a)===274){d+=8,s=t.getUint16(d,a);break}}return s}var z="",A=(e,t)=>{const i=e.__vccOpts||e;for(const[s,r]of t)i[s]=r;return i};const W=p.defineComponent({data:function(){return{w:0,h:0,scale:1,x:0,y:0,loading:!0,trueWidth:0,trueHeight:0,move:!0,moveX:0,moveY:0,crop:!1,cropping:!1,cropW:0,cropH:0,cropOldW:0,cropOldH:0,canChangeX:!1,canChangeY:!1,changeCropTypeX:1,changeCropTypeY:1,cropX:0,cropY:0,cropChangeX:0,cropChangeY:0,cropOffsertX:0,cropOffsertY:0,support:"",touches:[],touchNow:!1,rotate:0,isIos:!1,orientation:0,imgs:"",coe:.2,scaling:!1,scalingSet:"",coeStatus:"",isCanShow:!0}},props:{img:{type:[String,Blob,null,File],default:""},outputSize:{type:Number,default:1},outputType:{type:String,default:"jpeg"},info:{type:Boolean,default:!0},canScale:{type:Boolean,default:!0},autoCrop:{type:Boolean,default:!1},autoCropWidth:{type:[Number,String],default:0},autoCropHeight:{type:[Number,String],default:0},fixed:{type:Boolean,default:!1},fixedNumber:{type:Array,default:()=>[1,1]},fixedBox:{type:Boolean,default:!1},full:{type:Boolean,default:!1},canMove:{type:Boolean,default:!0},canMoveBox:{type:Boolean,default:!0},original:{type:Boolean,default:!1},centerBox:{type:Boolean,default:!1},high:{type:Boolean,default:!0},infoTrue:{type:Boolean,default:!1},maxImgSize:{type:[Number,String],default:2e3},enlarge:{type:[Number,String],default:1},preW:{type:[Number,String],default:0},mode:{type:String,default:"contain"},limitMinSize:{type:[Number,Array,String],default:()=>10}},computed:{cropInfo(){let e={};if(e.top=this.cropOffsertY>21?"-21px":"0px",e.width=this.cropW>0?this.cropW:0,e.height=this.cropH>0?this.cropH:0,this.infoTrue){let t=1;this.high&&!this.full&&(t=window.devicePixelRatio),this.enlarge!==1&!this.full&&(t=Math.abs(Number(this.enlarge))),e.width=e.width*t,e.height=e.height*t,this.full&&(e.width=e.width/this.scale,e.height=e.height/this.scale)}return e.width=e.width.toFixed(0),e.height=e.height.toFixed(0),e},isIE(){return!!window.ActiveXObject||"ActiveXObject"in window},passive(){return this.isIE?null:{passive:!1}}},watch:{img(){this.checkedImg()},imgs(e){e!==""&&this.reload()},cropW(){this.showPreview()},cropH(){this.showPreview()},cropOffsertX(){this.showPreview()},cropOffsertY(){this.showPreview()},scale(e,t){this.showPreview()},x(){this.showPreview()},y(){this.showPreview()},autoCrop(e){e&&this.goAutoCrop()},autoCropWidth(){this.autoCrop&&this.goAutoCrop()},autoCropHeight(){this.autoCrop&&this.goAutoCrop()},mode(){this.checkedImg()},rotate(){this.showPreview(),this.autoCrop?this.goAutoCrop(this.cropW,this.cropH):(this.cropW>0||this.cropH>0)&&this.goAutoCrop(this.cropW,this.cropH)}},methods:{getVersion(e){var t=navigator.userAgent.split(" "),i="";let s=0;const r=new RegExp(e,"i");for(var o=0;o<t.length;o++)r.test(t[o])&&(i=t[o]);return i?s=i.split("/")[1].split("."):s=["0","0","0"],s},checkOrientationImage(e,t,i,s){if(this.getVersion("chrome")[0]>=81)t=-1;else if(this.getVersion("safari")[0]>=605){const h=this.getVersion("version");h[0]>13&&h[1]>1&&(t=-1)}else{const h=navigator.userAgent.toLowerCase().match(/cpu iphone os (.*?) like mac os/);if(h){let a=h[1];a=a.split("_"),(a[0]>13||a[0]>=13&&a[1]>=4)&&(t=-1)}}let r=document.createElement("canvas"),o=r.getContext("2d");switch(o.save(),t){case 2:r.width=i,r.height=s,o.translate(i,0),o.scale(-1,1);break;case 3:r.width=i,r.height=s,o.translate(i/2,s/2),o.rotate(180*Math.PI/180),o.translate(-i/2,-s/2);break;case 4:r.width=i,r.height=s,o.translate(0,s),o.scale(1,-1);break;case 5:r.height=i,r.width=s,o.rotate(.5*Math.PI),o.scale(1,-1);break;case 6:r.width=s,r.height=i,o.translate(s/2,i/2),o.rotate(90*Math.PI/180),o.translate(-i/2,-s/2);break;case 7:r.height=i,r.width=s,o.rotate(.5*Math.PI),o.translate(i,-s),o.scale(-1,1);break;case 8:r.height=i,r.width=s,o.translate(s/2,i/2),o.rotate(-90*Math.PI/180),o.translate(-i/2,-s/2);break;default:r.width=i,r.height=s}o.drawImage(e,0,0,i,s),o.restore(),r.toBlob(h=>{let a=URL.createObjectURL(h);URL.revokeObjectURL(this.imgs),this.imgs=a},"image/"+this.outputType,1)},checkedImg(){if(this.img===null||this.img===""){this.imgs="",this.clearCrop();return}this.loading=!0,this.scale=1,this.rotate=0,this.clearCrop();let e=new Image;if(e.onload=()=>{if(this.img==="")return this.$emit("img-load","error"),!1;let i=e.width,s=e.height;b.getData(e).then(r=>{this.orientation=r.orientation||1;let o=Number(this.maxImgSize);if(!this.orientation&&i<o&s<o){this.imgs=this.img;return}i>o&&(s=s/i*o,i=o),s>o&&(i=i/s*o,s=o),this.checkOrientationImage(e,this.orientation,i,s)})},e.onerror=()=>{this.$emit("img-load","error")},this.img.substr(0,4)!=="data"&&(e.crossOrigin=""),this.isIE){var t=new XMLHttpRequest;t.onload=function(){var i=URL.createObjectURL(this.response);e.src=i},t.open("GET",this.img,!0),t.responseType="blob",t.send()}else e.src=this.img},startMove(e){if(e.preventDefault(),this.move&&!this.crop){if(!this.canMove)return!1;this.moveX=("clientX"in e?e.clientX:e.touches[0].clientX)-this.x,this.moveY=("clientY"in e?e.clientY:e.touches[0].clientY)-this.y,e.touches?(window.addEventListener("touchmove",this.moveImg),window.addEventListener("touchend",this.leaveImg),e.touches.length==2&&(this.touches=e.touches,window.addEventListener("touchmove",this.touchScale),window.addEventListener("touchend",this.cancelTouchScale))):(window.addEventListener("mousemove",this.moveImg),window.addEventListener("mouseup",this.leaveImg)),this.$emit("imgMoving",{moving:!0,axis:this.getImgAxis()}),this.$emit("img-moving",{moving:!0,axis:this.getImgAxis()})}else this.cropping=!0,window.addEventListener("mousemove",this.createCrop),window.addEventListener("mouseup",this.endCrop),window.addEventListener("touchmove",this.createCrop),window.addEventListener("touchend",this.endCrop),this.cropOffsertX=e.offsetX?e.offsetX:e.touches[0].pageX-this.$refs.cropper.offsetLeft,this.cropOffsertY=e.offsetY?e.offsetY:e.touches[0].pageY-this.$refs.cropper.offsetTop,this.cropX="clientX"in e?e.clientX:e.touches[0].clientX,this.cropY="clientY"in e?e.clientY:e.touches[0].clientY,this.cropChangeX=this.cropOffsertX,this.cropChangeY=this.cropOffsertY,this.cropW=0,this.cropH=0},touchScale(e){e.preventDefault();let t=this.scale;var i={x:this.touches[0].clientX,y:this.touches[0].clientY},s={x:e.touches[0].clientX,y:e.touches[0].clientY},r={x:this.touches[1].clientX,y:this.touches[1].clientY},o={x:e.touches[1].clientX,y:e.touches[1].clientY},h=Math.sqrt(Math.pow(i.x-r.x,2)+Math.pow(i.y-r.y,2)),a=Math.sqrt(Math.pow(s.x-o.x,2)+Math.pow(s.y-o.y,2)),c=a-h,l=1;l=l/this.trueWidth>l/this.trueHeight?l/this.trueHeight:l/this.trueWidth,l=l>.1?.1:l;var n=l*c;if(!this.touchNow){if(this.touchNow=!0,c>0?t+=Math.abs(n):c<0&&t>Math.abs(n)&&(t-=Math.abs(n)),this.touches=e.touches,setTimeout(()=>{this.touchNow=!1},8),!this.checkoutImgAxis(this.x,this.y,t))return!1;this.scale=t}},cancelTouchScale(e){window.removeEventListener("touchmove",this.touchScale)},moveImg(e){if(e.preventDefault(),e.touches&&e.touches.length===2)return this.touches=e.touches,window.addEventListener("touchmove",this.touchScale),window.addEventListener("touchend",this.cancelTouchScale),window.removeEventListener("touchmove",this.moveImg),!1;let t="clientX"in e?e.clientX:e.touches[0].clientX,i="clientY"in e?e.clientY:e.touches[0].clientY,s,r;s=t-this.moveX,r=i-this.moveY,this.$nextTick(()=>{if(this.centerBox){let o=this.getImgAxis(s,r,this.scale),h=this.getCropAxis(),a=this.trueHeight*this.scale,c=this.trueWidth*this.scale,l,n,d,u;switch(this.rotate){case 1:case-1:case 3:case-3:l=this.cropOffsertX-this.trueWidth*(1-this.scale)/2+(a-c)/2,n=this.cropOffsertY-this.trueHeight*(1-this.scale)/2+(c-a)/2,d=l-a+this.cropW,u=n-c+this.cropH;break;default:l=this.cropOffsertX-this.trueWidth*(1-this.scale)/2,n=this.cropOffsertY-this.trueHeight*(1-this.scale)/2,d=l-c+this.cropW,u=n-a+this.cropH;break}o.x1>=h.x1&&(s=l),o.y1>=h.y1&&(r=n),o.x2<=h.x2&&(s=d),o.y2<=h.y2&&(r=u)}this.x=s,this.y=r,this.$emit("imgMoving",{moving:!0,axis:this.getImgAxis()}),this.$emit("img-moving",{moving:!0,axis:this.getImgAxis()})})},leaveImg(e){window.removeEventListener("mousemove",this.moveImg),window.removeEventListener("touchmove",this.moveImg),window.removeEventListener("mouseup",this.leaveImg),window.removeEventListener("touchend",this.leaveImg),this.$emit("imgMoving",{moving:!1,axis:this.getImgAxis()}),this.$emit("img-moving",{moving:!1,axis:this.getImgAxis()})},scaleImg(){this.canScale&&window.addEventListener(this.support,this.changeSize,this.passive)},cancelScale(){this.canScale&&window.removeEventListener(this.support,this.changeSize)},changeSize(e){e.preventDefault();let t=this.scale;var i=e.deltaY||e.wheelDelta,s=navigator.userAgent.indexOf("Firefox");i=s>0?i*30:i,this.isIE&&(i=-i);var r=this.coe;r=r/this.trueWidth>r/this.trueHeight?r/this.trueHeight:r/this.trueWidth;var o=r*i;o<0?t+=Math.abs(o):t>Math.abs(o)&&(t-=Math.abs(o));let h=o<0?"add":"reduce";if(h!==this.coeStatus&&(this.coeStatus=h,this.coe=.2),this.scaling||(this.scalingSet=setTimeout(()=>{this.scaling=!1,this.coe=this.coe+=.01},50)),this.scaling=!0,!this.checkoutImgAxis(this.x,this.y,t))return!1;this.scale=t},changeScale(e){let t=this.scale;e=e||1;var i=20;if(i=i/this.trueWidth>i/this.trueHeight?i/this.trueHeight:i/this.trueWidth,e=e*i,e>0?t+=Math.abs(e):t>Math.abs(e)&&(t-=Math.abs(e)),!this.checkoutImgAxis(this.x,this.y,t))return!1;this.scale=t},createCrop(e){e.preventDefault();var t="clientX"in e?e.clientX:e.touches?e.touches[0].clientX:0,i="clientY"in e?e.clientY:e.touches?e.touches[0].clientY:0;this.$nextTick(()=>{var s=t-this.cropX,r=i-this.cropY;if(s>0?(this.cropW=s+this.cropChangeX>this.w?this.w-this.cropChangeX:s,this.cropOffsertX=this.cropChangeX):(this.cropW=this.w-this.cropChangeX+Math.abs(s)>this.w?this.cropChangeX:Math.abs(s),this.cropOffsertX=this.cropChangeX+s>0?this.cropChangeX+s:0),!this.fixed)r>0?(this.cropH=r+this.cropChangeY>this.h?this.h-this.cropChangeY:r,this.cropOffsertY=this.cropChangeY):(this.cropH=this.h-this.cropChangeY+Math.abs(r)>this.h?this.cropChangeY:Math.abs(r),this.cropOffsertY=this.cropChangeY+r>0?this.cropChangeY+r:0);else{var o=this.cropW/this.fixedNumber[0]*this.fixedNumber[1];o+this.cropOffsertY>this.h?(this.cropH=this.h-this.cropOffsertY,this.cropW=this.cropH/this.fixedNumber[1]*this.fixedNumber[0],s>0?this.cropOffsertX=this.cropChangeX:this.cropOffsertX=this.cropChangeX-this.cropW):this.cropH=o,this.cropOffsertY=this.cropOffsertY}})},changeCropSize(e,t,i,s,r){e.preventDefault(),window.addEventListener("mousemove",this.changeCropNow),window.addEventListener("mouseup",this.changeCropEnd),window.addEventListener("touchmove",this.changeCropNow),window.addEventListener("touchend",this.changeCropEnd),this.canChangeX=t,this.canChangeY=i,this.changeCropTypeX=s,this.changeCropTypeY=r,this.cropX="clientX"in e?e.clientX:e.touches[0].clientX,this.cropY="clientY"in e?e.clientY:e.touches[0].clientY,this.cropOldW=this.cropW,this.cropOldH=this.cropH,this.cropChangeX=this.cropOffsertX,this.cropChangeY=this.cropOffsertY,this.fixed&&this.canChangeX&&this.canChangeY&&(this.canChangeY=0),this.$emit("change-crop-size",{width:this.cropW,height:this.cropH})},changeCropNow(e){e.preventDefault();var t="clientX"in e?e.clientX:e.touches?e.touches[0].clientX:0,i="clientY"in e?e.clientY:e.touches?e.touches[0].clientY:0;let s=this.w,r=this.h,o=0,h=0;if(this.centerBox){let a=this.getImgAxis(),c=a.x2,l=a.y2;o=a.x1>0?a.x1:0,h=a.y1>0?a.y1:0,s>c&&(s=c),r>l&&(r=l)}this.$nextTick(()=>{var a=t-this.cropX,c=i-this.cropY;if(this.canChangeX&&(this.changeCropTypeX===1?this.cropOldW-a>0?(this.cropW=s-this.cropChangeX-a<=s-o?this.cropOldW-a:this.cropOldW+this.cropChangeX-o,this.cropOffsertX=s-this.cropChangeX-a<=s-o?this.cropChangeX+a:o):(this.cropW=Math.abs(a)+this.cropChangeX<=s?Math.abs(a)-this.cropOldW:s-this.cropOldW-this.cropChangeX,this.cropOffsertX=this.cropChangeX+this.cropOldW):this.changeCropTypeX===2&&(this.cropOldW+a>0?(this.cropW=this.cropOldW+a+this.cropOffsertX<=s?this.cropOldW+a:s-this.cropOffsertX,this.cropOffsertX=this.cropChangeX):(this.cropW=s-this.cropChangeX+Math.abs(a+this.cropOldW)<=s-o?Math.abs(a+this.cropOldW):this.cropChangeX-o,this.cropOffsertX=s-this.cropChangeX+Math.abs(a+this.cropOldW)<=s-o?this.cropChangeX-Math.abs(a+this.cropOldW):o))),this.canChangeY&&(this.changeCropTypeY===1?this.cropOldH-c>0?(this.cropH=r-this.cropChangeY-c<=r-h?this.cropOldH-c:this.cropOldH+this.cropChangeY-h,this.cropOffsertY=r-this.cropChangeY-c<=r-h?this.cropChangeY+c:h):(this.cropH=Math.abs(c)+this.cropChangeY<=r?Math.abs(c)-this.cropOldH:r-this.cropOldH-this.cropChangeY,this.cropOffsertY=this.cropChangeY+this.cropOldH):this.changeCropTypeY===2&&(this.cropOldH+c>0?(this.cropH=this.cropOldH+c+this.cropOffsertY<=r?this.cropOldH+c:r-this.cropOffsertY,this.cropOffsertY=this.cropChangeY):(this.cropH=r-this.cropChangeY+Math.abs(c+this.cropOldH)<=r-h?Math.abs(c+this.cropOldH):this.cropChangeY-h,this.cropOffsertY=r-this.cropChangeY+Math.abs(c+this.cropOldH)<=r-h?this.cropChangeY-Math.abs(c+this.cropOldH):h))),this.canChangeX&&this.fixed){var l=this.cropW/this.fixedNumber[0]*this.fixedNumber[1];l+this.cropOffsertY>r?(this.cropH=r-this.cropOffsertY,this.cropW=this.cropH/this.fixedNumber[1]*this.fixedNumber[0]):this.cropH=l}if(this.canChangeY&&this.fixed){var n=this.cropH/this.fixedNumber[1]*this.fixedNumber[0];n+this.cropOffsertX>s?(this.cropW=s-this.cropOffsertX,this.cropH=this.cropW/this.fixedNumber[0]*this.fixedNumber[1]):this.cropW=n}})},checkCropLimitSize(){let{cropW:e,cropH:t,limitMinSize:i}=this,s=new Array;return Array.isArray[i]?s=i:s=[i,i],e=parseFloat(s[0]),t=parseFloat(s[1]),[e,t]},changeCropEnd(e){window.removeEventListener("mousemove",this.changeCropNow),window.removeEventListener("mouseup",this.changeCropEnd),window.removeEventListener("touchmove",this.changeCropNow),window.removeEventListener("touchend",this.changeCropEnd)},endCrop(){this.cropW===0&&this.cropH===0&&(this.cropping=!1),window.removeEventListener("mousemove",this.createCrop),window.removeEventListener("mouseup",this.endCrop),window.removeEventListener("touchmove",this.createCrop),window.removeEventListener("touchend",this.endCrop)},startCrop(){this.crop=!0},stopCrop(){this.crop=!1},clearCrop(){this.cropping=!1,this.cropW=0,this.cropH=0},cropMove(e){if(e.preventDefault(),!this.canMoveBox)return this.crop=!1,this.startMove(e),!1;if(e.touches&&e.touches.length===2)return this.crop=!1,this.startMove(e),this.leaveCrop(),!1;window.addEventListener("mousemove",this.moveCrop),window.addEventListener("mouseup",this.leaveCrop),window.addEventListener("touchmove",this.moveCrop),window.addEventListener("touchend",this.leaveCrop);let t="clientX"in e?e.clientX:e.touches[0].clientX,i="clientY"in e?e.clientY:e.touches[0].clientY,s,r;s=t-this.cropOffsertX,r=i-this.cropOffsertY,this.cropX=s,this.cropY=r,this.$emit("cropMoving",{moving:!0,axis:this.getCropAxis()}),this.$emit("crop-moving",{moving:!0,axis:this.getCropAxis()})},moveCrop(e,t){let i=0,s=0;e&&(e.preventDefault(),i="clientX"in e?e.clientX:e.touches[0].clientX,s="clientY"in e?e.clientY:e.touches[0].clientY),this.$nextTick(()=>{let r,o,h=i-this.cropX,a=s-this.cropY;if(t&&(h=this.cropOffsertX,a=this.cropOffsertY),h<=0?r=0:h+this.cropW>this.w?r=this.w-this.cropW:r=h,a<=0?o=0:a+this.cropH>this.h?o=this.h-this.cropH:o=a,this.centerBox){let c=this.getImgAxis();r<=c.x1&&(r=c.x1),r+this.cropW>c.x2&&(r=c.x2-this.cropW),o<=c.y1&&(o=c.y1),o+this.cropH>c.y2&&(o=c.y2-this.cropH)}this.cropOffsertX=r,this.cropOffsertY=o,this.$emit("cropMoving",{moving:!0,axis:this.getCropAxis()}),this.$emit("crop-moving",{moving:!0,axis:this.getCropAxis()})})},getImgAxis(e,t,i){e=e||this.x,t=t||this.y,i=i||this.scale;let s={x1:0,x2:0,y1:0,y2:0},r=this.trueWidth*i,o=this.trueHeight*i;switch(this.rotate){case 0:s.x1=e+this.trueWidth*(1-i)/2,s.x2=s.x1+this.trueWidth*i,s.y1=t+this.trueHeight*(1-i)/2,s.y2=s.y1+this.trueHeight*i;break;case 1:case-1:case 3:case-3:s.x1=e+this.trueWidth*(1-i)/2+(r-o)/2,s.x2=s.x1+this.trueHeight*i,s.y1=t+this.trueHeight*(1-i)/2+(o-r)/2,s.y2=s.y1+this.trueWidth*i;break;default:s.x1=e+this.trueWidth*(1-i)/2,s.x2=s.x1+this.trueWidth*i,s.y1=t+this.trueHeight*(1-i)/2,s.y2=s.y1+this.trueHeight*i;break}return s},getCropAxis(){let e={x1:0,x2:0,y1:0,y2:0};return e.x1=this.cropOffsertX,e.x2=e.x1+this.cropW,e.y1=this.cropOffsertY,e.y2=e.y1+this.cropH,e},leaveCrop(e){window.removeEventListener("mousemove",this.moveCrop),window.removeEventListener("mouseup",this.leaveCrop),window.removeEventListener("touchmove",this.moveCrop),window.removeEventListener("touchend",this.leaveCrop),this.$emit("cropMoving",{moving:!1,axis:this.getCropAxis()}),this.$emit("crop-moving",{moving:!1,axis:this.getCropAxis()})},getCropChecked(e){let t=document.createElement("canvas"),i=new Image,s=this.rotate,r=this.trueWidth,o=this.trueHeight,h=this.cropOffsertX,a=this.cropOffsertY;i.onload=()=>{if(this.cropW!==0){let n=t.getContext("2d"),d=1;this.high&!this.full&&(d=window.devicePixelRatio),this.enlarge!==1&!this.full&&(d=Math.abs(Number(this.enlarge)));let u=this.cropW*d,C=this.cropH*d,f=r*this.scale*d,g=o*this.scale*d,m=(this.x-h+this.trueWidth*(1-this.scale)/2)*d,v=(this.y-a+this.trueHeight*(1-this.scale)/2)*d;switch(l(u,C),n.save(),s){case 0:this.full?(l(u/this.scale,C/this.scale),n.drawImage(i,m/this.scale,v/this.scale,f/this.scale,g/this.scale)):n.drawImage(i,m,v,f,g);break;case 1:case-3:this.full?(l(u/this.scale,C/this.scale),m=m/this.scale+(f/this.scale-g/this.scale)/2,v=v/this.scale+(g/this.scale-f/this.scale)/2,n.rotate(s*90*Math.PI/180),n.drawImage(i,v,-m-g/this.scale,f/this.scale,g/this.scale)):(m=m+(f-g)/2,v=v+(g-f)/2,n.rotate(s*90*Math.PI/180),n.drawImage(i,v,-m-g,f,g));break;case 2:case-2:this.full?(l(u/this.scale,C/this.scale),n.rotate(s*90*Math.PI/180),m=m/this.scale,v=v/this.scale,n.drawImage(i,-m-f/this.scale,-v-g/this.scale,f/this.scale,g/this.scale)):(n.rotate(s*90*Math.PI/180),n.drawImage(i,-m-f,-v-g,f,g));break;case 3:case-1:this.full?(l(u/this.scale,C/this.scale),m=m/this.scale+(f/this.scale-g/this.scale)/2,v=v/this.scale+(g/this.scale-f/this.scale)/2,n.rotate(s*90*Math.PI/180),n.drawImage(i,-v-f/this.scale,m,f/this.scale,g/this.scale)):(m=m+(f-g)/2,v=v+(g-f)/2,n.rotate(s*90*Math.PI/180),n.drawImage(i,-v-f,m,f,g));break;default:this.full?(l(u/this.scale,C/this.scale),n.drawImage(i,m/this.scale,v/this.scale,f/this.scale,g/this.scale)):n.drawImage(i,m,v,f,g)}n.restore()}else{let n=r*this.scale,d=o*this.scale,u=t.getContext("2d");switch(u.save(),s){case 0:l(n,d),u.drawImage(i,0,0,n,d);break;case 1:case-3:l(d,n),u.rotate(s*90*Math.PI/180),u.drawImage(i,0,-d,n,d);break;case 2:case-2:l(n,d),u.rotate(s*90*Math.PI/180),u.drawImage(i,-n,-d,n,d);break;case 3:case-1:l(d,n),u.rotate(s*90*Math.PI/180),u.drawImage(i,-n,0,n,d);break;default:l(n,d),u.drawImage(i,0,0,n,d)}u.restore()}e(t)};var c=this.img.substr(0,4);c!=="data"&&(i.crossOrigin="Anonymous"),i.src=this.imgs;function l(n,d){t.width=Math.round(n),t.height=Math.round(d)}},getCropData(e){this.getCropChecked(t=>{e(t.toDataURL("image/"+this.outputType,this.outputSize))})},getCropBlob(e){this.getCropChecked(t=>{t.toBlob(i=>e(i),"image/"+this.outputType,this.outputSize)})},showPreview(){if(this.isCanShow)this.isCanShow=!1,setTimeout(()=>{this.isCanShow=!0},16);else return!1;let e=this.cropW,t=this.cropH,i=this.scale;var s={};s.div={width:`${e}px`,height:`${t}px`};let r=(this.x-this.cropOffsertX)/i,o=(this.y-this.cropOffsertY)/i,h=0;s.w=e,s.h=t,s.url=this.imgs,s.img={width:`${this.trueWidth}px`,height:`${this.trueHeight}px`,transform:`scale(${i})translate3d(${r}px, ${o}px, ${h}px)rotateZ(${this.rotate*90}deg)`},s.html=`
var __vite_style__=document.createElement("style");__vite_style__.innerHTML=`.vue-cropper[data-v-26736c2c]{position:relative;width:100%;height:100%;box-sizing:border-box;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;direction:ltr;touch-action:none;text-align:left;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC)}.cropper-box[data-v-26736c2c],.cropper-box-canvas[data-v-26736c2c],.cropper-drag-box[data-v-26736c2c],.cropper-crop-box[data-v-26736c2c],.cropper-face[data-v-26736c2c]{position:absolute;top:0;right:0;bottom:0;left:0;user-select:none}.cropper-box-canvas img[data-v-26736c2c]{position:relative;text-align:left;user-select:none;transform:none;max-width:none;max-height:none}.cropper-box[data-v-26736c2c]{overflow:hidden}.cropper-move[data-v-26736c2c]{cursor:move}.cropper-crop[data-v-26736c2c]{cursor:crosshair}.cropper-modal[data-v-26736c2c]{background:rgba(0,0,0,.5)}.cropper-view-box[data-v-26736c2c]{display:block;overflow:hidden;width:100%;height:100%;outline:1px solid #39f;outline-color:#3399ffbf;user-select:none}.cropper-view-box img[data-v-26736c2c]{user-select:none;text-align:left;max-width:none;max-height:none}.cropper-face[data-v-26736c2c]{top:0;left:0;background-color:#fff;opacity:.1}.crop-info[data-v-26736c2c]{position:absolute;left:0px;min-width:65px;text-align:center;color:#fff;line-height:20px;background-color:#000c;font-size:12px}.crop-line[data-v-26736c2c]{position:absolute;display:block;width:100%;height:100%;opacity:.1}.line-w[data-v-26736c2c]{top:-3px;left:0;height:5px;cursor:n-resize}.line-a[data-v-26736c2c]{top:0;left:-3px;width:5px;cursor:w-resize}.line-s[data-v-26736c2c]{bottom:-3px;left:0;height:5px;cursor:s-resize}.line-d[data-v-26736c2c]{top:0;right:-3px;width:5px;cursor:e-resize}.crop-point[data-v-26736c2c]{position:absolute;width:8px;height:8px;opacity:.75;background-color:#39f;border-radius:100%}.point1[data-v-26736c2c]{top:-4px;left:-4px;cursor:nw-resize}.point2[data-v-26736c2c]{top:-5px;left:50%;margin-left:-3px;cursor:n-resize}.point3[data-v-26736c2c]{top:-4px;right:-4px;cursor:ne-resize}.point4[data-v-26736c2c]{top:50%;left:-4px;margin-top:-3px;cursor:w-resize}.point5[data-v-26736c2c]{top:50%;right:-4px;margin-top:-3px;cursor:e-resize}.point6[data-v-26736c2c]{bottom:-5px;left:-4px;cursor:sw-resize}.point7[data-v-26736c2c]{bottom:-5px;left:50%;margin-left:-3px;cursor:s-resize}.point8[data-v-26736c2c]{bottom:-5px;right:-4px;cursor:se-resize}@media screen and (max-width: 500px){.crop-point[data-v-26736c2c]{position:absolute;width:20px;height:20px;opacity:.45;background-color:#39f;border-radius:100%}.point1[data-v-26736c2c]{top:-10px;left:-10px}.point2[data-v-26736c2c],.point4[data-v-26736c2c],.point5[data-v-26736c2c],.point7[data-v-26736c2c]{display:none}.point3[data-v-26736c2c]{top:-10px;right:-10px}.point4[data-v-26736c2c]{top:0;left:0}.point6[data-v-26736c2c]{bottom:-10px;left:-10px}.point8[data-v-26736c2c]{bottom:-10px;right:-10px}}
`;document.head.appendChild(__vite_style__);(function(w,p){typeof exports=="object"&&typeof module!="undefined"?p(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],p):(w=typeof globalThis!="undefined"?globalThis:w||self,p(w["vue-cropper"]={},w.Vue))})(this,function(w,p){"use strict";const b={};b.getData=t=>new Promise((e,i)=>{let s={};X(t).then(o=>{s.arrayBuffer=o,s.orientation=O(o),e(s)}).catch(o=>{i(o)})});function X(t){let e=null;return new Promise((i,s)=>{if(t.src)if(/^data\:/i.test(t.src))e=H(t.src),i(e);else if(/^blob\:/i.test(t.src)){var o=new FileReader;o.onload=function(h){e=h.target.result,i(e)},Y(t.src,function(h){o.readAsArrayBuffer(h)})}else{var r=new XMLHttpRequest;r.onload=function(){if(this.status==200||this.status===0)e=r.response,i(e);else throw"Could not load image";r=null},r.open("GET",t.src,!0),r.responseType="arraybuffer",r.send(null)}else s("img error")})}function Y(t,e){var i=new XMLHttpRequest;i.open("GET",t,!0),i.responseType="blob",i.onload=function(s){(this.status==200||this.status===0)&&e(this.response)},i.send()}function H(t){t=t.replace(/^data\:([^\;]+)\;base64,/gmi,"");for(var e=atob(t),i=e.length,s=new ArrayBuffer(i),o=new Uint8Array(s),r=0;r<i;r++)o[r]=e.charCodeAt(r);return s}function M(t,e,i){var s="",o;for(o=e,i+=e;o<i;o++)s+=String.fromCharCode(t.getUint8(o));return s}function O(t){var e=new DataView(t),i=e.byteLength,s,o,r,h,a,c,l,n,u,f;if(e.getUint8(0)===255&&e.getUint8(1)===216)for(u=2;u<i;){if(e.getUint8(u)===255&&e.getUint8(u+1)===225){l=u;break}u++}if(l&&(o=l+4,r=l+10,M(e,o,4)==="Exif"&&(c=e.getUint16(r),a=c===18761,(a||c===19789)&&e.getUint16(r+2,a)===42&&(h=e.getUint32(r+4,a),h>=8&&(n=r+h)))),n){for(i=e.getUint16(n,a),f=0;f<i;f++)if(u=n+f*12+2,e.getUint16(u,a)===274){u+=8,s=e.getUint16(u,a);break}}return s}var z="",A=(t,e)=>{const i=t.__vccOpts||t;for(const[s,o]of e)i[s]=o;return i};const W=p.defineComponent({data:function(){return{w:0,h:0,scale:1,x:0,y:0,loading:!0,trueWidth:0,trueHeight:0,move:!0,moveX:0,moveY:0,crop:!1,cropping:!1,cropW:0,cropH:0,cropOldW:0,cropOldH:0,canChangeX:!1,canChangeY:!1,changeCropTypeX:1,changeCropTypeY:1,cropX:0,cropY:0,cropChangeX:0,cropChangeY:0,cropOffsertX:0,cropOffsertY:0,support:"",touches:[],touchNow:!1,rotate:0,isIos:!1,orientation:0,imgs:"",coe:.2,scaling:!1,scalingSet:"",coeStatus:"",isCanShow:!0}},props:{img:{type:[String,Blob,null,File],default:""},outputSize:{type:Number,default:1},outputType:{type:String,default:"jpeg"},info:{type:Boolean,default:!0},canScale:{type:Boolean,default:!0},autoCrop:{type:Boolean,default:!1},autoCropWidth:{type:[Number,String],default:0},autoCropHeight:{type:[Number,String],default:0},fixed:{type:Boolean,default:!1},fixedNumber:{type:Array,default:()=>[1,1]},fixedBox:{type:Boolean,default:!1},full:{type:Boolean,default:!1},canMove:{type:Boolean,default:!0},canMoveBox:{type:Boolean,default:!0},original:{type:Boolean,default:!1},centerBox:{type:Boolean,default:!1},high:{type:Boolean,default:!0},infoTrue:{type:Boolean,default:!1},maxImgSize:{type:[Number,String],default:2e3},enlarge:{type:[Number,String],default:1},preW:{type:[Number,String],default:0},mode:{type:String,default:"contain"},limitMinSize:{type:[Number,Array,String],default:()=>10}},computed:{cropInfo(){let t={};if(t.top=this.cropOffsertY>21?"-21px":"0px",t.width=this.cropW>0?this.cropW:0,t.height=this.cropH>0?this.cropH:0,this.infoTrue){let e=1;this.high&&!this.full&&(e=window.devicePixelRatio),this.enlarge!==1&!this.full&&(e=Math.abs(Number(this.enlarge))),t.width=t.width*e,t.height=t.height*e,this.full&&(t.width=t.width/this.scale,t.height=t.height/this.scale)}return t.width=t.width.toFixed(0),t.height=t.height.toFixed(0),t},isIE(){return!!window.ActiveXObject||"ActiveXObject"in window},passive(){return this.isIE?null:{passive:!1}}},watch:{img(){this.checkedImg()},imgs(t){t!==""&&this.reload()},cropW(){this.showPreview()},cropH(){this.showPreview()},cropOffsertX(){this.showPreview()},cropOffsertY(){this.showPreview()},scale(t,e){this.showPreview()},x(){this.showPreview()},y(){this.showPreview()},autoCrop(t){t&&this.goAutoCrop()},autoCropWidth(){this.autoCrop&&this.goAutoCrop()},autoCropHeight(){this.autoCrop&&this.goAutoCrop()},mode(){this.checkedImg()},rotate(){this.showPreview(),this.autoCrop?this.goAutoCrop(this.cropW,this.cropH):(this.cropW>0||this.cropH>0)&&this.goAutoCrop(this.cropW,this.cropH)}},methods:{getVersion(t){var e=navigator.userAgent.split(" "),i="";let s=0;const o=new RegExp(t,"i");for(var r=0;r<e.length;r++)o.test(e[r])&&(i=e[r]);return i?s=i.split("/")[1].split("."):s=["0","0","0"],s},checkOrientationImage(t,e,i,s){if(this.getVersion("chrome")[0]>=81)e=-1;else if(this.getVersion("safari")[0]>=605){const h=this.getVersion("version");h[0]>13&&h[1]>1&&(e=-1)}else{const h=navigator.userAgent.toLowerCase().match(/cpu iphone os (.*?) like mac os/);if(h){let a=h[1];a=a.split("_"),(a[0]>13||a[0]>=13&&a[1]>=4)&&(e=-1)}}let o=document.createElement("canvas"),r=o.getContext("2d");switch(r.save(),e){case 2:o.width=i,o.height=s,r.translate(i,0),r.scale(-1,1);break;case 3:o.width=i,o.height=s,r.translate(i/2,s/2),r.rotate(180*Math.PI/180),r.translate(-i/2,-s/2);break;case 4:o.width=i,o.height=s,r.translate(0,s),r.scale(1,-1);break;case 5:o.height=i,o.width=s,r.rotate(.5*Math.PI),r.scale(1,-1);break;case 6:o.width=s,o.height=i,r.translate(s/2,i/2),r.rotate(90*Math.PI/180),r.translate(-i/2,-s/2);break;case 7:o.height=i,o.width=s,r.rotate(.5*Math.PI),r.translate(i,-s),r.scale(-1,1);break;case 8:o.height=i,o.width=s,r.translate(s/2,i/2),r.rotate(-90*Math.PI/180),r.translate(-i/2,-s/2);break;default:o.width=i,o.height=s}r.drawImage(t,0,0,i,s),r.restore(),o.toBlob(h=>{let a=URL.createObjectURL(h);URL.revokeObjectURL(this.imgs),this.imgs=a},"image/"+this.outputType,1)},checkedImg(){if(this.img===null||this.img===""){this.imgs="",this.clearCrop();return}this.loading=!0,this.scale=1,this.rotate=0,this.clearCrop();let t=new Image;if(t.onload=()=>{if(this.img==="")return this.$emit("img-load","error"),!1;let i=t.width,s=t.height;b.getData(t).then(o=>{this.orientation=o.orientation||1;let r=Number(this.maxImgSize);if(!this.orientation&&i<r&s<r){this.imgs=this.img;return}i>r&&(s=s/i*r,i=r),s>r&&(i=i/s*r,s=r),this.checkOrientationImage(t,this.orientation,i,s)})},t.onerror=()=>{this.$emit("img-load","error")},this.img.substr(0,4)!=="data"&&(t.crossOrigin=""),this.isIE){var e=new XMLHttpRequest;e.onload=function(){var i=URL.createObjectURL(this.response);t.src=i},e.open("GET",this.img,!0),e.responseType="blob",e.send()}else t.src=this.img},startMove(t){if(t.preventDefault(),this.move&&!this.crop){if(!this.canMove)return!1;this.moveX=("clientX"in t?t.clientX:t.touches[0].clientX)-this.x,this.moveY=("clientY"in t?t.clientY:t.touches[0].clientY)-this.y,t.touches?(window.addEventListener("touchmove",this.moveImg),window.addEventListener("touchend",this.leaveImg),t.touches.length==2&&(this.touches=t.touches,window.addEventListener("touchmove",this.touchScale),window.addEventListener("touchend",this.cancelTouchScale))):(window.addEventListener("mousemove",this.moveImg),window.addEventListener("mouseup",this.leaveImg)),this.$emit("imgMoving",{moving:!0,axis:this.getImgAxis()}),this.$emit("img-moving",{moving:!0,axis:this.getImgAxis()})}else this.cropping=!0,window.addEventListener("mousemove",this.createCrop),window.addEventListener("mouseup",this.endCrop),window.addEventListener("touchmove",this.createCrop),window.addEventListener("touchend",this.endCrop),this.cropOffsertX=t.offsetX?t.offsetX:t.touches[0].pageX-this.$refs.cropper.offsetLeft,this.cropOffsertY=t.offsetY?t.offsetY:t.touches[0].pageY-this.$refs.cropper.offsetTop,this.cropX="clientX"in t?t.clientX:t.touches[0].clientX,this.cropY="clientY"in t?t.clientY:t.touches[0].clientY,this.cropChangeX=this.cropOffsertX,this.cropChangeY=this.cropOffsertY,this.cropW=0,this.cropH=0},touchScale(t){t.preventDefault();let e=this.scale;var i={x:this.touches[0].clientX,y:this.touches[0].clientY},s={x:t.touches[0].clientX,y:t.touches[0].clientY},o={x:this.touches[1].clientX,y:this.touches[1].clientY},r={x:t.touches[1].clientX,y:t.touches[1].clientY},h=Math.sqrt(Math.pow(i.x-o.x,2)+Math.pow(i.y-o.y,2)),a=Math.sqrt(Math.pow(s.x-r.x,2)+Math.pow(s.y-r.y,2)),c=a-h,l=1;l=l/this.trueWidth>l/this.trueHeight?l/this.trueHeight:l/this.trueWidth,l=l>.1?.1:l;var n=l*c;if(!this.touchNow){if(this.touchNow=!0,c>0?e+=Math.abs(n):c<0&&e>Math.abs(n)&&(e-=Math.abs(n)),this.touches=t.touches,setTimeout(()=>{this.touchNow=!1},8),!this.checkoutImgAxis(this.x,this.y,e))return!1;this.scale=e}},cancelTouchScale(t){window.removeEventListener("touchmove",this.touchScale)},moveImg(t){if(t.preventDefault(),t.touches&&t.touches.length===2)return this.touches=t.touches,window.addEventListener("touchmove",this.touchScale),window.addEventListener("touchend",this.cancelTouchScale),window.removeEventListener("touchmove",this.moveImg),!1;let e="clientX"in t?t.clientX:t.touches[0].clientX,i="clientY"in t?t.clientY:t.touches[0].clientY,s,o;s=e-this.moveX,o=i-this.moveY,this.$nextTick(()=>{if(this.centerBox){let r=this.getImgAxis(s,o,this.scale),h=this.getCropAxis(),a=this.trueHeight*this.scale,c=this.trueWidth*this.scale,l,n,u,f;switch(this.rotate){case 1:case-1:case 3:case-3:l=this.cropOffsertX-this.trueWidth*(1-this.scale)/2+(a-c)/2,n=this.cropOffsertY-this.trueHeight*(1-this.scale)/2+(c-a)/2,u=l-a+this.cropW,f=n-c+this.cropH;break;default:l=this.cropOffsertX-this.trueWidth*(1-this.scale)/2,n=this.cropOffsertY-this.trueHeight*(1-this.scale)/2,u=l-c+this.cropW,f=n-a+this.cropH;break}r.x1>=h.x1&&(s=l),r.y1>=h.y1&&(o=n),r.x2<=h.x2&&(s=u),r.y2<=h.y2&&(o=f)}this.x=s,this.y=o,this.$emit("imgMoving",{moving:!0,axis:this.getImgAxis()}),this.$emit("img-moving",{moving:!0,axis:this.getImgAxis()})})},leaveImg(t){window.removeEventListener("mousemove",this.moveImg),window.removeEventListener("touchmove",this.moveImg),window.removeEventListener("mouseup",this.leaveImg),window.removeEventListener("touchend",this.leaveImg),this.$emit("imgMoving",{moving:!1,axis:this.getImgAxis()}),this.$emit("img-moving",{moving:!1,axis:this.getImgAxis()})},scaleImg(){this.canScale&&window.addEventListener(this.support,this.changeSize,this.passive)},cancelScale(){this.canScale&&window.removeEventListener(this.support,this.changeSize)},changeSize(t){t.preventDefault();let e=this.scale;var i=t.deltaY||t.wheelDelta,s=navigator.userAgent.indexOf("Firefox");i=s>0?i*30:i,this.isIE&&(i=-i);var o=this.coe;o=o/this.trueWidth>o/this.trueHeight?o/this.trueHeight:o/this.trueWidth;var r=o*i;r<0?e+=Math.abs(r):e>Math.abs(r)&&(e-=Math.abs(r));let h=r<0?"add":"reduce";if(h!==this.coeStatus&&(this.coeStatus=h,this.coe=.2),this.scaling||(this.scalingSet=setTimeout(()=>{this.scaling=!1,this.coe=this.coe+=.01},50)),this.scaling=!0,!this.checkoutImgAxis(this.x,this.y,e))return!1;this.scale=e},changeScale(t){let e=this.scale;t=t||1;var i=20;if(i=i/this.trueWidth>i/this.trueHeight?i/this.trueHeight:i/this.trueWidth,t=t*i,t>0?e+=Math.abs(t):e>Math.abs(t)&&(e-=Math.abs(t)),!this.checkoutImgAxis(this.x,this.y,e))return!1;this.scale=e},createCrop(t){t.preventDefault();var e="clientX"in t?t.clientX:t.touches?t.touches[0].clientX:0,i="clientY"in t?t.clientY:t.touches?t.touches[0].clientY:0;this.$nextTick(()=>{var s=e-this.cropX,o=i-this.cropY;if(s>0?(this.cropW=s+this.cropChangeX>this.w?this.w-this.cropChangeX:s,this.cropOffsertX=this.cropChangeX):(this.cropW=this.w-this.cropChangeX+Math.abs(s)>this.w?this.cropChangeX:Math.abs(s),this.cropOffsertX=this.cropChangeX+s>0?this.cropChangeX+s:0),!this.fixed)o>0?(this.cropH=o+this.cropChangeY>this.h?this.h-this.cropChangeY:o,this.cropOffsertY=this.cropChangeY):(this.cropH=this.h-this.cropChangeY+Math.abs(o)>this.h?this.cropChangeY:Math.abs(o),this.cropOffsertY=this.cropChangeY+o>0?this.cropChangeY+o:0);else{var r=this.cropW/this.fixedNumber[0]*this.fixedNumber[1];r+this.cropOffsertY>this.h?(this.cropH=this.h-this.cropOffsertY,this.cropW=this.cropH/this.fixedNumber[1]*this.fixedNumber[0],s>0?this.cropOffsertX=this.cropChangeX:this.cropOffsertX=this.cropChangeX-this.cropW):this.cropH=r,this.cropOffsertY=this.cropOffsertY}})},changeCropSize(t,e,i,s,o){t.preventDefault(),window.addEventListener("mousemove",this.changeCropNow),window.addEventListener("mouseup",this.changeCropEnd),window.addEventListener("touchmove",this.changeCropNow),window.addEventListener("touchend",this.changeCropEnd),this.canChangeX=e,this.canChangeY=i,this.changeCropTypeX=s,this.changeCropTypeY=o,this.cropX="clientX"in t?t.clientX:t.touches[0].clientX,this.cropY="clientY"in t?t.clientY:t.touches[0].clientY,this.cropOldW=this.cropW,this.cropOldH=this.cropH,this.cropChangeX=this.cropOffsertX,this.cropChangeY=this.cropOffsertY,this.fixed&&this.canChangeX&&this.canChangeY&&(this.canChangeY=0),this.$emit("change-crop-size",{width:this.cropW,height:this.cropH})},changeCropNow(t){t.preventDefault();var e="clientX"in t?t.clientX:t.touches?t.touches[0].clientX:0,i="clientY"in t?t.clientY:t.touches?t.touches[0].clientY:0;let s=this.w,o=this.h,r=0,h=0;if(this.centerBox){let a=this.getImgAxis(),c=a.x2,l=a.y2;r=a.x1>0?a.x1:0,h=a.y1>0?a.y1:0,s>c&&(s=c),o>l&&(o=l)}this.$nextTick(()=>{var a=e-this.cropX,c=i-this.cropY;if(this.canChangeX&&(this.changeCropTypeX===1?this.cropOldW-a>0?(this.cropW=s-this.cropChangeX-a<=s-r?this.cropOldW-a:this.cropOldW+this.cropChangeX-r,this.cropOffsertX=s-this.cropChangeX-a<=s-r?this.cropChangeX+a:r):(this.cropW=Math.abs(a)+this.cropChangeX<=s?Math.abs(a)-this.cropOldW:s-this.cropOldW-this.cropChangeX,this.cropOffsertX=this.cropChangeX+this.cropOldW):this.changeCropTypeX===2&&(this.cropOldW+a>0?(this.cropW=this.cropOldW+a+this.cropOffsertX<=s?this.cropOldW+a:s-this.cropOffsertX,this.cropOffsertX=this.cropChangeX):(this.cropW=s-this.cropChangeX+Math.abs(a+this.cropOldW)<=s-r?Math.abs(a+this.cropOldW):this.cropChangeX-r,this.cropOffsertX=s-this.cropChangeX+Math.abs(a+this.cropOldW)<=s-r?this.cropChangeX-Math.abs(a+this.cropOldW):r))),this.canChangeY&&(this.changeCropTypeY===1?this.cropOldH-c>0?(this.cropH=o-this.cropChangeY-c<=o-h?this.cropOldH-c:this.cropOldH+this.cropChangeY-h,this.cropOffsertY=o-this.cropChangeY-c<=o-h?this.cropChangeY+c:h):(this.cropH=Math.abs(c)+this.cropChangeY<=o?Math.abs(c)-this.cropOldH:o-this.cropOldH-this.cropChangeY,this.cropOffsertY=this.cropChangeY+this.cropOldH):this.changeCropTypeY===2&&(this.cropOldH+c>0?(this.cropH=this.cropOldH+c+this.cropOffsertY<=o?this.cropOldH+c:o-this.cropOffsertY,this.cropOffsertY=this.cropChangeY):(this.cropH=o-this.cropChangeY+Math.abs(c+this.cropOldH)<=o-h?Math.abs(c+this.cropOldH):this.cropChangeY-h,this.cropOffsertY=o-this.cropChangeY+Math.abs(c+this.cropOldH)<=o-h?this.cropChangeY-Math.abs(c+this.cropOldH):h))),this.canChangeX&&this.fixed){var l=this.cropW/this.fixedNumber[0]*this.fixedNumber[1];l+this.cropOffsertY>o?(this.cropH=o-this.cropOffsertY,this.cropW=this.cropH/this.fixedNumber[1]*this.fixedNumber[0]):this.cropH=l}if(this.canChangeY&&this.fixed){var n=this.cropH/this.fixedNumber[1]*this.fixedNumber[0];n+this.cropOffsertX>s?(this.cropW=s-this.cropOffsertX,this.cropH=this.cropW/this.fixedNumber[0]*this.fixedNumber[1]):this.cropW=n}})},checkCropLimitSize(){let{cropW:t,cropH:e,limitMinSize:i}=this,s=new Array;return Array.isArray[i]?s=i:s=[i,i],t=parseFloat(s[0]),e=parseFloat(s[1]),[t,e]},changeCropEnd(t){window.removeEventListener("mousemove",this.changeCropNow),window.removeEventListener("mouseup",this.changeCropEnd),window.removeEventListener("touchmove",this.changeCropNow),window.removeEventListener("touchend",this.changeCropEnd)},endCrop(){this.cropW===0&&this.cropH===0&&(this.cropping=!1),window.removeEventListener("mousemove",this.createCrop),window.removeEventListener("mouseup",this.endCrop),window.removeEventListener("touchmove",this.createCrop),window.removeEventListener("touchend",this.endCrop)},startCrop(){this.crop=!0},stopCrop(){this.crop=!1},clearCrop(){this.cropping=!1,this.cropW=0,this.cropH=0},cropMove(t){if(t.preventDefault(),!this.canMoveBox)return this.crop=!1,this.startMove(t),!1;if(t.touches&&t.touches.length===2)return this.crop=!1,this.startMove(t),this.leaveCrop(),!1;window.addEventListener("mousemove",this.moveCrop),window.addEventListener("mouseup",this.leaveCrop),window.addEventListener("touchmove",this.moveCrop),window.addEventListener("touchend",this.leaveCrop);let e="clientX"in t?t.clientX:t.touches[0].clientX,i="clientY"in t?t.clientY:t.touches[0].clientY,s,o;s=e-this.cropOffsertX,o=i-this.cropOffsertY,this.cropX=s,this.cropY=o,this.$emit("cropMoving",{moving:!0,axis:this.getCropAxis()}),this.$emit("crop-moving",{moving:!0,axis:this.getCropAxis()})},moveCrop(t,e){let i=0,s=0;t&&(t.preventDefault(),i="clientX"in t?t.clientX:t.touches[0].clientX,s="clientY"in t?t.clientY:t.touches[0].clientY),this.$nextTick(()=>{let o,r,h=i-this.cropX,a=s-this.cropY;if(e&&(h=this.cropOffsertX,a=this.cropOffsertY),h<=0?o=0:h+this.cropW>this.w?o=this.w-this.cropW:o=h,a<=0?r=0:a+this.cropH>this.h?r=this.h-this.cropH:r=a,this.centerBox){let c=this.getImgAxis();o<=c.x1&&(o=c.x1),o+this.cropW>c.x2&&(o=c.x2-this.cropW),r<=c.y1&&(r=c.y1),r+this.cropH>c.y2&&(r=c.y2-this.cropH)}this.cropOffsertX=o,this.cropOffsertY=r,this.$emit("cropMoving",{moving:!0,axis:this.getCropAxis()}),this.$emit("crop-moving",{moving:!0,axis:this.getCropAxis()})})},getImgAxis(t,e,i){t=t||this.x,e=e||this.y,i=i||this.scale;let s={x1:0,x2:0,y1:0,y2:0},o=this.trueWidth*i,r=this.trueHeight*i;switch(this.rotate){case 0:s.x1=t+this.trueWidth*(1-i)/2,s.x2=s.x1+this.trueWidth*i,s.y1=e+this.trueHeight*(1-i)/2,s.y2=s.y1+this.trueHeight*i;break;case 1:case-1:case 3:case-3:s.x1=t+this.trueWidth*(1-i)/2+(o-r)/2,s.x2=s.x1+this.trueHeight*i,s.y1=e+this.trueHeight*(1-i)/2+(r-o)/2,s.y2=s.y1+this.trueWidth*i;break;default:s.x1=t+this.trueWidth*(1-i)/2,s.x2=s.x1+this.trueWidth*i,s.y1=e+this.trueHeight*(1-i)/2,s.y2=s.y1+this.trueHeight*i;break}return s},getCropAxis(){let t={x1:0,x2:0,y1:0,y2:0};return t.x1=this.cropOffsertX,t.x2=t.x1+this.cropW,t.y1=this.cropOffsertY,t.y2=t.y1+this.cropH,t},leaveCrop(t){window.removeEventListener("mousemove",this.moveCrop),window.removeEventListener("mouseup",this.leaveCrop),window.removeEventListener("touchmove",this.moveCrop),window.removeEventListener("touchend",this.leaveCrop),this.$emit("cropMoving",{moving:!1,axis:this.getCropAxis()}),this.$emit("crop-moving",{moving:!1,axis:this.getCropAxis()})},getCropChecked(t){let e=document.createElement("canvas"),i=new Image,s=this.rotate,o=this.trueWidth,r=this.trueHeight,h=this.cropOffsertX,a=this.cropOffsertY;i.onload=()=>{if(this.cropW!==0){let n=e.getContext("2d"),u=1;this.high&!this.full&&(u=window.devicePixelRatio),this.enlarge!==1&!this.full&&(u=Math.abs(Number(this.enlarge)));let f=this.cropW*u,C=this.cropH*u,d=o*this.scale*u,g=r*this.scale*u,m=(this.x-h+this.trueWidth*(1-this.scale)/2)*u,v=(this.y-a+this.trueHeight*(1-this.scale)/2)*u;switch(l(f,C),n.save(),s){case 0:this.full?(l(f/this.scale,C/this.scale),n.drawImage(i,m/this.scale,v/this.scale,d/this.scale,g/this.scale)):n.drawImage(i,m,v,d,g);break;case 1:case-3:this.full?(l(f/this.scale,C/this.scale),m=m/this.scale+(d/this.scale-g/this.scale)/2,v=v/this.scale+(g/this.scale-d/this.scale)/2,n.rotate(s*90*Math.PI/180),n.drawImage(i,v,-m-g/this.scale,d/this.scale,g/this.scale)):(m=m+(d-g)/2,v=v+(g-d)/2,n.rotate(s*90*Math.PI/180),n.drawImage(i,v,-m-g,d,g));break;case 2:case-2:this.full?(l(f/this.scale,C/this.scale),n.rotate(s*90*Math.PI/180),m=m/this.scale,v=v/this.scale,n.drawImage(i,-m-d/this.scale,-v-g/this.scale,d/this.scale,g/this.scale)):(n.rotate(s*90*Math.PI/180),n.drawImage(i,-m-d,-v-g,d,g));break;case 3:case-1:this.full?(l(f/this.scale,C/this.scale),m=m/this.scale+(d/this.scale-g/this.scale)/2,v=v/this.scale+(g/this.scale-d/this.scale)/2,n.rotate(s*90*Math.PI/180),n.drawImage(i,-v-d/this.scale,m,d/this.scale,g/this.scale)):(m=m+(d-g)/2,v=v+(g-d)/2,n.rotate(s*90*Math.PI/180),n.drawImage(i,-v-d,m,d,g));break;default:this.full?(l(f/this.scale,C/this.scale),n.drawImage(i,m/this.scale,v/this.scale,d/this.scale,g/this.scale)):n.drawImage(i,m,v,d,g)}n.restore()}else{let n=o*this.scale,u=r*this.scale,f=e.getContext("2d");switch(f.save(),s){case 0:l(n,u),f.drawImage(i,0,0,n,u);break;case 1:case-3:l(u,n),f.rotate(s*90*Math.PI/180),f.drawImage(i,0,-u,n,u);break;case 2:case-2:l(n,u),f.rotate(s*90*Math.PI/180),f.drawImage(i,-n,-u,n,u);break;case 3:case-1:l(u,n),f.rotate(s*90*Math.PI/180),f.drawImage(i,-n,0,n,u);break;default:l(n,u),f.drawImage(i,0,0,n,u)}f.restore()}t(e)};var c=this.img.substr(0,4);c!=="data"&&(i.crossOrigin="Anonymous"),i.src=this.imgs;function l(n,u){e.width=Math.round(n),e.height=Math.round(u)}},getCropData(t){this.getCropChecked(e=>{t(e.toDataURL("image/"+this.outputType,this.outputSize))})},getCropBlob(t){this.getCropChecked(e=>{e.toBlob(i=>t(i),"image/"+this.outputType,this.outputSize)})},showPreview(){if(this.isCanShow)this.isCanShow=!1,setTimeout(()=>{this.isCanShow=!0},16);else return!1;let t=this.cropW,e=this.cropH,i=this.scale;var s={};s.div={width:`${t}px`,height:`${e}px`};let o=(this.x-this.cropOffsertX)/i,r=(this.y-this.cropOffsertY)/i,h=0;s.w=t,s.h=e,s.url=this.imgs,s.img={width:`${this.trueWidth}px`,height:`${this.trueHeight}px`,transform:`scale(${i})translate3d(${o}px, ${r}px, ${h}px)rotateZ(${this.rotate*90}deg)`},s.html=`
<div class="show-preview" style="width: ${s.w}px; height: ${s.h}px,; overflow: hidden">
<div style="width: ${e}px; height: ${t}px">
<div style="width: ${t}px; height: ${e}px">
<img src=${s.url} style="width: ${this.trueWidth}px; height: ${this.trueHeight}px; transform:
scale(${i})translate3d(${r}px, ${o}px, ${h}px)rotateZ(${this.rotate*90}deg)">
scale(${i})translate3d(${o}px, ${r}px, ${h}px)rotateZ(${this.rotate*90}deg)">
</div>
</div>`,this.$emit("realTime",s),this.$emit("real-time",s)},reload(){let e=new Image;e.onload=()=>{this.w=parseFloat(window.getComputedStyle(this.$refs.cropper).width),this.h=parseFloat(window.getComputedStyle(this.$refs.cropper).height),this.trueWidth=e.width,this.trueHeight=e.height,this.original?this.scale=1:this.scale=this.checkedMode(),this.$nextTick(()=>{this.x=-(this.trueWidth-this.trueWidth*this.scale)/2+(this.w-this.trueWidth*this.scale)/2,this.y=-(this.trueHeight-this.trueHeight*this.scale)/2+(this.h-this.trueHeight*this.scale)/2,this.loading=!1,this.autoCrop&&this.goAutoCrop(),this.$emit("img-load","success"),this.$emit("imgLoad","success"),setTimeout(()=>{this.showPreview()},20)})},e.onerror=()=>{this.$emit("imgLoad","error"),this.$emit("img-load","error")},e.src=this.imgs},checkedMode(){let e=1,t=this.trueWidth,i=this.trueHeight;const s=this.mode.split(" ");switch(s[0]){case"contain":this.trueWidth>this.w&&(e=this.w/this.trueWidth),this.trueHeight*e>this.h&&(e=this.h/this.trueHeight);break;case"cover":t=this.w,e=t/this.trueWidth,i=i*e,i<this.h&&(i=this.h,e=i/this.trueHeight);break;default:try{let r=s[0];if(r.search("px")!==-1){r=r.replace("px",""),t=parseFloat(r);const o=t/this.trueWidth;let h=1,a=s[1];a.search("px")!==-1&&(a=a.replace("px",""),i=parseFloat(a),h=i/this.trueHeight),e=Math.min(o,h)}if(r.search("%")!==-1&&(r=r.replace("%",""),t=parseFloat(r)/100*this.w,e=t/this.trueWidth),s.length===2&&r==="auto"){let o=s[1];o.search("px")!==-1&&(o=o.replace("px",""),i=parseFloat(o),e=i/this.trueHeight),o.search("%")!==-1&&(o=o.replace("%",""),i=parseFloat(o)/100*this.h,e=i/this.trueHeight)}}catch{e=1}}return e},goAutoCrop(e,t){if(this.imgs===""||this.imgs===null)return;this.clearCrop(),this.cropping=!0;let i=this.w,s=this.h;if(this.centerBox){const h=Math.abs(this.rotate)%2>0;let a=(h?this.trueHeight:this.trueWidth)*this.scale,c=(h?this.trueWidth:this.trueHeight)*this.scale;i=a<i?a:i,s=c<s?c:s}var r=e||parseFloat(this.autoCropWidth),o=t||parseFloat(this.autoCropHeight);(r===0||o===0)&&(r=i*.8,o=s*.8),r=r>i?i:r,o=o>s?s:o,this.fixed&&(o=r/this.fixedNumber[0]*this.fixedNumber[1]),o>this.h&&(o=this.h,r=o/this.fixedNumber[1]*this.fixedNumber[0]),this.changeCrop(r,o)},changeCrop(e,t){if(this.centerBox){let i=this.getImgAxis();e>i.x2-i.x1&&(e=i.x2-i.x1,t=e/this.fixedNumber[0]*this.fixedNumber[1]),t>i.y2-i.y1&&(t=i.y2-i.y1,e=t/this.fixedNumber[1]*this.fixedNumber[0])}this.cropW=e,this.cropH=t,this.checkCropLimitSize(),this.$nextTick(()=>{this.cropOffsertX=(this.w-this.cropW)/2,this.cropOffsertY=(this.h-this.cropH)/2,this.centerBox&&this.moveCrop(null,!0)})},refresh(){this.img,this.imgs="",this.scale=1,this.crop=!1,this.rotate=0,this.w=0,this.h=0,this.trueWidth=0,this.trueHeight=0,this.clearCrop(),this.$nextTick(()=>{this.checkedImg()})},rotateLeft(){this.rotate=this.rotate<=-3?0:this.rotate-1},rotateRight(){this.rotate=this.rotate>=3?0:this.rotate+1},rotateClear(){this.rotate=0},checkoutImgAxis(e,t,i){e=e||this.x,t=t||this.y,i=i||this.scale;let s=!0;if(this.centerBox){let r=this.getImgAxis(e,t,i),o=this.getCropAxis();r.x1>=o.x1&&(s=!1),r.x2<=o.x2&&(s=!1),r.y1>=o.y1&&(s=!1),r.y2<=o.y2&&(s=!1)}return s}},mounted(){this.support="onwheel"in document.createElement("div")?"wheel":document.onmousewheel!==void 0?"mousewheel":"DOMMouseScroll";let e=this;var t=navigator.userAgent;this.isIOS=!!t.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),HTMLCanvasElement.prototype.toBlob||Object.defineProperty(HTMLCanvasElement.prototype,"toBlob",{value:function(i,s,r){for(var o=atob(this.toDataURL(s,r).split(",")[1]),h=o.length,a=new Uint8Array(h),c=0;c<h;c++)a[c]=o.charCodeAt(c);i(new Blob([a],{type:e.type||"image/png"}))}}),this.showPreview(),this.checkedImg()},destroyed(){window.removeEventListener("mousemove",this.moveCrop),window.removeEventListener("mouseup",this.leaveCrop),window.removeEventListener("touchmove",this.moveCrop),window.removeEventListener("touchend",this.leaveCrop),this.cancelScale()}}),E={key:0,class:"cropper-box"},S=["src"],I={class:"cropper-view-box"},k=["src"],L={key:1};function T(e,t,i,s,r,o){return p.openBlock(),p.createElementBlock("div",{class:"vue-cropper",ref:"cropper",onMouseover:t[28]||(t[28]=(...h)=>e.scaleImg&&e.scaleImg(...h)),onMouseout:t[29]||(t[29]=(...h)=>e.cancelScale&&e.cancelScale(...h))},[e.imgs?(p.openBlock(),p.createElementBlock("div",E,[p.withDirectives(p.createElementVNode("div",{class:"cropper-box-canvas",style:p.normalizeStyle({width:e.trueWidth+"px",height:e.trueHeight+"px",transform:"scale("+e.scale+","+e.scale+") translate3d("+e.x/e.scale+"px,"+e.y/e.scale+"px,0)rotateZ("+e.rotate*90+"deg)"})},[p.createElementVNode("img",{src:e.imgs,alt:"cropper-img",ref:"cropperImg"},null,8,S)],4),[[p.vShow,!e.loading]])])):p.createCommentVNode("",!0),p.createElementVNode("div",{class:p.normalizeClass(["cropper-drag-box",{"cropper-move":e.move&&!e.crop,"cropper-crop":e.crop,"cropper-modal":e.cropping}]),onMousedown:t[0]||(t[0]=(...h)=>e.startMove&&e.startMove(...h)),onTouchstart:t[1]||(t[1]=(...h)=>e.startMove&&e.startMove(...h))},null,34),p.withDirectives(p.createElementVNode("div",{class:"cropper-crop-box",style:p.normalizeStyle({width:e.cropW+"px",height:e.cropH+"px",transform:"translate3d("+e.cropOffsertX+"px,"+e.cropOffsertY+"px,0)"})},[p.createElementVNode("span",I,[p.createElementVNode("img",{style:p.normalizeStyle({width:e.trueWidth+"px",height:e.trueHeight+"px",transform:"scale("+e.scale+","+e.scale+") translate3d("+(e.x-e.cropOffsertX)/e.scale+"px,"+(e.y-e.cropOffsertY)/e.scale+"px,0)rotateZ("+e.rotate*90+"deg)"}),src:e.imgs,alt:"cropper-img"},null,12,k)]),p.createElementVNode("span",{class:"cropper-face cropper-move",onMousedown:t[2]||(t[2]=(...h)=>e.cropMove&&e.cropMove(...h)),onTouchstart:t[3]||(t[3]=(...h)=>e.cropMove&&e.cropMove(...h))},null,32),e.info?(p.openBlock(),p.createElementBlock("span",{key:0,class:"crop-info",style:p.normalizeStyle({top:e.cropInfo.top})},p.toDisplayString(e.cropInfo.width)+" \xD7 "+p.toDisplayString(e.cropInfo.height),5)):p.createCommentVNode("",!0),e.fixedBox?p.createCommentVNode("",!0):(p.openBlock(),p.createElementBlock("span",L,[p.createElementVNode("span",{class:"crop-line line-w",onMousedown:t[4]||(t[4]=h=>e.changeCropSize(h,!1,!0,0,1)),onTouchstart:t[5]||(t[5]=h=>e.changeCropSize(h,!1,!0,0,1))},null,32),p.createElementVNode("span",{class:"crop-line line-a",onMousedown:t[6]||(t[6]=h=>e.changeCropSize(h,!0,!1,1,0)),onTouchstart:t[7]||(t[7]=h=>e.changeCropSize(h,!0,!1,1,0))},null,32),p.createElementVNode("span",{class:"crop-line line-s",onMousedown:t[8]||(t[8]=h=>e.changeCropSize(h,!1,!0,0,2)),onTouchstart:t[9]||(t[9]=h=>e.changeCropSize(h,!1,!0,0,2))},null,32),p.createElementVNode("span",{class:"crop-line line-d",onMousedown:t[10]||(t[10]=h=>e.changeCropSize(h,!0,!1,2,0)),onTouchstart:t[11]||(t[11]=h=>e.changeCropSize(h,!0,!1,2,0))},null,32),p.createElementVNode("span",{class:"crop-point point1",onMousedown:t[12]||(t[12]=h=>e.changeCropSize(h,!0,!0,1,1)),onTouchstart:t[13]||(t[13]=h=>e.changeCropSize(h,!0,!0,1,1))},null,32),p.createElementVNode("span",{class:"crop-point point2",onMousedown:t[14]||(t[14]=h=>e.changeCropSize(h,!1,!0,0,1)),onTouchstart:t[15]||(t[15]=h=>e.changeCropSize(h,!1,!0,0,1))},null,32),p.createElementVNode("span",{class:"crop-point point3",onMousedown:t[16]||(t[16]=h=>e.changeCropSize(h,!0,!0,2,1)),onTouchstart:t[17]||(t[17]=h=>e.changeCropSize(h,!0,!0,2,1))},null,32),p.createElementVNode("span",{class:"crop-point point4",onMousedown:t[18]||(t[18]=h=>e.changeCropSize(h,!0,!1,1,0)),onTouchstart:t[19]||(t[19]=h=>e.changeCropSize(h,!0,!1,1,0))},null,32),p.createElementVNode("span",{class:"crop-point point5",onMousedown:t[20]||(t[20]=h=>e.changeCropSize(h,!0,!1,2,0)),onTouchstart:t[21]||(t[21]=h=>e.changeCropSize(h,!0,!1,2,0))},null,32),p.createElementVNode("span",{class:"crop-point point6",onMousedown:t[22]||(t[22]=h=>e.changeCropSize(h,!0,!0,1,2)),onTouchstart:t[23]||(t[23]=h=>e.changeCropSize(h,!0,!0,1,2))},null,32),p.createElementVNode("span",{class:"crop-point point7",onMousedown:t[24]||(t[24]=h=>e.changeCropSize(h,!1,!0,0,2)),onTouchstart:t[25]||(t[25]=h=>e.changeCropSize(h,!1,!0,0,2))},null,32),p.createElementVNode("span",{class:"crop-point point8",onMousedown:t[26]||(t[26]=h=>e.changeCropSize(h,!0,!0,2,2)),onTouchstart:t[27]||(t[27]=h=>e.changeCropSize(h,!0,!0,2,2))},null,32)]))],4),[[p.vShow,e.cropping]])],544)}var x=A(W,[["render",T],["__scopeId","data-v-be5e5ddc"]]);const N=function(e){e.component("VueCropper",x)};typeof window!="undefined"&&window.Vue&&window.Vue.createApp({}).component("VueCropper",x);const y={version:"1.0.4",install:N,VueCropper:x};w.VueCropper=x,w.default=y,w.globalCropper=y,Object.defineProperties(w,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
</div>`,this.$emit("realTime",s),this.$emit("real-time",s)},reload(){let t=new Image;t.onload=()=>{this.w=parseFloat(window.getComputedStyle(this.$refs.cropper).width),this.h=parseFloat(window.getComputedStyle(this.$refs.cropper).height),this.trueWidth=t.width,this.trueHeight=t.height,this.original?this.scale=1:this.scale=this.checkedMode(),this.$nextTick(()=>{this.x=-(this.trueWidth-this.trueWidth*this.scale)/2+(this.w-this.trueWidth*this.scale)/2,this.y=-(this.trueHeight-this.trueHeight*this.scale)/2+(this.h-this.trueHeight*this.scale)/2,this.loading=!1,this.autoCrop&&this.goAutoCrop(),this.$emit("img-load","success"),this.$emit("imgLoad","success"),setTimeout(()=>{this.showPreview()},20)})},t.onerror=()=>{this.$emit("imgLoad","error"),this.$emit("img-load","error")},t.src=this.imgs},checkedMode(){let t=1,e=this.trueWidth,i=this.trueHeight;const s=this.mode.split(" ");switch(s[0]){case"contain":this.trueWidth>this.w&&(t=this.w/this.trueWidth),this.trueHeight*t>this.h&&(t=this.h/this.trueHeight);break;case"cover":e=this.w,t=e/this.trueWidth,i=i*t,i<this.h&&(i=this.h,t=i/this.trueHeight);break;default:try{let o=s[0];if(o.search("px")!==-1){o=o.replace("px",""),e=parseFloat(o);const r=e/this.trueWidth;let h=1,a=s[1];a.search("px")!==-1&&(a=a.replace("px",""),i=parseFloat(a),h=i/this.trueHeight),t=Math.min(r,h)}if(o.search("%")!==-1&&(o=o.replace("%",""),e=parseFloat(o)/100*this.w,t=e/this.trueWidth),s.length===2&&o==="auto"){let r=s[1];r.search("px")!==-1&&(r=r.replace("px",""),i=parseFloat(r),t=i/this.trueHeight),r.search("%")!==-1&&(r=r.replace("%",""),i=parseFloat(r)/100*this.h,t=i/this.trueHeight)}}catch{t=1}}return t},goAutoCrop(t,e){if(this.imgs===""||this.imgs===null)return;this.clearCrop(),this.cropping=!0;let i=this.w,s=this.h;if(this.centerBox){const h=Math.abs(this.rotate)%2>0;let a=(h?this.trueHeight:this.trueWidth)*this.scale,c=(h?this.trueWidth:this.trueHeight)*this.scale;i=a<i?a:i,s=c<s?c:s}var o=t||parseFloat(this.autoCropWidth),r=e||parseFloat(this.autoCropHeight);(o===0||r===0)&&(o=i*.8,r=s*.8),o=o>i?i:o,r=r>s?s:r,this.fixed&&(r=o/this.fixedNumber[0]*this.fixedNumber[1]),r>this.h&&(r=this.h,o=r/this.fixedNumber[1]*this.fixedNumber[0]),this.changeCrop(o,r)},changeCrop(t,e){if(this.centerBox){let i=this.getImgAxis();t>i.x2-i.x1&&(t=i.x2-i.x1,e=t/this.fixedNumber[0]*this.fixedNumber[1]),e>i.y2-i.y1&&(e=i.y2-i.y1,t=e/this.fixedNumber[1]*this.fixedNumber[0])}this.cropW=t,this.cropH=e,this.checkCropLimitSize(),this.$nextTick(()=>{this.cropOffsertX=(this.w-this.cropW)/2,this.cropOffsertY=(this.h-this.cropH)/2,this.centerBox&&this.moveCrop(null,!0)})},refresh(){this.img,this.imgs="",this.scale=1,this.crop=!1,this.rotate=0,this.w=0,this.h=0,this.trueWidth=0,this.trueHeight=0,this.clearCrop(),this.$nextTick(()=>{this.checkedImg()})},rotateLeft(){this.rotate=this.rotate<=-3?0:this.rotate-1},rotateRight(){this.rotate=this.rotate>=3?0:this.rotate+1},rotateClear(){this.rotate=0},checkoutImgAxis(t,e,i){t=t||this.x,e=e||this.y,i=i||this.scale;let s=!0;if(this.centerBox){let o=this.getImgAxis(t,e,i),r=this.getCropAxis();o.x1>=r.x1&&(s=!1),o.x2<=r.x2&&(s=!1),o.y1>=r.y1&&(s=!1),o.y2<=r.y2&&(s=!1)}return s}},mounted(){this.support="onwheel"in document.createElement("div")?"wheel":document.onmousewheel!==void 0?"mousewheel":"DOMMouseScroll";let t=this;var e=navigator.userAgent;this.isIOS=!!e.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),HTMLCanvasElement.prototype.toBlob||Object.defineProperty(HTMLCanvasElement.prototype,"toBlob",{value:function(i,s,o){for(var r=atob(this.toDataURL(s,o).split(",")[1]),h=r.length,a=new Uint8Array(h),c=0;c<h;c++)a[c]=r.charCodeAt(c);i(new Blob([a],{type:t.type||"image/png"}))}}),this.showPreview(),this.checkedImg()},unmounted(){window.removeEventListener("mousemove",this.moveCrop),window.removeEventListener("mouseup",this.leaveCrop),window.removeEventListener("touchmove",this.moveCrop),window.removeEventListener("touchend",this.leaveCrop),this.cancelScale()}}),E={key:0,class:"cropper-box"},S=["src"],I={class:"cropper-view-box"},k=["src"],L={key:1};function T(t,e,i,s,o,r){return p.openBlock(),p.createElementBlock("div",{class:"vue-cropper",ref:"cropper",onMouseover:e[28]||(e[28]=(...h)=>t.scaleImg&&t.scaleImg(...h)),onMouseout:e[29]||(e[29]=(...h)=>t.cancelScale&&t.cancelScale(...h))},[t.imgs?(p.openBlock(),p.createElementBlock("div",E,[p.withDirectives(p.createElementVNode("div",{class:"cropper-box-canvas",style:p.normalizeStyle({width:t.trueWidth+"px",height:t.trueHeight+"px",transform:"scale("+t.scale+","+t.scale+") translate3d("+t.x/t.scale+"px,"+t.y/t.scale+"px,0)rotateZ("+t.rotate*90+"deg)"})},[p.createElementVNode("img",{src:t.imgs,alt:"cropper-img",ref:"cropperImg"},null,8,S)],4),[[p.vShow,!t.loading]])])):p.createCommentVNode("",!0),p.createElementVNode("div",{class:p.normalizeClass(["cropper-drag-box",{"cropper-move":t.move&&!t.crop,"cropper-crop":t.crop,"cropper-modal":t.cropping}]),onMousedown:e[0]||(e[0]=(...h)=>t.startMove&&t.startMove(...h)),onTouchstart:e[1]||(e[1]=(...h)=>t.startMove&&t.startMove(...h))},null,34),p.withDirectives(p.createElementVNode("div",{class:"cropper-crop-box",style:p.normalizeStyle({width:t.cropW+"px",height:t.cropH+"px",transform:"translate3d("+t.cropOffsertX+"px,"+t.cropOffsertY+"px,0)"})},[p.createElementVNode("span",I,[p.createElementVNode("img",{style:p.normalizeStyle({width:t.trueWidth+"px",height:t.trueHeight+"px",transform:"scale("+t.scale+","+t.scale+") translate3d("+(t.x-t.cropOffsertX)/t.scale+"px,"+(t.y-t.cropOffsertY)/t.scale+"px,0)rotateZ("+t.rotate*90+"deg)"}),src:t.imgs,alt:"cropper-img"},null,12,k)]),p.createElementVNode("span",{class:"cropper-face cropper-move",onMousedown:e[2]||(e[2]=(...h)=>t.cropMove&&t.cropMove(...h)),onTouchstart:e[3]||(e[3]=(...h)=>t.cropMove&&t.cropMove(...h))},null,32),t.info?(p.openBlock(),p.createElementBlock("span",{key:0,class:"crop-info",style:p.normalizeStyle({top:t.cropInfo.top})},p.toDisplayString(t.cropInfo.width)+" \xD7 "+p.toDisplayString(t.cropInfo.height),5)):p.createCommentVNode("",!0),t.fixedBox?p.createCommentVNode("",!0):(p.openBlock(),p.createElementBlock("span",L,[p.createElementVNode("span",{class:"crop-line line-w",onMousedown:e[4]||(e[4]=h=>t.changeCropSize(h,!1,!0,0,1)),onTouchstart:e[5]||(e[5]=h=>t.changeCropSize(h,!1,!0,0,1))},null,32),p.createElementVNode("span",{class:"crop-line line-a",onMousedown:e[6]||(e[6]=h=>t.changeCropSize(h,!0,!1,1,0)),onTouchstart:e[7]||(e[7]=h=>t.changeCropSize(h,!0,!1,1,0))},null,32),p.createElementVNode("span",{class:"crop-line line-s",onMousedown:e[8]||(e[8]=h=>t.changeCropSize(h,!1,!0,0,2)),onTouchstart:e[9]||(e[9]=h=>t.changeCropSize(h,!1,!0,0,2))},null,32),p.createElementVNode("span",{class:"crop-line line-d",onMousedown:e[10]||(e[10]=h=>t.changeCropSize(h,!0,!1,2,0)),onTouchstart:e[11]||(e[11]=h=>t.changeCropSize(h,!0,!1,2,0))},null,32),p.createElementVNode("span",{class:"crop-point point1",onMousedown:e[12]||(e[12]=h=>t.changeCropSize(h,!0,!0,1,1)),onTouchstart:e[13]||(e[13]=h=>t.changeCropSize(h,!0,!0,1,1))},null,32),p.createElementVNode("span",{class:"crop-point point2",onMousedown:e[14]||(e[14]=h=>t.changeCropSize(h,!1,!0,0,1)),onTouchstart:e[15]||(e[15]=h=>t.changeCropSize(h,!1,!0,0,1))},null,32),p.createElementVNode("span",{class:"crop-point point3",onMousedown:e[16]||(e[16]=h=>t.changeCropSize(h,!0,!0,2,1)),onTouchstart:e[17]||(e[17]=h=>t.changeCropSize(h,!0,!0,2,1))},null,32),p.createElementVNode("span",{class:"crop-point point4",onMousedown:e[18]||(e[18]=h=>t.changeCropSize(h,!0,!1,1,0)),onTouchstart:e[19]||(e[19]=h=>t.changeCropSize(h,!0,!1,1,0))},null,32),p.createElementVNode("span",{class:"crop-point point5",onMousedown:e[20]||(e[20]=h=>t.changeCropSize(h,!0,!1,2,0)),onTouchstart:e[21]||(e[21]=h=>t.changeCropSize(h,!0,!1,2,0))},null,32),p.createElementVNode("span",{class:"crop-point point6",onMousedown:e[22]||(e[22]=h=>t.changeCropSize(h,!0,!0,1,2)),onTouchstart:e[23]||(e[23]=h=>t.changeCropSize(h,!0,!0,1,2))},null,32),p.createElementVNode("span",{class:"crop-point point7",onMousedown:e[24]||(e[24]=h=>t.changeCropSize(h,!1,!0,0,2)),onTouchstart:e[25]||(e[25]=h=>t.changeCropSize(h,!1,!0,0,2))},null,32),p.createElementVNode("span",{class:"crop-point point8",onMousedown:e[26]||(e[26]=h=>t.changeCropSize(h,!0,!0,2,2)),onTouchstart:e[27]||(e[27]=h=>t.changeCropSize(h,!0,!0,2,2))},null,32)]))],4),[[p.vShow,t.cropping]])],544)}var x=A(W,[["render",T],["__scopeId","data-v-26736c2c"]]);const N=function(t){t.component("VueCropper",x)};typeof window!="undefined"&&window.Vue&&window.Vue.createApp({}).component("VueCropper",x);const y={version:"1.0.5",install:N,VueCropper:x};w.VueCropper=x,w.default=y,w.globalCropper=y,Object.defineProperties(w,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

2

lib/index.ts

@@ -15,3 +15,3 @@ import VueCropper from './vue-cropper.vue'

export const globalCropper: vueCropperGlobal = {
version: '1.0.4',
version: '1.0.5',
install,

@@ -18,0 +18,0 @@ VueCropper,

2

package.json
{
"name": "vue-cropper",
"version": "1.0.4",
"version": "1.0.5",
"description": "A simple Vue picture clipping plugin",

@@ -5,0 +5,0 @@ "keywords": [

dist/index.css

Sorry, the diff of this file is not supported yet

lib/vue-cropper.vue

Sorry, the diff of this file is not supported yet

src/App.vue

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

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

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc