9 lines
34 KiB
JavaScript
9 lines
34 KiB
JavaScript
|
(function(w,l){typeof exports=="object"&&typeof module<"u"?l(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],l):(w=typeof globalThis<"u"?globalThis:w||self,l(w["vue-cropper"]={},w.Vue))})(this,function(w,l){"use strict";var b=document.createElement("style");b.textContent=`.vue-cropper[data-v-49e90ec5]{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-49e90ec5],.cropper-box-canvas[data-v-49e90ec5],.cropper-drag-box[data-v-49e90ec5],.cropper-crop-box[data-v-49e90ec5],.cropper-face[data-v-49e90ec5]{position:absolute;top:0;right:0;bottom:0;left:0;user-select:none}.cropper-box-canvas img[data-v-49e90ec5]{position:relative;text-align:left;user-select:none;transform:none;max-width:none;max-height:none}.cropper-box[data-v-49e90ec5]{overflow:hidden}.cropper-move[data-v-49e90ec5]{cursor:move}.cropper-crop[data-v-49e90ec5]{cursor:crosshair}.cropper-modal[data-v-49e90ec5]{background:rgba(0,0,0,.5)}.cropper-view-box[data-v-49e90ec5]{display:block;overflow:hidden;width:100%;height:100%;outline:1px solid #39f;outline-color:#3399ffbf;user-select:none}.cropper-view-box img[data-v-49e90ec5]{user-select:none;text-align:left;max-width:none;max-height:none}.cropper-face[data-v-49e90ec5]{top:0;left:0;background-color:#fff;opacity:.1}.crop-info[data-v-49e90ec5]{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-49e90ec5]{position:absolute;display:block;width:100%;height:100%;opacity:.1}.line-w[data-v-49e90ec5]{top:-3px;left:0;height:5px;cursor:n-resize}.line-a[data-v-49e90ec5]{top:0;left:-3px;width:5px;cursor:w-resize}.line-s[data-v-49e90ec5]{bottom:-3px;left:0;height:5px;cursor:s-resize}.line-d[data-v-49e90ec5]{top:0;right:-3px;width:5px;cursor:e-resize}.crop-point[data-v-49e90ec5]{position:absolute;width:8px;height:8px;opacity:.75;background-color:#39f;border-radius:100%}.point1[data-v-49e90ec5]{top:-4px;left:-4px;cursor:nw-resize}.point2[data-v-49e90ec5]{top:-5px;left:50%;margin-left:-3px;cursor:n-resize}.point3[data-v-49e90ec5]{top:-4px;right:-4px;cursor:ne-resize}.point4[data-v-49e90ec5]{top:50%;left:-4px;margin-top:-3px;cursor:w-resize}.point5[data-v-49e90ec5]{top:50%;right:-4px;margin-top:-3px;cursor:e-resize}.point6[data-v-49e90ec5]{bottom:-5px;left:-4px;cursor:sw-resize}.point7[data-v-49e90ec5]{bottom:-5px;left:50%;margin-left:-3px;cursor:s-resize}.point8[data-v-49e90ec5]{bottom:-5px;right:-4px;cursor:se-resize}@media screen and (max-width: 500px){.crop-point[data-v-49e90ec5]{position:absolute;width:20px;height:20px;opacity:.45;background-color:#39f;border-radius:100%}.point1[data-v-49e90ec5]{top:-10px;left:-10px}.point2[data-v-49e90ec5],.point4[data-v-49e90ec5],.point5[data-v-49e90ec5],.point7[data-v-49e90ec5]{display:none}.point3[data-v-49e90ec5]{top:-10px;right:-10px}.point4[data-v-49e90ec5]{top:0;left:0}.point6[data-v-49e90ec5]{bottom:-10px;left:-10px}.point8[data-v-49e90ec5]{bottom:-10px;right:-10px}}
|
||
|
|
`,document.head.appendChild(b);const y={};y.getData=t=>new Promise((e,i)=>{let s={};X(t).then(r=>{s.arrayBuffer=r,s.orientation=M(r),e(s)}).catch(r=>{i(r)})});function X(t){let e=null;return new Promise((i,s)=>{if(t.src)if(/^data\:/i.test(t.src))e=W(t.src),i(e);else if(/^blob\:/i.test(t.src)){var r=new FileReader;r.onload=function(h){e=h.target.result,i(e)},H(t.src,function(h){r.readAsArrayBuffer(h)})}else{var o=new XMLHttpRequest;o.onload=function(){if(this.status==200||this.status===0)e=o.response,i(e);else throw"Could not load image";o=null},o.open("GET",t.src,!0),o.responseType="arraybuffer",o.send(null)}else s("img error")})}function H(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 W(t){t=t.replace(/^data\:([^\;]+)\;base64,/gmi,"");for(var e=atob(t),i=e.length,s=new ArrayBuffer(i),r=new Uint8Array(s),o=0;o<i;o++)r[o]=e.charCodeAt(o);return s}function Y(t,e,i){var s="",r;for(r=e,i+=e;r<i;r++)s+=String.fromCharCode(t.getUint8(r));return s}function M(t){var e=new DataView(t),i=e.byteLength,s,r,o,h,n,p,c,a,f,u;if(e.getUint8(0)===255&&e.getUint8(1)===216)for(f=2;f<i;){if(e.getUint8(f)===255&&e.getUint8(f+1)===225){c=f;break}f++}if(c&&(r=c+4,o=c+10,Y(e,r,4)==="Exif"&&(p=e.getUint16(o),n=p===18761,(n||p===19789)&&e.getUint16(o+2,n)===42&&(h=e.getUint32(o+4,n),h>=8&&(a=o+h)))),a){for(i=e.getUint16(a,n),u=0;u<i;u++)if(f=a+u*12+2,e.getUint16(f,n)===274){f+=8,s=e.getUint16(f,n);break}}return s}const z="",A=(t,e)=>{const i=t.__vccOpts||t;for(const[s,r]of e)i[s]=r;return i},S=l.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,validator:function(t){return Array.isArray(t)?Number(t[0])>=0&&Number(t[1])>=0:Number(t)>=0}}},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.go
|
||
|
|
<div class="show-preview" style="width: ${s.w}px; height: ${s.h}px,; overflow: hidden">
|
||
|
|
<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)">
|
||
|
|
</div>
|
||
|
|
</div>`,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"),setTimeout(()=>{this.showPreview()},20)})},t.onerror=()=>{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 r=s[0];if(r.search("px")!==-1){r=r.replace("px",""),e=parseFloat(r);const o=e/this.trueWidth;let h=1,n=s[1];n.search("px")!==-1&&(n=n.replace("px",""),i=parseFloat(n),h=i/this.trueHeight),t=Math.min(o,h)}if(r.search("%")!==-1&&(r=r.replace("%",""),e=parseFloat(r)/100*this.w,t=e/this.trueWidth),s.length===2&&r==="auto"){let o=s[1];o.search("px")!==-1&&(o=o.replace("px",""),i=parseFloat(o),t=i/this.trueHeight),o.search("%")!==-1&&(o=o.replace("%",""),i=parseFloat(o)/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 n=(h?this.trueHeight:this.trueWidth)*this.scale,p=(h?this.trueWidth:this.trueHeight)*this.scale;i=n<i?n:i,s=p<s?p:s}var r=t||parseFloat(this.autoCropWidth),o=e||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(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 r=this.getImgAxis(t,e,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 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,r){for(var o=atob(this.toDataURL(s,r).split(",")[1]),h=o.length,n=new Uint8Array(h),p=0;p<h;p++)n[p]=o.charCodeAt(p);i(new Blob([n],{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"},I=["src"],k={class:"cropper-view-box"},N=["src"],L={key:1};function T(t,e,i,s,r,o){return l.openBlock(),l.createElementBlock("div",{class:"vue-cropper",ref:"cropper",onMouseover:e[28]||(e[28]=
|