| 1 |
- (window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["creationedit"],{"1fc8":function(t,e,n){t.exports=n.p+"img/video-bg.68c585af.png"},"22c6":function(t,e,n){"use strict";n.d(e,"c",(function(){return a})),n.d(e,"a",(function(){return c})),n.d(e,"g",(function(){return h})),n.d(e,"b",(function(){return p})),n.d(e,"f",(function(){return l})),n.d(e,"e",(function(){return u})),n.d(e,"d",(function(){return f}));var i=n("2b7c");function r(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);e&&(i=i.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,i)}return n}function o(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?r(Object(n),!0).forEach((function(e){s(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):r(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}function s(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}var a=function(t){return Object(i["a"])({url:"/userMusic/detail/".concat(t),method:"get",hideLoading:!0})},c=function(t){return Object(i["a"])({url:"/open/userMusic/detail/".concat(t),baseURL:"/api-student",method:"get",hideLoading:!0})},h=function(t){return i["a"].post("/userMusicStar/page",o({},t))},p=function(t){return Object(i["a"])({url:"/open/userMusic/page",baseURL:"/api-student",method:"post",data:t})},l=function(t){return Object(i["a"])({url:"/userMusicStar/star",baseURL:"/api-student",hideLoading:!0,method:"post",data:t})},u=function(t){return Object(i["a"])({method:"post",url:"/userMusic/save",data:t})},f=function(t){return Object(i["a"])({method:"post",baseURL:"/api-student",url:"/userMusic/remove",requestType:"form",data:t})}},2652:function(t,e,n){},2731:function(t,e,n){"use strict";n("2652")},"7e79":function(t,e,n){!function(e,n){t.exports=n()}(self,()=>(()=>{"use strict";var t={750:(t,e,n)=>{n.d(e,{A:()=>u});var i=n(354),r=n.n(i),o=n(314),s=n.n(o),a=n(417),c=n.n(a),h=new URL(n(107),n.b),p=s()(r()),l=c()(h);p.push([t.id,`\n.vue-cropper[data-v-01ee97ad] {\n position: relative;\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n user-select: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n direction: ltr;\n touch-action: none;\n text-align: left;\n background-image: url(${l});\n}\n.cropper-box[data-v-01ee97ad],\n.cropper-box-canvas[data-v-01ee97ad],\n.cropper-drag-box[data-v-01ee97ad],\n.cropper-crop-box[data-v-01ee97ad],\n.cropper-face[data-v-01ee97ad] {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n user-select: none;\n}\n.cropper-box-canvas img[data-v-01ee97ad] {\n position: relative;\n text-align: left;\n user-select: none;\n transform: none;\n max-width: none;\n max-height: none;\n}\n.cropper-box[data-v-01ee97ad] {\n overflow: hidden;\n}\n.cropper-move[data-v-01ee97ad] {\n cursor: move;\n}\n.cropper-crop[data-v-01ee97ad] {\n cursor: crosshair;\n}\n.cropper-modal[data-v-01ee97ad] {\n background: rgba(0, 0, 0, 0.5);\n}\n.cropper-crop-box[data-v-01ee97ad] {\n /*border: 2px solid #39f;*/\n}\n.cropper-view-box[data-v-01ee97ad] {\n display: block;\n overflow: hidden;\n width: 100%;\n height: 100%;\n outline: 1px solid #39f;\n outline-color: rgba(51, 153, 255, 0.75);\n user-select: none;\n}\n.cropper-view-box img[data-v-01ee97ad] {\n user-select: none;\n text-align: left;\n max-width: none;\n max-height: none;\n}\n.cropper-face[data-v-01ee97ad] {\n top: 0;\n left: 0;\n background-color: #fff;\n opacity: 0.1;\n}\n.crop-info[data-v-01ee97ad] {\n position: absolute;\n left: 0px;\n min-width: 65px;\n text-align: center;\n color: white;\n line-height: 20px;\n background-color: rgba(0, 0, 0, 0.8);\n font-size: 12px;\n}\n.crop-line[data-v-01ee97ad] {\n position: absolute;\n display: block;\n width: 100%;\n height: 100%;\n opacity: 0.1;\n}\n.line-w[data-v-01ee97ad] {\n top: -3px;\n left: 0;\n height: 5px;\n cursor: n-resize;\n}\n.line-a[data-v-01ee97ad] {\n top: 0;\n left: -3px;\n width: 5px;\n cursor: w-resize;\n}\n.line-s[data-v-01ee97ad] {\n bottom: -3px;\n left: 0;\n height: 5px;\n cursor: s-resize;\n}\n.line-d[data-v-01ee97ad] {\n top: 0;\n right: -3px;\n width: 5px;\n cursor: e-resize;\n}\n.crop-point[data-v-01ee97ad] {\n position: absolute;\n width: 8px;\n height: 8px;\n opacity: 0.75;\n background-color: #39f;\n border-radius: 100%;\n}\n.point1[data-v-01ee97ad] {\n top: -4px;\n left: -4px;\n cursor: nw-resize;\n}\n.point2[data-v-01ee97ad] {\n top: -5px;\n left: 50%;\n margin-left: -3px;\n cursor: n-resize;\n}\n.point3[data-v-01ee97ad] {\n top: -4px;\n right: -4px;\n cursor: ne-resize;\n}\n.point4[data-v-01ee97ad] {\n top: 50%;\n left: -4px;\n margin-top: -3px;\n cursor: w-resize;\n}\n.point5[data-v-01ee97ad] {\n top: 50%;\n right: -4px;\n margin-top: -3px;\n cursor: e-resize;\n}\n.point6[data-v-01ee97ad] {\n bottom: -5px;\n left: -4px;\n cursor: sw-resize;\n}\n.point7[data-v-01ee97ad] {\n bottom: -5px;\n left: 50%;\n margin-left: -3px;\n cursor: s-resize;\n}\n.point8[data-v-01ee97ad] {\n bottom: -5px;\n right: -4px;\n cursor: se-resize;\n}\n@media screen and (max-width: 500px) {\n.crop-point[data-v-01ee97ad] {\n position: absolute;\n width: 20px;\n height: 20px;\n opacity: 0.45;\n background-color: #39f;\n border-radius: 100%;\n}\n.point1[data-v-01ee97ad] {\n top: -10px;\n left: -10px;\n}\n.point2[data-v-01ee97ad],\n .point4[data-v-01ee97ad],\n .point5[data-v-01ee97ad],\n .point7[data-v-01ee97ad] {\n display: none;\n}\n.point3[data-v-01ee97ad] {\n top: -10px;\n right: -10px;\n}\n.point4[data-v-01ee97ad] {\n top: 0;\n left: 0;\n}\n.point6[data-v-01ee97ad] {\n bottom: -10px;\n left: -10px;\n}\n.point8[data-v-01ee97ad] {\n bottom: -10px;\n right: -10px;\n}\n}\n`,"",{version:3,sources:["webpack://./src/vue-cropper.vue"],names:[],mappings:";AA6+DA;EACA,kBAAA;EACA,WAAA;EACA,YAAA;EACA,sBAAA;EACA,iBAAA;EACA,yBAAA;EACA,sBAAA;EACA,qBAAA;EACA,cAAA;EACA,kBAAA;EACA,gBAAA;EACA,yDAAA;AACA;AAEA;;;;;EAKA,kBAAA;EACA,MAAA;EACA,QAAA;EACA,SAAA;EACA,OAAA;EACA,iBAAA;AACA;AAEA;EACA,kBAAA;EACA,gBAAA;EACA,iBAAA;EACA,eAAA;EACA,eAAA;EACA,gBAAA;AACA;AAEA;EACA,gBAAA;AACA;AAEA;EACA,YAAA;AACA;AAEA;EACA,iBAAA;AACA;AAEA;EACA,8BAAA;AACA;AAEA;EACA,0BAAA;AACA;AAEA;EACA,cAAA;EACA,gBAAA;EACA,WAAA;EACA,YAAA;EACA,uBAAA;EACA,uCAAA;EACA,iBAAA;AACA;AAEA;EACA,iBAAA;EACA,gBAAA;EACA,eAAA;EACA,gBAAA;AACA;AAEA;EACA,MAAA;EACA,OAAA;EACA,sBAAA;EACA,YAAA;AACA;AAEA;EACA,kBAAA;EACA,SAAA;EACA,eAAA;EACA,kBAAA;EACA,YAAA;EACA,iBAAA;EACA,oCAAA;EACA,eAAA;AACA;AAEA;EACA,kBAAA;EACA,cAAA;EACA,WAAA;EACA,YAAA;EACA,YAAA;AACA;AAEA;EACA,SAAA;EACA,OAAA;EACA,WAAA;EACA,gBAAA;AACA;AAEA;EACA,MAAA;EACA,UAAA;EACA,UAAA;EACA,gBAAA;AACA;AAEA;EACA,YAAA;EACA,OAAA;EACA,WAAA;EACA,gBAAA;AACA;AAEA;EACA,MAAA;EACA,WAAA;EACA,UAAA;EACA,gBAAA;AACA;AAEA;EACA,kBAAA;EACA,UAAA;EACA,WAAA;EACA,aAAA;EACA,sBAAA;EACA,mBAAA;AACA;AAEA;EACA,SAAA;EACA,UAAA;EACA,iBAAA;AACA;AAEA;EACA,SAAA;EACA,SAAA;EACA,iBAAA;EACA,gBAAA;AACA;AAEA;EACA,SAAA;EACA,WAAA;EACA,iBAAA;AACA;AAEA;EACA,QAAA;EACA,UAAA;EACA,gBAAA;EACA,gBAAA;AACA;AAEA;EACA,QAAA;EACA,WAAA;EACA,gBAAA;EACA,gBAAA;AACA;AAEA;EACA,YAAA;EACA,UAAA;EACA,iBAAA;AACA;AAEA;EACA,YAAA;EACA,SAAA;EACA,iBAAA;EACA,gBAAA;AACA;AAEA;EACA,YAAA;EACA,WAAA;EACA,iBAAA;AACA;AAEA;AACA;IACA,kBAAA;IACA,WAAA;IACA,YAAA;IACA,aAAA;IACA,sBAAA;IACA,mBAAA;AACA;AAEA;IACA,UAAA;IACA,WAAA;AACA;AAEA;;;;IAIA,aAAA;AACA;AAEA;IACA,UAAA;IACA,YAAA;AACA;AAEA;IACA,MAAA;IACA,OAAA;AACA;AAEA;IACA,aAAA;IACA,WAAA;AACA;AAEA;IACA,aAAA;IACA,YAAA;AACA;AACA",sourcesContent:['<template>\n <div class="vue-cropper" ref="cropper" @mouseover="scaleImg" @mouseout="cancelScale">\n <div class="cropper-box" v-if="imgs">\n <div\n class="cropper-box-canvas"\n v-show="!loading"\n :style="{\n\t\t\t\t\t\'width\': trueWidth + \'px\',\n\t\t\t\t\t\'height\': trueHeight + \'px\',\n\t\t\t\t\t\'transform\': \'scale(\' + scale + \',\' + scale + \') \' + \'translate3d(\'+ x / scale + \'px,\' + y / scale + \'px,\' + \'0)\'\n\t\t\t\t\t+ \'rotateZ(\'+ rotate * 90 +\'deg)\'\n\t\t\t\t\t}"\n >\n <img :src="imgs" alt="cropper-img" ref="cropperImg">\n </div>\n </div>\n <div\n class="cropper-drag-box"\n :class="{\'cropper-move\': move && !crop, \'cropper-crop\': crop, \'cropper-modal\': cropping}"\n @mousedown="startMove"\n @touchstart="startMove"\n ></div>\n <div\n v-show="cropping"\n class="cropper-crop-box"\n :style="{\n\t\t\t\t\t\'width\': cropW + \'px\',\n\t\t\t\t\t\'height\': cropH + \'px\',\n\t\t\t\t\t\'transform\': \'translate3d(\'+ cropOffsertX + \'px,\' + cropOffsertY + \'px,\' + \'0)\'\n\t\t\t\t}"\n >\n <span class="cropper-view-box">\n <img\n :style="{\n\t\t\t\t\t\t\'width\': trueWidth + \'px\',\n\t\t\t\t\t\t\'height\': trueHeight + \'px\',\n\t\t\t\t\t\t\'transform\': \'scale(\' + scale + \',\' + scale + \') \' + \'translate3d(\'+ (x - cropOffsertX) / scale + \'px,\' + (y - cropOffsertY) / scale + \'px,\' + \'0)\'\n\t\t\t\t\t\t+ \'rotateZ(\'+ rotate * 90 +\'deg)\'\n\t\t\t\t\t\t}"\n :src="imgs"\n alt="cropper-img"\n >\n </span>\n <span class="cropper-face cropper-move" @mousedown="cropMove" @touchstart="cropMove"></span>\n <span\n class="crop-info"\n v-if="info"\n :style="{\'top\': cropInfo.top}"\n >{{ cropInfo.width }} × {{ cropInfo.height }}</span>\n <span v-if="!fixedBox">\n <span\n class="crop-line line-w"\n @mousedown="changeCropSize($event, false, true, 0, 1)"\n @touchstart="changeCropSize($event, false, true, 0, 1)"\n ></span>\n <span\n class="crop-line line-a"\n @mousedown="changeCropSize($event, true, false, 1, 0)"\n @touchstart="changeCropSize($event, true, false, 1, 0)"\n ></span>\n <span\n class="crop-line line-s"\n @mousedown="changeCropSize($event, false, true, 0, 2)"\n @touchstart="changeCropSize($event, false, true, 0, 2)"\n ></span>\n <span\n class="crop-line line-d"\n @mousedown="changeCropSize($event, true, false, 2, 0)"\n @touchstart="changeCropSize($event, true, false, 2, 0)"\n ></span>\n <span\n class="crop-point point1"\n @mousedown="changeCropSize($event, true, true, 1, 1)"\n @touchstart="changeCropSize($event, true, true, 1, 1)"\n ></span>\n <span\n class="crop-point point2"\n @mousedown="changeCropSize($event, false, true, 0, 1)"\n @touchstart="changeCropSize($event, false, true, 0, 1)"\n ></span>\n <span\n class="crop-point point3"\n @mousedown="changeCropSize($event, true, true, 2, 1)"\n @touchstart="changeCropSize($event, true, true, 2, 1)"\n ></span>\n <span\n class="crop-point point4"\n @mousedown="changeCropSize($event, true, false, 1, 0)"\n @touchstart="changeCropSize($event, true, false, 1, 0)"\n ></span>\n <span\n class="crop-point point5"\n @mousedown="changeCropSize($event, true, false, 2, 0)"\n @touchstart="changeCropSize($event, true, false, 2, 0)"\n ></span>\n <span\n class="crop-point point6"\n @mousedown="changeCropSize($event, true, true, 1, 2)"\n @touchstart="changeCropSize($event, true, true, 1, 2)"\n ></span>\n <span\n class="crop-point point7"\n @mousedown="changeCropSize($event, false, true, 0, 2)"\n @touchstart="changeCropSize($event, false, true, 0, 2)"\n ></span>\n <span\n class="crop-point point8"\n @mousedown="changeCropSize($event, true, true, 2, 2)"\n @touchstart="changeCropSize($event, true, true, 2, 2)"\n ></span>\n </span>\n </div>\n </div>\n</template>\n\n<script>\nimport exifmin from "./exif-js-min";\n\nexport default {\n data: function() {\n return {\n // 容器高宽\n w: 0,\n h: 0,\n // 图片缩放比例\n scale: 1,\n // 图片偏移x轴\n x: 0,\n // 图片偏移y轴\n y: 0,\n // 图片加载\n loading: true,\n // 图片真实宽度\n trueWidth: 0,\n // 图片真实高度\n trueHeight: 0,\n move: true,\n // 移动的x\n moveX: 0,\n // 移动的y\n moveY: 0,\n // 开启截图\n crop: false,\n // 正在截图\n cropping: false,\n // 裁剪框大小\n cropW: 0,\n cropH: 0,\n cropOldW: 0,\n cropOldH: 0,\n // 判断是否能够改变\n canChangeX: false,\n canChangeY: false,\n // 改变的基准点\n changeCropTypeX: 1,\n changeCropTypeY: 1,\n // 裁剪框的坐标轴\n cropX: 0,\n cropY: 0,\n cropChangeX: 0,\n cropChangeY: 0,\n cropOffsertX: 0,\n cropOffsertY: 0,\n // 支持的滚动事件\n support: "",\n // 移动端手指缩放\n touches: [],\n touchNow: false,\n // 图片旋转\n rotate: 0,\n isIos: false,\n orientation: 0,\n imgs: "",\n // 图片缩放系数\n coe: 0.2,\n // 是否正在多次缩放\n scaling: false,\n scalingSet: "",\n coeStatus: "",\n // 控制emit触发频率\n isCanShow: true,\n // 图片是否等于截图大小\n imgIsQqualCrop: false\n };\n },\n props: {\n img: {\n type: [String, Blob, null, File],\n default: ""\n },\n // 输出图片压缩比\n outputSize: {\n type: Number,\n default: 1\n },\n outputType: {\n type: String,\n default: "jpeg"\n },\n info: {\n type: Boolean,\n default: true\n },\n // 是否开启滚轮放大缩小\n canScale: {\n type: Boolean,\n default: true\n },\n // 是否自成截图框\n autoCrop: {\n type: Boolean,\n default: false\n },\n autoCropWidth: {\n type: [Number, String],\n default: 0\n },\n autoCropHeight: {\n type: [Number, String],\n default: 0\n },\n // 是否开启固定宽高比\n fixed: {\n type: Boolean,\n default: false\n },\n // 宽高比 w/h\n fixedNumber: {\n type: Array,\n default: () => {\n return [1, 1];\n }\n },\n // 固定大小 禁止改变截图框大小\n fixedBox: {\n type: Boolean,\n default: false\n },\n // 输出截图是否缩放\n full: {\n type: Boolean,\n default: false\n },\n // 是否可以拖动图片\n canMove: {\n type: Boolean,\n default: true\n },\n // 是否可以拖动截图框\n canMoveBox: {\n type: Boolean,\n default: true\n },\n // 上传图片按照原始比例显示\n original: {\n type: Boolean,\n default: false\n },\n // 截图框能否超过图片\n centerBox: {\n type: Boolean,\n default: false\n },\n // 是否根据dpr输出高清图片\n high: {\n type: Boolean,\n default: true\n },\n // 截图框展示宽高类型\n infoTrue: {\n type: Boolean,\n default: false\n },\n // 可以压缩图片宽高 默认不超过200\n maxImgSize: {\n type: [Number, String],\n default: 2000\n },\n // 倍数 可渲染当前截图框的n倍 0 - 1000;\n enlarge: {\n type: [Number, String],\n default: 1\n },\n\n // 自动预览的固定宽度\n preW: {\n type: [Number, String],\n default: 0\n },\n /*\n 图片布局方式 mode 实现和css背景一样的效果\n contain 居中布局 默认不会缩放 保证图片在容器里面 mode: \'contain\'\n cover 拉伸布局 填充整个容器 mode: \'cover\'\n 如果仅有一个数值被给定，这个数值将作为宽度值大小，高度值将被设定为auto。 mode: \'50px\'\n 如果有两个数值被给定，第一个将作为宽度值大小，第二个作为高度值大小。 mode: \'50px 60px\'\n */\n mode: {\n type: String,\n default: "contain"\n },\n //限制最小区域,可传1以上的数字和字符串，限制长宽都是这么大\n // 也可以传数组[90,90] \n limitMinSize: {\n type: [Number, Array, String],\n default: () => {\n return 10;\n },\n validator: function (value) {\n if (Array.isArray(value)) {\n return Number(value[0]) >= 0 && Number(value[1]) >= 0;\n } else {\n return Number(value) >= 0;\n }\n },\n },\n // 导出时,填充背景颜色\n fillColor: {\n type: String,\n default: "",\n },\n },\n computed: {\n cropInfo() {\n let obj = {};\n obj.top = this.cropOffsertY > 21 ? "-21px" : "0px";\n obj.width = this.cropW > 0 ? this.cropW : 0;\n obj.height = this.cropH > 0 ? this.cropH : 0;\n if (this.infoTrue) {\n let dpr = 1;\n if (this.high && !this.full) {\n dpr = window.devicePixelRatio;\n }\n if ((this.enlarge !== 1) & !this.full) {\n dpr = Math.abs(Number(this.enlarge));\n }\n obj.width = obj.width * dpr;\n obj.height = obj.height * dpr;\n if (this.full) {\n obj.width = obj.width / this.scale;\n obj.height = obj.height / this.scale;\n }\n }\n obj.width = obj.width.toFixed(0);\n obj.height = obj.height.toFixed(0);\n return obj;\n },\n\n isIE() {\n var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串\n const isIE = !!window.ActiveXObject || \'ActiveXObject\' in window; //判断是否IE浏览器\n return isIE;\n },\n\n passive () {\n return this.isIE ? null : {\n passive: false\n }\n }\n },\n watch: {\n // 如果图片改变， 重新布局\n img() {\n // 当传入图片时, 读取图片信息同时展示\n this.checkedImg();\n },\n imgs(val) {\n if (val === "") {\n return;\n }\n this.reload();\n },\n cropW() {\n this.showPreview();\n },\n cropH() {\n this.showPreview();\n },\n cropOffsertX() {\n this.showPreview();\n },\n cropOffsertY() {\n this.showPreview();\n },\n scale(val, oldVal) {\n this.showPreview();\n },\n x() {\n this.showPreview();\n },\n y() {\n this.showPreview();\n },\n autoCrop(val) {\n if (val) {\n this.goAutoCrop();\n }\n },\n // 修改了自动截图框\n autoCropWidth() {\n if (this.autoCrop) {\n this.goAutoCrop();\n }\n },\n autoCropHeight() {\n if (this.autoCrop) {\n this.goAutoCrop();\n }\n },\n mode() {\n this.checkedImg();\n },\n rotate() {\n this.showPreview();\n if (this.autoCrop) {\n this.goAutoCrop(this.cropW, this.cropH);\n } else {\n if (this.cropW > 0 || this.cropH > 0) {\n this.goAutoCrop(this.cropW, this.cropH);\n }\n }\n }\n },\n methods: {\n getVersion (name) {\n var arr = navigator.userAgent.split(\' \'); \n var chromeVersion = \'\';\n let result = 0;\n const reg = new RegExp(name, \'i\')\n for(var i=0;i < arr.length;i++){\n if(reg.test(arr[i]))\n chromeVersion = arr[i]\n }\n if(chromeVersion){\n result = chromeVersion.split(\'/\')[1].split(\'.\');\n } else {\n result = [\'0\', \'0\', \'0\'];\n }\n return result\n },\n checkOrientationImage(img, orientation, width, height) {\n // 如果是 chrome内核版本在81 safari 在 605 以上不处理图片旋转\n // alert(navigator.userAgent)\n if (this.getVersion(\'chrome\')[0] >= 81) {\n orientation = -1\n } else {\n if (this.getVersion(\'safari\')[0] >= 605 ) {\n const safariVersion = this.getVersion(\'version\')\n if (safariVersion[0] > 13 && safariVersion[1] > 1) {\n orientation = -1\n }\n } else {\n // 判断 ios 版本进行处理\n // 针对 ios 版本大于 13.4的系统不做图片旋转\n const isIos = navigator.userAgent.toLowerCase().match(/cpu iphone os (.*?) like mac os/)\n if (isIos) {\n let version = isIos[1]\n version = version.split(\'_\')\n if (version[0] > 13 || (version[0] >= 13 && version[1] >= 4)) {\n orientation = -1\n }\n }\n }\n }\n \n // alert(`当前处理的orientation${orientation}`)\n let canvas = document.createElement("canvas");\n let ctx = canvas.getContext("2d");\n ctx.save();\n \n switch (orientation) {\n case 2:\n canvas.width = width;\n canvas.height = height;\n // horizontal flip\n ctx.translate(width, 0);\n ctx.scale(-1, 1);\n break;\n case 3:\n canvas.width = width;\n canvas.height = height;\n //180 graus\n ctx.translate(width / 2, height / 2);\n ctx.rotate((180 * Math.PI) / 180);\n ctx.translate(-width / 2, -height / 2);\n break;\n case 4:\n canvas.width = width;\n canvas.height = height;\n // vertical flip\n ctx.translate(0, height);\n ctx.scale(1, -1);\n break;\n case 5:\n // vertical flip + 90 rotate right\n canvas.height = width;\n canvas.width = height;\n ctx.rotate(0.5 * Math.PI);\n ctx.scale(1, -1);\n break;\n case 6:\n canvas.width = height;\n canvas.height = width;\n //90 graus\n ctx.translate(height / 2, width / 2);\n ctx.rotate((90 * Math.PI) / 180);\n ctx.translate(-width / 2, -height / 2);\n break;\n case 7:\n // horizontal flip + 90 rotate right\n canvas.height = width;\n canvas.width = height;\n ctx.rotate(0.5 * Math.PI);\n ctx.translate(width, -height);\n ctx.scale(-1, 1);\n break;\n case 8:\n canvas.height = width;\n canvas.width = height;\n //-90 graus\n ctx.translate(height / 2, width / 2);\n ctx.rotate((-90 * Math.PI) / 180);\n ctx.translate(-width / 2, -height / 2);\n break;\n default:\n canvas.width = width;\n canvas.height = height;\n }\n\n ctx.drawImage(img, 0, 0, width, height);\n ctx.restore();\n canvas.toBlob(\n blob => {\n let data = URL.createObjectURL(blob);\n URL.revokeObjectURL(this.imgs)\n this.imgs = data;\n },\n "image/" + this.outputType,\n 1\n );\n },\n\n // checkout img\n checkedImg() {\n if (this.img === null || this.img === \'\') {\n this.imgs = \'\'\n this.clearCrop()\n return\n }\n this.loading = true;\n this.scale = 1;\n this.rotate = 0;\n this.clearCrop();\n let img = new Image();\n img.onload = () => {\n if (this.img === "") {\n this.$emit("imgLoad", "error");\n this.$emit("img-load", "error");\n this.$emit("img-load", new Error(\'图片不能为空\'));\n return false;\n }\n\n let width = img.width;\n let height = img.height;\n exifmin.getData(img).then(data => {\n this.orientation = data.orientation || 1;\n let max = Number(this.maxImgSize);\n if (!this.orientation && (width < max) & (height < max)) {\n this.imgs = this.img;\n return;\n }\n\n if (width > max) {\n height = (height / width) * max;\n width = max;\n }\n\n if (height > max) {\n width = (width / height) * max;\n height = max;\n }\n this.checkOrientationImage(img, this.orientation, width, height);\n }).catch(error => {\n this.$emit("img-load", "error");\n this.$emit("img-load-error", error);\n });\n };\n\n img.onerror = () => {\n this.$emit("imgLoad", "error");\n this.$emit("img-load", "error");\n this.$emit("img-load-error", error);\n };\n\n // 判断如果不是base64图片 再添加crossOrigin属性，否则会导致iOS低版本(10.2)无法显示图片\n if (this.img.substr(0, 4) !== "data") {\n img.crossOrigin = "";\n }\n\n if (this.isIE) {\n var xhr = new XMLHttpRequest();\n xhr.onload = function() {\n var url = URL.createObjectURL(this.response);\n img.src = url;\n };\n xhr.open("GET", this.img, true);\n xhr.responseType = "blob";\n xhr.send();\n } else {\n img.src = this.img;\n }\n },\n // 当按下鼠标键\n startMove(e) {\n e.preventDefault();\n // 如果move 为true 表示当前可以拖动\n if (this.move && !this.crop) {\n if (!this.canMove) {\n return false;\n }\n // 开始移动\n this.moveX = (\'clientX\' in e ? e.clientX : e.touches[0].clientX) - this.x;\n this.moveY = (\'clientY\' in e ? e.clientY : e.touches[0].clientY) - this.y;\n if (e.touches) {\n window.addEventListener("touchmove", this.moveImg);\n window.addEventListener("touchend", this.leaveImg);\n if (e.touches.length == 2) {\n // 记录手指刚刚放上去\n this.touches = e.touches;\n window.addEventListener("touchmove", this.touchScale);\n window.addEventListener("touchend", this.cancelTouchScale);\n }\n } else {\n window.addEventListener("mousemove", this.moveImg);\n window.addEventListener("mouseup", this.leaveImg);\n }\n // 触发图片移动事件\n this.$emit("imgMoving", {\n moving: true,\n axis: this.getImgAxis()\n });\n this.$emit("img-moving", {\n moving: true,\n axis: this.getImgAxis()\n });\n } else {\n // 截图ing\n this.cropping = true;\n // 绑定截图事件\n window.addEventListener("mousemove", this.createCrop);\n window.addEventListener("mouseup", this.endCrop);\n window.addEventListener("touchmove", this.createCrop);\n window.addEventListener("touchend", this.endCrop);\n this.cropOffsertX = e.offsetX\n ? e.offsetX\n : e.touches[0].pageX - this.$refs.cropper.offsetLeft;\n this.cropOffsertY = e.offsetY\n ? e.offsetY\n : e.touches[0].pageY - this.$refs.cropper.offsetTop;\n this.cropX = \'clientX\' in e ? e.clientX : e.touches[0].clientX;\n this.cropY = \'clientY\' in e ? e.clientY : e.touches[0].clientY;\n this.cropChangeX = this.cropOffsertX;\n this.cropChangeY = this.cropOffsertY;\n this.cropW = 0;\n this.cropH = 0;\n }\n },\n\n // 移动端缩放\n touchScale(e) {\n e.preventDefault();\n let scale = this.scale;\n // 记录变化量\n // 第一根手指\n var oldTouch1 = {\n x: this.touches[0].clientX,\n y: this.touches[0].clientY\n };\n var newTouch1 = {\n x: e.touches[0].clientX,\n y: e.touches[0].clientY\n };\n // 第二根手指\n var oldTouch2 = {\n x: this.touches[1].clientX,\n y: this.touches[1].clientY\n };\n var newTouch2 = {\n x: e.touches[1].clientX,\n y: e.touches[1].clientY\n };\n var oldL = Math.sqrt(\n Math.pow(oldTouch1.x - oldTouch2.x, 2) +\n Math.pow(oldTouch1.y - oldTouch2.y, 2)\n );\n var newL = Math.sqrt(\n Math.pow(newTouch1.x - newTouch2.x, 2) +\n Math.pow(newTouch1.y - newTouch2.y, 2)\n );\n var cha = newL - oldL;\n // 根据图片本身大小 决定每次改变大小的系数, 图片越大系数越小\n // 1px - 0.2\n var coe = 1;\n coe =\n coe / this.trueWidth > coe / this.trueHeight\n ? coe / this.trueHeight\n : coe / this.trueWidth;\n coe = coe > 0.1 ? 0.1 : coe;\n var num = coe * cha;\n if (!this.touchNow) {\n this.touchNow = true;\n if (cha > 0) {\n scale += Math.abs(num);\n } else if (cha < 0) {\n scale > Math.abs(num) ? (scale -= Math.abs(num)) : scale;\n }\n this.touches = e.touches;\n setTimeout(() => {\n this.touchNow = false;\n }, 8);\n if (!this.checkoutImgAxis(this.x, this.y, scale)) {\n return false;\n }\n this.scale = scale;\n }\n },\n\n cancelTouchScale(e) {\n window.removeEventListener("touchmove", this.touchScale);\n },\n\n // 移动图片\n moveImg(e) {\n e.preventDefault();\n if (e.touches && e.touches.length === 2) {\n this.touches = e.touches;\n window.addEventListener("touchmove", this.touchScale);\n window.addEventListener("touchend", this.cancelTouchScale);\n window.removeEventListener("touchmove", this.moveImg);\n return false;\n }\n let nowX = \'clientX\' in e ? e.clientX : e.touches[0].clientX;\n let nowY = \'clientY\' in e ? e.clientY : e.touches[0].clientY;\n\n let changeX, changeY;\n changeX = nowX - this.moveX;\n changeY = nowY - this.moveY;\n\n this.$nextTick(() => {\n if (this.centerBox) {\n let axis = this.getImgAxis(changeX, changeY, this.scale);\n let cropAxis = this.getCropAxis();\n let imgW = this.trueHeight * this.scale;\n let imgH = this.trueWidth * this.scale;\n let maxLeft, maxTop, maxRight, maxBottom;\n switch (this.rotate) {\n case 1:\n case -1:\n case 3:\n case -3:\n maxLeft =\n this.cropOffsertX -\n (this.trueWidth * (1 - this.scale)) / 2 +\n (imgW - imgH) / 2;\n maxTop =\n this.cropOffsertY -\n (this.trueHeight * (1 - this.scale)) / 2 +\n (imgH - imgW) / 2;\n maxRight = maxLeft - imgW + this.cropW;\n maxBottom = maxTop - imgH + this.cropH;\n break;\n default:\n maxLeft =\n this.cropOffsertX - (this.trueWidth * (1 - this.scale)) / 2;\n maxTop =\n this.cropOffsertY - (this.trueHeight * (1 - this.scale)) / 2;\n maxRight = maxLeft - imgH + this.cropW;\n maxBottom = maxTop - imgW + this.cropH;\n break;\n }\n\n // 图片左边 图片不能超过截图框\n if (axis.x1 >= cropAxis.x1) {\n changeX = maxLeft;\n }\n\n // 图片上边 图片不能超过截图框\n if (axis.y1 >= cropAxis.y1) {\n changeY = maxTop;\n }\n\n // 图片右边\n if (axis.x2 <= cropAxis.x2) {\n changeX = maxRight;\n }\n\n // 图片下边\n if (axis.y2 <= cropAxis.y2) {\n changeY = maxBottom;\n }\n }\n this.x = changeX;\n this.y = changeY;\n // 触发图片移动事件\n this.$emit("imgMoving", {\n moving: true,\n axis: this.getImgAxis()\n });\n this.$emit("img-moving", {\n moving: true,\n axis: this.getImgAxis()\n });\n });\n },\n // 移动图片结束\n leaveImg(e) {\n window.removeEventListener("mousemove", this.moveImg);\n window.removeEventListener("touchmove", this.moveImg);\n window.removeEventListener("mouseup", this.leaveImg);\n window.removeEventListener("touchend", this.leaveImg);\n // 触发图片移动事件\n this.$emit("imgMoving", {\n moving: false,\n axis: this.getImgAxis()\n });\n this.$emit("img-moving", {\n moving: false,\n axis: this.getImgAxis()\n });\n },\n // 缩放图片\n scaleImg() {\n if (this.canScale) {\n window.addEventListener(this.support, this.changeSize, this.passive);\n }\n },\n // 移出框\n cancelScale() {\n if (this.canScale) {\n window.removeEventListener(this.support, this.changeSize);\n }\n },\n // 改变大小函数\n changeSize(e) {\n e.preventDefault();\n let scale = this.scale;\n var change = e.deltaY || e.wheelDelta;\n // 根据图片本身大小 决定每次改变大小的系数, 图片越大系数越小\n var isFirefox = navigator.userAgent.indexOf("Firefox");\n change = isFirefox > 0 ? change * 30 : change;\n // 修复ie的滚动缩放\n if (this.isIE) {\n change = -change;\n }\n // 1px - 0.2\n var coe = this.coe;\n coe =\n coe / this.trueWidth > coe / this.trueHeight\n ? coe / this.trueHeight\n : coe / this.trueWidth;\n var num = coe * change;\n num < 0\n ? (scale += Math.abs(num))\n : scale > Math.abs(num)\n ? (scale -= Math.abs(num))\n : scale;\n // 延迟0.1s 每次放大大或者缩小的范围\n let status = num < 0 ? "add" : "reduce";\n if (status !== this.coeStatus) {\n this.coeStatus = status;\n this.coe = 0.2;\n }\n if (!this.scaling) {\n this.scalingSet = setTimeout(() => {\n this.scaling = false;\n this.coe = this.coe += 0.01;\n }, 50);\n }\n this.scaling = true;\n if (!this.checkoutImgAxis(this.x, this.y, scale)) {\n return false;\n }\n this.scale = scale;\n },\n\n // 修改图片大小函数\n changeScale(num) {\n let scale = this.scale;\n num = num || 1;\n var coe = 20;\n coe =\n coe / this.trueWidth > coe / this.trueHeight\n ? coe / this.trueHeight\n : coe / this.trueWidth;\n num = num * coe;\n num > 0\n ? (scale += Math.abs(num))\n : scale > Math.abs(num)\n ? (scale -= Math.abs(num))\n : scale;\n if (!this.checkoutImgAxis(this.x, this.y, scale)) {\n return false;\n }\n this.scale = scale;\n },\n // 创建截图框\n createCrop(e) {\n e.preventDefault();\n // 移动生成大小\n var nowX = \'clientX\' in e ? e.clientX : e.touches ? e.touches[0].clientX : 0;\n var nowY = \'clientY\' in e ? e.clientY : e.touches ? e.touches[0].clientY : 0;\n this.$nextTick(() => {\n var fw = nowX - this.cropX;\n var fh = nowY - this.cropY;\n if (fw > 0) {\n this.cropW =\n fw + this.cropChangeX > this.w ? this.w - this.cropChangeX : fw;\n this.cropOffsertX = this.cropChangeX;\n } else {\n this.cropW =\n this.w - this.cropChangeX + Math.abs(fw) > this.w\n ? this.cropChangeX\n : Math.abs(fw);\n this.cropOffsertX =\n this.cropChangeX + fw > 0 ? this.cropChangeX + fw : 0;\n }\n\n if (!this.fixed) {\n if (fh > 0) {\n this.cropH =\n fh + this.cropChangeY > this.h ? this.h - this.cropChangeY : fh;\n this.cropOffsertY = this.cropChangeY;\n } else {\n this.cropH =\n this.h - this.cropChangeY + Math.abs(fh) > this.h\n ? this.cropChangeY\n : Math.abs(fh);\n this.cropOffsertY =\n this.cropChangeY + fh > 0 ? this.cropChangeY + fh : 0;\n }\n } else {\n var fixedHeight =\n (this.cropW / this.fixedNumber[0]) * this.fixedNumber[1];\n if (fixedHeight + this.cropOffsertY > this.h) {\n this.cropH = this.h - this.cropOffsertY;\n this.cropW =\n (this.cropH / this.fixedNumber[1]) * this.fixedNumber[0];\n if (fw > 0) {\n this.cropOffsertX = this.cropChangeX;\n } else {\n this.cropOffsertX = this.cropChangeX - this.cropW;\n }\n } else {\n this.cropH = fixedHeight;\n }\n this.cropOffsertY = this.cropOffsertY;\n }\n });\n },\n\n // 改变截图框大小\n changeCropSize(e, w, h, typeW, typeH) {\n e.preventDefault();\n window.addEventListener("mousemove", this.changeCropNow);\n window.addEventListener("mouseup", this.changeCropEnd);\n window.addEventListener("touchmove", this.changeCropNow);\n window.addEventListener("touchend", this.changeCropEnd);\n this.canChangeX = w;\n this.canChangeY = h;\n this.changeCropTypeX = typeW;\n this.changeCropTypeY = typeH;\n this.cropX = \'clientX\' in e ? e.clientX : e.touches[0].clientX;\n this.cropY = \'clientY\' in e ? e.clientY : e.touches[0].clientY;\n this.cropOldW = this.cropW;\n this.cropOldH = this.cropH;\n this.cropChangeX = this.cropOffsertX;\n this.cropChangeY = this.cropOffsertY;\n if (this.fixed) {\n if (this.canChangeX && this.canChangeY) {\n this.canChangeY = 0;\n }\n }\n this.$emit(\'changeCropSize\', {\n width: this.cropW,\n height: this.cropH\n })\n this.$emit(\'change-crop-size\', {\n width: this.cropW,\n height: this.cropH\n })\n },\n\n // 正在改变\n changeCropNow(e) {\n e.preventDefault();\n var nowX = \'clientX\' in e ? e.clientX : e.touches ? e.touches[0].clientX : 0;\n var nowY = \'clientY\' in e ? e.clientY : e.touches ? e.touches[0].clientY : 0;\n // 容器的宽高\n let wrapperW = this.w;\n let wrapperH = this.h;\n\n // 不能超过的坐标轴\n let minX = 0;\n let minY = 0;\n\n if (this.centerBox) {\n let axis = this.getImgAxis();\n let imgW = axis.x2;\n let imgH = axis.y2;\n minX = axis.x1 > 0 ? axis.x1 : 0;\n minY = axis.y1 > 0 ? axis.y1 : 0;\n if (wrapperW > imgW) {\n wrapperW = imgW;\n }\n\n if (wrapperH > imgH) {\n wrapperH = imgH;\n }\n }\n const [minCropW,minCropH] = this.checkCropLimitSize()\n this.$nextTick(() => {\n var fw = nowX - this.cropX;\n var fh = nowY - this.cropY;\n if (this.canChangeX) {\n if (this.changeCropTypeX === 1) {\n if (this.cropOldW - fw < minCropW) {\n this.cropW = minCropW\n this.cropOffsertX = this.cropOldW + this.cropChangeX - minX - minCropW\n } else if (this.cropOldW - fw > 0) {\n this.cropW =\n wrapperW - this.cropChangeX - fw <= wrapperW - minX\n ? this.cropOldW - fw\n : this.cropOldW + this.cropChangeX - minX;\n this.cropOffsertX =\n wrapperW - this.cropChangeX - fw <= wrapperW - minX\n ? this.cropChangeX + fw\n : minX;\n } else {\n this.cropW =\n Math.abs(fw) + this.cropChangeX <= wrapperW\n ? Math.abs(fw) - this.cropOldW\n : wrapperW - this.cropOldW - this.cropChangeX;\n this.cropOffsertX = this.cropChangeX + this.cropOldW;\n }\n } else if (this.changeCropTypeX === 2) {\n if (this.cropOldW + fw < minCropW) {\n this.cropW = minCropW\n } else if (this.cropOldW + fw > 0) {\n this.cropW =\n this.cropOldW + fw + this.cropOffsertX <= wrapperW\n ? this.cropOldW + fw\n : wrapperW - this.cropOffsertX;\n this.cropOffsertX = this.cropChangeX;\n } else {\n // 右侧坐标抽 超过左侧\n this.cropW =\n wrapperW - this.cropChangeX + Math.abs(fw + this.cropOldW) <=\n wrapperW - minX\n ? Math.abs(fw + this.cropOldW)\n : this.cropChangeX - minX;\n this.cropOffsertX =\n wrapperW - this.cropChangeX + Math.abs(fw + this.cropOldW) <=\n wrapperW - minX\n ? this.cropChangeX - Math.abs(fw + this.cropOldW)\n : minX;\n }\n }\n }\n\n if (this.canChangeY) {\n if (this.changeCropTypeY === 1) {\n if (this.cropOldH - fh < minCropH) {\n this.cropH = minCropH\n this.cropOffsertY = this.cropOldH + this.cropChangeY - minY - minCropH\n } else if (this.cropOldH - fh > 0) {\n this.cropH =\n wrapperH - this.cropChangeY - fh <= wrapperH - minY\n ? this.cropOldH - fh\n : this.cropOldH + this.cropChangeY - minY;\n this.cropOffsertY =\n wrapperH - this.cropChangeY - fh <= wrapperH - minY\n ? this.cropChangeY + fh\n : minY;\n } else {\n this.cropH =\n Math.abs(fh) + this.cropChangeY <= wrapperH\n ? Math.abs(fh) - this.cropOldH\n : wrapperH - this.cropOldH - this.cropChangeY;\n this.cropOffsertY = this.cropChangeY + this.cropOldH;\n }\n } else if (this.changeCropTypeY === 2) {\n if (this.cropOldH + fh < minCropH) {\n this.cropH = minCropH\n } else if (this.cropOldH + fh > 0) {\n this.cropH =\n this.cropOldH + fh + this.cropOffsertY <= wrapperH\n ? this.cropOldH + fh\n : wrapperH - this.cropOffsertY;\n this.cropOffsertY = this.cropChangeY;\n } else {\n this.cropH =\n wrapperH - this.cropChangeY + Math.abs(fh + this.cropOldH) <=\n wrapperH - minY\n ? Math.abs(fh + this.cropOldH)\n : this.cropChangeY - minY;\n this.cropOffsertY =\n wrapperH - this.cropChangeY + Math.abs(fh + this.cropOldH) <=\n wrapperH - minY\n ? this.cropChangeY - Math.abs(fh + this.cropOldH)\n : minY;\n }\n }\n }\n\n if (this.canChangeX && this.fixed) {\n var fixedHeight =\n (this.cropW / this.fixedNumber[0]) * this.fixedNumber[1];\n if (fixedHeight < minCropH) {\n this.cropH = minCropH\n this.cropW = this.fixedNumber[0] * minCropH / this.fixedNumber[1]\n // 这里需要去修改 offsetX的值，去调整因为高度变化而导致的宽度变化\n if (this.changeCropTypeX === 1) {\n this.cropOffsertX = this.cropChangeX + (this.cropOldW - this.cropW)\n }\n } else if (fixedHeight + this.cropOffsertY > wrapperH) {\n this.cropH = wrapperH - this.cropOffsertY;\n this.cropW =\n (this.cropH / this.fixedNumber[1]) * this.fixedNumber[0];\n if (this.changeCropTypeX === 1) {\n this.cropOffsertX = this.cropChangeX + (this.cropOldW - this.cropW)\n }\n } else {\n this.cropH = fixedHeight;\n }\n }\n\n if (this.canChangeY && this.fixed) {\n var fixedWidth =\n (this.cropH / this.fixedNumber[1]) * this.fixedNumber[0];\n if (fixedWidth < minCropW) {\n this.cropW = minCropW\n this.cropH = this.fixedNumber[1] * minCropW / this.fixedNumber[0];\n } else if (fixedWidth + this.cropOffsertX > wrapperW) {\n this.cropW = wrapperW - this.cropOffsertX;\n this.cropH =\n (this.cropW / this.fixedNumber[0]) * this.fixedNumber[1];\n } else {\n this.cropW = fixedWidth;\n }\n }\n\t// 触发截图框改变大小事件\n\tthis.$emit(\'cropSizing\', {cropW: this.cropW, cropH: this.cropH})\n\tthis.$emit(\'crop-sizing\', {cropW: this.cropW, cropH: this.cropH})\n });\n },\n\n checkCropLimitSize () {\n let { cropW, cropH, limitMinSize } = this;\n\n let limitMinNum = new Array;\n if (!Array.isArray(limitMinSize)) {\n limitMinNum = [limitMinSize, limitMinSize]\n } else {\n limitMinNum = limitMinSize\n }\n \n //限制最小宽度和高度\n cropW = parseFloat(limitMinNum[0])\n cropH = parseFloat(limitMinNum[1])\n return [cropW, cropH]\n },\n // 结束改变\n changeCropEnd(e) {\n window.removeEventListener("mousemove", this.changeCropNow);\n window.removeEventListener("mouseup", this.changeCropEnd);\n window.removeEventListener("touchmove", this.changeCropNow);\n window.removeEventListener("touchend", this.changeCropEnd);\n },\n // 根据比例x/y，最小宽度，最小高度，现有宽度，现有高度，得到应该有的宽度和高度\n calculateSize(x, y, minX, minY, w, h) {\n const ratio = x / y;\n let width = w;\n let height = h;\n // 先根据最小宽度来计算高度\n if (width < minX) {\n width = minX;\n height = Math.ceil(width / ratio);\n }\n // 如果计算出来的高度小于最小高度，则根据最小高度来重新计算宽度和高度\n if (height < minY) {\n height = minY;\n width = Math.ceil(height * ratio);\n // 如果重新计算的宽度仍然小于最小宽度，则使用最小宽度，并重新计算高度\n if (width < minX) {\n width = minX;\n height = Math.ceil(width / ratio);\n }\n }\n // 如果计算出来的宽度或高度小于输入的宽度或高度，则分别使用输入的宽度或高度\n if (width < w) {\n width = w;\n height = Math.ceil(width / ratio);\n }\n if (height < h) {\n height = h;\n width = Math.ceil(height * ratio);\n }\n return { width, height };\n },\n // 创建完成\n endCrop() {\n if (this.cropW === 0 && this.cropH === 0) {\n this.cropping = false;\n }\n let [minCropW, minCropH] = this.checkCropLimitSize();\n const { width, height } = this.fixed ? this.calculateSize(\n this.fixedNumber[0],\n this.fixedNumber[1],\n minCropW,\n minCropH,\n this.cropW,\n this.cropH\n ) : { width: minCropW, height: minCropH }\n if (width > this.cropW) {\n this.cropW = width;\n if (this.cropOffsertX + width > this.w) {\n this.cropOffsertX = this.w - width;\n }\n }\n if (height > this.cropH) {\n this.cropH = height;\n if (this.cropOffsertY + height > this.h) {\n this.cropOffsertY = this.h - height;\n }\n }\n window.removeEventListener("mousemove", this.createCrop);\n window.removeEventListener("mouseup", this.endCrop);\n window.removeEventListener("touchmove", this.createCrop);\n window.removeEventListener("touchend", this.endCrop);\n },\n // 开始截图\n startCrop() {\n this.crop = true;\n },\n // 停止截图\n stopCrop() {\n this.crop = false;\n },\n // 清除截图\n clearCrop() {\n this.cropping = false;\n this.cropW = 0;\n this.cropH = 0;\n },\n // 截图移动\n cropMove(e) {\n e.preventDefault();\n if (!this.canMoveBox) {\n this.crop = false;\n this.startMove(e);\n return false;\n }\n\n if (e.touches && e.touches.length === 2) {\n this.crop = false;\n this.startMove(e);\n this.leaveCrop();\n return false;\n }\n window.addEventListener("mousemove", this.moveCrop);\n window.addEventListener("mouseup", this.leaveCrop);\n window.addEventListener("touchmove", this.moveCrop);\n window.addEventListener("touchend", this.leaveCrop);\n let x = \'clientX\' in e ? e.clientX : e.touches[0].clientX;\n let y = \'clientY\' in e ? e.clientY : e.touches[0].clientY;\n let newX, newY;\n newX = x - this.cropOffsertX;\n newY = y - this.cropOffsertY;\n this.cropX = newX;\n this.cropY = newY;\n // 触发截图框移动事件\n this.$emit("cropMoving", {\n moving: true,\n axis: this.getCropAxis()\n });\n this.$emit("crop-moving", {\n moving: true,\n axis: this.getCropAxis()\n });\n },\n\n moveCrop(e, isMove) {\n let nowX = 0;\n let nowY = 0;\n if (e) {\n e.preventDefault();\n nowX = \'clientX\' in e ? e.clientX : e.touches[0].clientX;\n nowY = \'clientY\' in e ? e.clientY : e.touches[0].clientY;\n }\n this.$nextTick(() => {\n let cx, cy;\n let fw = nowX - this.cropX;\n let fh = nowY - this.cropY;\n if (isMove) {\n fw = this.cropOffsertX;\n fh = this.cropOffsertY;\n }\n // 不能超过外层容器\n if (fw <= 0) {\n cx = 0;\n } else if (fw + this.cropW > this.w) {\n cx = this.w - this.cropW;\n } else {\n cx = fw;\n }\n\n if (fh <= 0) {\n cy = 0;\n } else if (fh + this.cropH > this.h) {\n cy = this.h - this.cropH;\n } else {\n cy = fh;\n }\n\n // 不能超过图片\n if (this.centerBox) {\n let axis = this.getImgAxis();\n // 横坐标判断\n if (cx <= axis.x1) {\n cx = axis.x1;\n }\n\n if (cx + this.cropW > axis.x2) {\n cx = axis.x2 - this.cropW;\n }\n\n // 纵坐标纵轴\n if (cy <= axis.y1) {\n cy = axis.y1;\n }\n\n if (cy + this.cropH > axis.y2) {\n cy = axis.y2 - this.cropH;\n }\n }\n\n this.cropOffsertX = cx;\n this.cropOffsertY = cy;\n\n // 触发截图框移动事件\n this.$emit("cropMoving", {\n moving: true,\n axis: this.getCropAxis()\n });\n this.$emit("crop-moving", {\n moving: true,\n axis: this.getCropAxis()\n });\n });\n },\n\n // 算出不同场景下面 图片相对于外层容器的坐标轴\n getImgAxis(x, y, scale) {\n x = x || this.x;\n y = y || this.y;\n scale = scale || this.scale;\n // 如果设置了截图框在图片内， 那么限制截图框不能超过图片的坐标\n // 图片的坐标\n let obj = {\n x1: 0,\n x2: 0,\n y1: 0,\n y2: 0\n };\n let imgW = this.trueWidth * scale;\n let imgH = this.trueHeight * scale;\n switch (this.rotate) {\n case 0:\n obj.x1 = x + (this.trueWidth * (1 - scale)) / 2;\n obj.x2 = obj.x1 + this.trueWidth * scale;\n obj.y1 = y + (this.trueHeight * (1 - scale)) / 2;\n obj.y2 = obj.y1 + this.trueHeight * scale;\n break;\n case 1:\n case -1:\n case 3:\n case -3:\n obj.x1 = x + (this.trueWidth * (1 - scale)) / 2 + (imgW - imgH) / 2;\n obj.x2 = obj.x1 + this.trueHeight * scale;\n obj.y1 = y + (this.trueHeight * (1 - scale)) / 2 + (imgH - imgW) / 2;\n obj.y2 = obj.y1 + this.trueWidth * scale;\n break;\n default:\n obj.x1 = x + (this.trueWidth * (1 - scale)) / 2;\n obj.x2 = obj.x1 + this.trueWidth * scale;\n obj.y1 = y + (this.trueHeight * (1 - scale)) / 2;\n obj.y2 = obj.y1 + this.trueHeight * scale;\n break;\n }\n return obj;\n },\n\n // 获取截图框的坐标轴\n getCropAxis() {\n let obj = {\n x1: 0,\n x2: 0,\n y1: 0,\n y2: 0\n };\n obj.x1 = this.cropOffsertX;\n obj.x2 = obj.x1 + this.cropW;\n obj.y1 = this.cropOffsertY;\n obj.y2 = obj.y1 + this.cropH;\n return obj;\n },\n\n leaveCrop(e) {\n window.removeEventListener("mousemove", this.moveCrop);\n window.removeEventListener("mouseup", this.leaveCrop);\n window.removeEventListener("touchmove", this.moveCrop);\n window.removeEventListener("touchend", this.leaveCrop);\n // 触发截图框移动事件\n this.$emit("cropMoving", {\n moving: false,\n axis: this.getCropAxis()\n });\n this.$emit("crop-moving", {\n moving: false,\n axis: this.getCropAxis()\n });\n },\n\n getCropChecked(cb) {\n let canvas = document.createElement("canvas");\n let ctx = canvas.getContext("2d");\n let img = new Image();\n let rotate = this.rotate;\n let trueWidth = this.trueWidth;\n let trueHeight = this.trueHeight;\n let cropOffsertX = this.cropOffsertX;\n let cropOffsertY = this.cropOffsertY;\n img.onload = () => {\n if (this.cropW !== 0) {\n let dpr = 1;\n if (this.high & !this.full) {\n dpr = window.devicePixelRatio;\n }\n if ((this.enlarge !== 1) & !this.full) {\n dpr = Math.abs(Number(this.enlarge));\n }\n let width = this.cropW * dpr;\n let height = this.cropH * dpr;\n let imgW = trueWidth * this.scale * dpr;\n let imgH = trueHeight * this.scale * dpr;\n // 图片x轴偏移\n let dx =\n (this.x - cropOffsertX + (this.trueWidth * (1 - this.scale)) / 2) *\n dpr;\n // 图片y轴偏移\n let dy =\n (this.y - cropOffsertY + (this.trueHeight * (1 - this.scale)) / 2) *\n dpr;\n //保存状态\n setCanvasSize(width, height);\n ctx.save();\n switch (rotate) {\n case 0:\n if (!this.full) {\n ctx.drawImage(img, dx, dy, imgW, imgH);\n } else {\n // 输出原图比例截图\n setCanvasSize(width / this.scale, height / this.scale);\n ctx.drawImage(\n img,\n dx / this.scale,\n dy / this.scale,\n imgW / this.scale,\n imgH / this.scale\n );\n }\n break;\n case 1:\n case -3:\n if (!this.full) {\n // 换算图片旋转后的坐标弥补\n dx = dx + (imgW - imgH) / 2;\n dy = dy + (imgH - imgW) / 2;\n ctx.rotate((rotate * 90 * Math.PI) / 180);\n ctx.drawImage(img, dy, -dx - imgH, imgW, imgH);\n } else {\n setCanvasSize(width / this.scale, height / this.scale);\n // 换算图片旋转后的坐标弥补\n dx =\n dx / this.scale + (imgW / this.scale - imgH / this.scale) / 2;\n dy =\n dy / this.scale + (imgH / this.scale - imgW / this.scale) / 2;\n ctx.rotate((rotate * 90 * Math.PI) / 180);\n ctx.drawImage(\n img,\n dy,\n -dx - imgH / this.scale,\n imgW / this.scale,\n imgH / this.scale\n );\n }\n break;\n case 2:\n case -2:\n if (!this.full) {\n ctx.rotate((rotate * 90 * Math.PI) / 180);\n ctx.drawImage(img, -dx - imgW, -dy - imgH, imgW, imgH);\n } else {\n setCanvasSize(width / this.scale, height / this.scale);\n ctx.rotate((rotate * 90 * Math.PI) / 180);\n dx = dx / this.scale;\n dy = dy / this.scale;\n ctx.drawImage(\n img,\n -dx - imgW / this.scale,\n -dy - imgH / this.scale,\n imgW / this.scale,\n imgH / this.scale\n );\n }\n break;\n case 3:\n case -1:\n if (!this.full) {\n // 换算图片旋转后的坐标弥补\n dx = dx + (imgW - imgH) / 2;\n dy = dy + (imgH - imgW) / 2;\n ctx.rotate((rotate * 90 * Math.PI) / 180);\n ctx.drawImage(img, -dy - imgW, dx, imgW, imgH);\n } else {\n setCanvasSize(width / this.scale, height / this.scale);\n // 换算图片旋转后的坐标弥补\n dx =\n dx / this.scale + (imgW / this.scale - imgH / this.scale) / 2;\n dy =\n dy / this.scale + (imgH / this.scale - imgW / this.scale) / 2;\n ctx.rotate((rotate * 90 * Math.PI) / 180);\n ctx.drawImage(\n img,\n -dy - imgW / this.scale,\n dx,\n imgW / this.scale,\n imgH / this.scale\n );\n }\n break;\n default:\n if (!this.full) {\n ctx.drawImage(img, dx, dy, imgW, imgH);\n } else {\n // 输出原图比例截图\n setCanvasSize(width / this.scale, height / this.scale);\n ctx.drawImage(\n img,\n dx / this.scale,\n dy / this.scale,\n imgW / this.scale,\n imgH / this.scale\n );\n }\n }\n ctx.restore();\n } else {\n let width = trueWidth * this.scale;\n let height = trueHeight * this.scale;\n ctx.save();\n switch (rotate) {\n case 0:\n setCanvasSize(width, height);\n ctx.drawImage(img, 0, 0, width, height);\n break;\n case 1:\n case -3:\n // 旋转90度 或者-270度 宽度和高度对调\n setCanvasSize(height, width);\n ctx.rotate((rotate * 90 * Math.PI) / 180);\n ctx.drawImage(img, 0, -height, width, height);\n break;\n case 2:\n case -2:\n setCanvasSize(width, height);\n ctx.rotate((rotate * 90 * Math.PI) / 180);\n ctx.drawImage(img, -width, -height, width, height);\n break;\n case 3:\n case -1:\n setCanvasSize(height, width);\n ctx.rotate((rotate * 90 * Math.PI) / 180);\n ctx.drawImage(img, -width, 0, width, height);\n break;\n default:\n setCanvasSize(width, height);\n ctx.drawImage(img, 0, 0, width, height);\n }\n ctx.restore();\n }\n cb(canvas);\n };\n // 判断图片是否是base64\n var s = this.img.substr(0, 4);\n if (s !== "data") {\n img.crossOrigin = "Anonymous";\n }\n img.src = this.imgs;\n const fillColor = this.fillColor;\n function setCanvasSize(width, height) {\n canvas.width = Math.round(width);\n canvas.height = Math.round(height);\n // 填充背景颜色\n if (fillColor) {\n ctx.fillStyle = fillColor;\n ctx.fillRect(0, 0, canvas.width, canvas.height);\n }\n }\n },\n\n // 获取转换成base64 的图片信息\n getCropData(cb) {\n this.getCropChecked(data => {\n cb(data.toDataURL("image/" + this.outputType, this.outputSize));\n });\n },\n\n //canvas获取为blob对象\n getCropBlob(cb) {\n this.getCropChecked(data => {\n data.toBlob(\n blob => cb(blob),\n "image/" + this.outputType,\n this.outputSize\n );\n });\n },\n\n // 自动预览函数\n showPreview() {\n // 优化不要多次触发\n if (this.isCanShow) {\n this.isCanShow = false;\n setTimeout(() => {\n this.isCanShow = true;\n }, 16);\n } else {\n return false;\n }\n let w = this.cropW;\n let h = this.cropH;\n let scale = this.scale;\n var obj = {};\n obj.div = {\n width: `${w}px`,\n height: `${h}px`\n };\n let transformX = (this.x - this.cropOffsertX) / scale;\n let transformY = (this.y - this.cropOffsertY) / scale;\n let transformZ = 0;\n obj.w = w;\n obj.h = h;\n obj.url = this.imgs;\n obj.img = {\n width: `${this.trueWidth}px`,\n height: `${this.trueHeight}px`,\n transform: `scale(${scale})translate3d(${transformX}px, ${transformY}px, ${transformZ}px)rotateZ(${this\n .rotate * 90}deg)`\n };\n obj.html = `\n <div class="show-preview" style="width: ${obj.w}px; height: ${\n obj.h\n }px; overflow: hidden">\n <div style="width: ${w}px; height: ${h}px">\n <img src=${obj.url} style="width: ${this.trueWidth}px; height: ${\n this.trueHeight\n }px; transform:\n scale(${scale})translate3d(${transformX}px, ${transformY}px, ${transformZ}px)rotateZ(${this\n .rotate * 90}deg)">\n </div>\n </div>`;\n this.$emit("realTime", obj);\n this.$emit("real-time", obj);\n },\n // reload 图片布局函数\n reload() {\n let img = new Image();\n img.onload = () => {\n // 读取图片的信息原始信息， 解析是否需要旋转\n // 读取图片的旋转信息\n // 得到外层容器的宽度高度\n this.w = parseFloat(window.getComputedStyle(this.$refs.cropper).width);\n this.h = parseFloat(window.getComputedStyle(this.$refs.cropper).height);\n\n // 存入图片真实高度\n this.trueWidth = img.width;\n this.trueHeight = img.height;\n\n // 判断是否需要压缩大图\n if (!this.original) {\n // 判断布局方式 mode\n this.scale = this.checkedMode();\n } else {\n this.scale = 1;\n }\n\n this.$nextTick(() => {\n this.x =\n -(this.trueWidth - this.trueWidth * this.scale) / 2 +\n (this.w - this.trueWidth * this.scale) / 2;\n this.y =\n -(this.trueHeight - this.trueHeight * this.scale) / 2 +\n (this.h - this.trueHeight * this.scale) / 2;\n this.loading = false;\n // // 获取是否开启了自动截图\n if (this.autoCrop) {\n this.goAutoCrop();\n }\n // 图片加载成功的回调\n this.$emit("img-load", "success");\n this.$emit("imgLoad", "success"); \n setTimeout(() => {\n this.showPreview();\n }, 20);\n });\n };\n img.onerror = () => {\n this.$emit("imgLoad", "error");\n this.$emit("img-load", "error");\n };\n img.src = this.imgs;\n },\n // 背景布局的函数\n checkedMode() {\n let scale = 1;\n // 通过字符串分割\n let imgW = this.trueWidth;\n let imgH = this.trueHeight;\n const arr = this.mode.split(" ");\n switch (arr[0]) {\n case "contain":\n if (this.trueWidth > this.w) {\n // 如果图片宽度大于容器宽度\n scale = this.w / this.trueWidth;\n }\n\n if (this.trueHeight * scale > this.h) {\n scale = this.h / this.trueHeight;\n }\n break;\n case "cover":\n // 扩展布局 默认填充满整个容器\n // 图片宽度大于容器\n imgW = this.w;\n scale = imgW / this.trueWidth;\n imgH = imgH * scale;\n // 如果扩展之后高度小于容器的外层高度 继续扩展高度\n if (imgH < this.h) {\n imgH = this.h;\n scale = imgH / this.trueHeight;\n }\n break;\n default:\n try {\n let str = arr[0];\n if (str.search("px") !== -1) {\n str = str.replace("px", "");\n imgW = parseFloat(str);\n const scaleX = imgW / this.trueWidth;\n let scaleY = 1;\n let strH = arr[1];\n if (strH.search("px") !== -1) {\n strH = strH.replace("px", "");\n imgH = parseFloat(strH);\n scaleY = imgH / this.trueHeight;\n }\n scale = Math.min(scaleX,scaleY)\n\n }\n if (str.search("%") !== -1) {\n str = str.replace("%", "");\n imgW = (parseFloat(str) / 100) * this.w;\n scale = imgW / this.trueWidth;\n }\n\n if (arr.length === 2 && str === "auto") {\n let str2 = arr[1];\n if (str2.search("px") !== -1) {\n str2 = str2.replace("px", "");\n imgH = parseFloat(str2);\n scale = imgH / this.trueHeight;\n }\n if (str2.search("%") !== -1) {\n str2 = str2.replace("%", "");\n imgH = (parseFloat(str2) / 100) * this.h;\n scale = imgH / this.trueHeight;\n }\n }\n } catch (error) {\n scale = 1;\n }\n }\n return scale;\n },\n // 自动截图函数\n goAutoCrop(cw, ch) {\n if (this.imgs === \'\' || this.imgs === null) return\n this.clearCrop();\n this.cropping = true;\n let maxWidth = this.w;\n let maxHeight = this.h;\n if (this.centerBox) {\n const switchWH = Math.abs(this.rotate) % 2 > 0\n let imgW = (switchWH ? this.trueHeight : this.trueWidth) * this.scale;\n let imgH = (switchWH ? this.trueWidth : this.trueHeight) * this.scale;\n maxWidth = imgW < maxWidth ? imgW : maxWidth;\n maxHeight = imgH < maxHeight ? imgH : maxHeight;\n }\n // 截图框默认大小\n // 如果为0 那么计算容器大小 默认为80%\n var w = cw ? cw : parseFloat(this.autoCropWidth);\n var h = ch ? ch : parseFloat(this.autoCropHeight);\n if (w === 0 || h === 0) {\n w = maxWidth * 0.8;\n h = maxHeight * 0.8;\n }\n w = w > maxWidth ? maxWidth : w;\n h = h > maxHeight ? maxHeight : h;\n if (this.fixed) {\n h = (w / this.fixedNumber[0]) * this.fixedNumber[1];\n }\n // 如果比例之后 高度大于h\n if (h > this.h) {\n h = this.h;\n w = (h / this.fixedNumber[1]) * this.fixedNumber[0];\n }\n this.changeCrop(w, h);\n },\n // 手动改变截图框大小函数\n changeCrop(w, h) {\n if (this.centerBox) {\n // 修复初始化时候在centerBox=true情况下\n let axis = this.getImgAxis();\n if (w > axis.x2 - axis.x1) {\n // 宽度超标\n w = axis.x2 - axis.x1;\n h = (w / this.fixedNumber[0]) * this.fixedNumber[1];\n }\n if (h > axis.y2 - axis.y1) {\n // 高度超标\n h = axis.y2 - axis.y1;\n w = (h / this.fixedNumber[1]) * this.fixedNumber[0];\n }\n }\n // 判断是否大于容器\n this.cropW = w;\n this.cropH = h;\n this.checkCropLimitSize()\n this.$nextTick(() => {\n // 居中走一走\n this.cropOffsertX = (this.w - this.cropW) / 2;\n this.cropOffsertY = (this.h - this.cropH) / 2;\n if (this.centerBox) {\n this.moveCrop(null, true);\n }\n });\n },\n // 重置函数， 恢复组件置初始状态\n refresh() {\n let img = this.img;\n this.imgs = "";\n this.scale = 1;\n this.crop = false;\n this.rotate = 0;\n this.w = 0;\n this.h = 0;\n this.trueWidth = 0;\n this.trueHeight = 0;\n this.clearCrop();\n this.$nextTick(() => {\n this.checkedImg();\n });\n },\n\n // 向左边旋转\n rotateLeft() {\n this.rotate = this.rotate <= -3 ? 0 : this.rotate - 1;\n },\n\n // 向右边旋转\n rotateRight() {\n this.rotate = this.rotate >= 3 ? 0 : this.rotate + 1;\n },\n\n // 清除旋转\n rotateClear() {\n this.rotate = 0;\n },\n\n // 图片坐标点校验\n checkoutImgAxis(x, y, scale) {\n x = x || this.x;\n y = y || this.y;\n scale = scale || this.scale;\n let canGo = true;\n // 开始校验 如果说缩放之后的坐标在截图框外 则阻止缩放\n if (this.centerBox) {\n let axis = this.getImgAxis(x, y, scale);\n let cropAxis = this.getCropAxis();\n // 左边的横坐标 图片不能超过截图框\n if (axis.x1 >= cropAxis.x1) {\n canGo = false;\n }\n\n // 右边横坐标\n if (axis.x2 <= cropAxis.x2) {\n canGo = false;\n }\n\n // 纵坐标上面\n if (axis.y1 >= cropAxis.y1) {\n canGo = false;\n }\n\n // 纵坐标下面\n if (axis.y2 <= cropAxis.y2) {\n canGo = false;\n }\n if (!canGo) {\n this.changeImgScale(axis, cropAxis, scale);\n }\n }\n return canGo;\n },\n // 缩放图片，将图片坐标适配截图框坐标\n changeImgScale(axis, cropAxis, scale) {\n // 左右旋转90度时，长宽互换位置, 也就是 1 和 -1的时候\n let trueWidth = this.trueWidth;\n let trueHeight = this.trueHeight;\n let imgW = trueWidth * scale;\n let imgH = trueHeight * scale;\n if (imgW >= this.cropW && imgH >= this.cropH) {\n this.scale = scale;\n } else {\n const cropWScale = this.cropW / trueWidth;\n const cropHScale = this.cropH / trueHeight;\n const cropScale = this.cropH <= trueHeight * cropWScale ? cropWScale : cropHScale;\n this.scale = cropScale;\n imgW = trueWidth * cropScale;\n imgH = trueHeight * cropScale;\n }\n // 用来做移动坐标判断\n if (!this.imgIsQqualCrop) {\n // 左边的横坐标 图片不能超过截图框\n if (axis.x1 >= cropAxis.x1) {\n if (this.isRotateRightOrLeft) {\n this.x = cropAxis.x1 - (trueWidth - imgW) / 2 - (imgW - imgH) / 2;\n } else {\n this.x = cropAxis.x1 - (trueWidth - imgW) / 2;\n }\n }\n // 右边横坐标\n if (axis.x2 <= cropAxis.x2) {\n if (this.isRotateRightOrLeft) {\n this.x = cropAxis.x1 - (trueWidth - imgW) / 2 - (imgW - imgH) / 2 - imgH + this.cropW;\n } else {\n this.x = cropAxis.x2 - (trueWidth - imgW) / 2 - imgW;\n }\n }\n // 纵坐标上面\n if (axis.y1 >= cropAxis.y1) {\n if (this.isRotateRightOrLeft) {\n this.y = cropAxis.y1 - (trueHeight - imgH) / 2 - (imgH - imgW) / 2;\n } else {\n this.y = cropAxis.y1 - (trueHeight - imgH) / 2;\n }\n }\n // 纵坐标下面\n if (axis.y2 <= cropAxis.y2) {\n if (this.isRotateRightOrLeft) {\n this.y = cropAxis.y2 - (trueHeight - imgH)/2 - (imgH - imgW) / 2 - imgW;\n } else {\n this.y = cropAxis.y2 - (trueHeight - imgH)/2 - imgH;\n }\n }\n }\n if (imgW < this.cropW || imgH < this.cropH) {\n this.imgIsQqualCrop = true;\n }\n }\n },\n mounted() {\n this.support =\n "onwheel" in document.createElement("div")\n ? "wheel"\n : document.onmousewheel !== undefined\n ? "mousewheel"\n : "DOMMouseScroll";\n let that = this;\n var u = navigator.userAgent;\n this.isIOS = !!u.match(/\\(i[^;]+;( U;)? CPU.+Mac OS X/);\n // 兼容blob\n if (!HTMLCanvasElement.prototype.toBlob) {\n Object.defineProperty(HTMLCanvasElement.prototype, "toBlob", {\n value: function(callback, type, quality) {\n var binStr = atob(this.toDataURL(type, quality).split(",")[1]),\n len = binStr.length,\n arr = new Uint8Array(len);\n for (var i = 0; i < len; i++) {\n arr[i] = binStr.charCodeAt(i);\n }\n callback(new Blob([arr], { type: that.type || "image/png" }));\n }\n });\n }\n this.showPreview();\n this.checkedImg();\n },\n destroyed() {\n window.removeEventListener("mousemove", this.moveCrop);\n window.removeEventListener("mouseup", this.leaveCrop);\n window.removeEventListener("touchmove", this.moveCrop);\n window.removeEventListener("touchend", this.leaveCrop);\n this.cancelScale()\n }\n};\n<\/script>\n\n<style scoped lang="css">\n.vue-cropper {\n position: relative;\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n user-select: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n direction: ltr;\n touch-action: none;\n text-align: left;\n background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC");\n}\n\n.cropper-box,\n.cropper-box-canvas,\n.cropper-drag-box,\n.cropper-crop-box,\n.cropper-face {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n user-select: none;\n}\n\n.cropper-box-canvas img {\n position: relative;\n text-align: left;\n user-select: none;\n transform: none;\n max-width: none;\n max-height: none;\n}\n\n.cropper-box {\n overflow: hidden;\n}\n\n.cropper-move {\n cursor: move;\n}\n\n.cropper-crop {\n cursor: crosshair;\n}\n\n.cropper-modal {\n background: rgba(0, 0, 0, 0.5);\n}\n\n.cropper-crop-box {\n /*border: 2px solid #39f;*/\n}\n\n.cropper-view-box {\n display: block;\n overflow: hidden;\n width: 100%;\n height: 100%;\n outline: 1px solid #39f;\n outline-color: rgba(51, 153, 255, 0.75);\n user-select: none;\n}\n\n.cropper-view-box img {\n user-select: none;\n text-align: left;\n max-width: none;\n max-height: none;\n}\n\n.cropper-face {\n top: 0;\n left: 0;\n background-color: #fff;\n opacity: 0.1;\n}\n\n.crop-info {\n position: absolute;\n left: 0px;\n min-width: 65px;\n text-align: center;\n color: white;\n line-height: 20px;\n background-color: rgba(0, 0, 0, 0.8);\n font-size: 12px;\n}\n\n.crop-line {\n position: absolute;\n display: block;\n width: 100%;\n height: 100%;\n opacity: 0.1;\n}\n\n.line-w {\n top: -3px;\n left: 0;\n height: 5px;\n cursor: n-resize;\n}\n\n.line-a {\n top: 0;\n left: -3px;\n width: 5px;\n cursor: w-resize;\n}\n\n.line-s {\n bottom: -3px;\n left: 0;\n height: 5px;\n cursor: s-resize;\n}\n\n.line-d {\n top: 0;\n right: -3px;\n width: 5px;\n cursor: e-resize;\n}\n\n.crop-point {\n position: absolute;\n width: 8px;\n height: 8px;\n opacity: 0.75;\n background-color: #39f;\n border-radius: 100%;\n}\n\n.point1 {\n top: -4px;\n left: -4px;\n cursor: nw-resize;\n}\n\n.point2 {\n top: -5px;\n left: 50%;\n margin-left: -3px;\n cursor: n-resize;\n}\n\n.point3 {\n top: -4px;\n right: -4px;\n cursor: ne-resize;\n}\n\n.point4 {\n top: 50%;\n left: -4px;\n margin-top: -3px;\n cursor: w-resize;\n}\n\n.point5 {\n top: 50%;\n right: -4px;\n margin-top: -3px;\n cursor: e-resize;\n}\n\n.point6 {\n bottom: -5px;\n left: -4px;\n cursor: sw-resize;\n}\n\n.point7 {\n bottom: -5px;\n left: 50%;\n margin-left: -3px;\n cursor: s-resize;\n}\n\n.point8 {\n bottom: -5px;\n right: -4px;\n cursor: se-resize;\n}\n\n@media screen and (max-width: 500px) {\n .crop-point {\n position: absolute;\n width: 20px;\n height: 20px;\n opacity: 0.45;\n background-color: #39f;\n border-radius: 100%;\n }\n\n .point1 {\n top: -10px;\n left: -10px;\n }\n\n .point2,\n .point4,\n .point5,\n .point7 {\n display: none;\n }\n\n .point3 {\n top: -10px;\n right: -10px;\n }\n\n .point4 {\n top: 0;\n left: 0;\n }\n\n .point6 {\n bottom: -10px;\n left: -10px;\n }\n\n .point8 {\n bottom: -10px;\n right: -10px;\n }\n}\n</style>\n'],sourceRoot:""}]);const u=p},314:t=>{t.exports=function(t){var e=[];return e.toString=function(){return this.map((function(e){var n="",i=void 0!==e[5];return e[4]&&(n+="@supports (".concat(e[4],") {")),e[2]&&(n+="@media ".concat(e[2]," {")),i&&(n+="@layer".concat(e[5].length>0?" ".concat(e[5]):""," {")),n+=t(e),i&&(n+="}"),e[2]&&(n+="}"),e[4]&&(n+="}"),n})).join("")},e.i=function(t,n,i,r,o){"string"==typeof t&&(t=[[null,t,void 0]]);var s={};if(i)for(var a=0;a<this.length;a++){var c=this[a][0];null!=c&&(s[c]=!0)}for(var h=0;h<t.length;h++){var p=[].concat(t[h]);i&&s[p[0]]||(void 0!==o&&(void 0===p[5]||(p[1]="@layer".concat(p[5].length>0?" ".concat(p[5]):""," {").concat(p[1],"}")),p[5]=o),n&&(p[2]?(p[1]="@media ".concat(p[2]," {").concat(p[1],"}"),p[2]=n):p[2]=n),r&&(p[4]?(p[1]="@supports (".concat(p[4],") {").concat(p[1],"}"),p[4]=r):p[4]="".concat(r)),e.push(p))}},e}},417:t=>{t.exports=function(t,e){return e||(e={}),t?(t=String(t.__esModule?t.default:t),/^['"].*['"]$/.test(t)&&(t=t.slice(1,-1)),e.hash&&(t+=e.hash),/["'() \t\n]|(%20)/.test(t)||e.needQuotes?'"'.concat(t.replace(/"/g,'\\"').replace(/\n/g,"\\n"),'"'):t):t}},354:t=>{t.exports=function(t){var e=t[1],n=t[3];if(!n)return e;if("function"==typeof btoa){var i=btoa(unescape(encodeURIComponent(JSON.stringify(n)))),r="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(i),o="/*# ".concat(r," */");return[e].concat([o]).join("\n")}return[e].join("\n")}},72:t=>{var e=[];function n(t){for(var n=-1,i=0;i<e.length;i++)if(e[i].identifier===t){n=i;break}return n}function i(t,i){for(var o={},s=[],a=0;a<t.length;a++){var c=t[a],h=i.base?c[0]+i.base:c[0],p=o[h]||0,l="".concat(h," ").concat(p);o[h]=p+1;var u=n(l),f={css:c[1],media:c[2],sourceMap:c[3],supports:c[4],layer:c[5]};if(-1!==u)e[u].references++,e[u].updater(f);else{var d=r(f,i);i.byIndex=a,e.splice(a,0,{identifier:l,updater:d,references:1})}s.push(l)}return s}function r(t,e){var n=e.domAPI(e);return n.update(t),function(e){if(e){if(e.css===t.css&&e.media===t.media&&e.sourceMap===t.sourceMap&&e.supports===t.supports&&e.layer===t.layer)return;n.update(t=e)}else n.remove()}}t.exports=function(t,r){var o=i(t=t||[],r=r||{});return function(t){t=t||[];for(var s=0;s<o.length;s++){var a=n(o[s]);e[a].references--}for(var c=i(t,r),h=0;h<o.length;h++){var p=n(o[h]);0===e[p].references&&(e[p].updater(),e.splice(p,1))}o=c}}},659:t=>{var e={};t.exports=function(t,n){var i=function(t){if(void 0===e[t]){var n=document.querySelector(t);if(window.HTMLIFrameElement&&n instanceof window.HTMLIFrameElement)try{n=n.contentDocument.head}catch(t){n=null}e[t]=n}return e[t]}(t);if(!i)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");i.appendChild(n)}},540:t=>{t.exports=function(t){var e=document.createElement("style");return t.setAttributes(e,t.attributes),t.insert(e,t.options),e}},56:(t,e,n)=>{t.exports=function(t){var e=n.nc;e&&t.setAttribute("nonce",e)}},825:t=>{t.exports=function(t){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var e=t.insertStyleElement(t);return{update:function(n){!function(t,e,n){var i="";n.supports&&(i+="@supports (".concat(n.supports,") {")),n.media&&(i+="@media ".concat(n.media," {"));var r=void 0!==n.layer;r&&(i+="@layer".concat(n.layer.length>0?" ".concat(n.layer):""," {")),i+=n.css,r&&(i+="}"),n.media&&(i+="}"),n.supports&&(i+="}");var o=n.sourceMap;o&&"undefined"!=typeof btoa&&(i+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(o))))," */")),e.styleTagTransform(i,t,e.options)}(e,t,n)},remove:function(){!function(t){if(null===t.parentNode)return!1;t.parentNode.removeChild(t)}(e)}}}},113:t=>{t.exports=function(t,e){if(e.styleSheet)e.styleSheet.cssText=t;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(t))}}},107:t=>{t.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC"}},e={};function n(i){var r=e[i];if(void 0!==r)return r.exports;var o=e[i]={id:i,exports:{}};return t[i](o,o.exports,n),o.exports}n.m=t,n.n=t=>{var e=t&&t.__esModule?()=>t.default:()=>t;return n.d(e,{a:e}),e},n.d=(t,e)=>{for(var i in e)n.o(e,i)&&!n.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:e[i]})},n.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),n.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.b=document.baseURI||self.location.href,n.nc=void 0;var i={};return(()=>{n.r(i),n.d(i,{VueCropper:()=>b,default:()=>W});var t=function(){var t=this,e=t._self._c;return e("div",{ref:"cropper",staticClass:"vue-cropper",on:{mouseover:t.scaleImg,mouseout:t.cancelScale}},[t.imgs?e("div",{staticClass:"cropper-box"},[e("div",{directives:[{name:"show",rawName:"v-show",value:!t.loading,expression:"!loading"}],staticClass:"cropper-box-canvas",style:{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("+90*t.rotate+"deg)"}},[e("img",{ref:"cropperImg",attrs:{src:t.imgs,alt:"cropper-img"}})])]):t._e(),t._v(" "),e("div",{staticClass:"cropper-drag-box",class:{"cropper-move":t.move&&!t.crop,"cropper-crop":t.crop,"cropper-modal":t.cropping},on:{mousedown:t.startMove,touchstart:t.startMove}}),t._v(" "),e("div",{directives:[{name:"show",rawName:"v-show",value:t.cropping,expression:"cropping"}],staticClass:"cropper-crop-box",style:{width:t.cropW+"px",height:t.cropH+"px",transform:"translate3d("+t.cropOffsertX+"px,"+t.cropOffsertY+"px,0)"}},[e("span",{staticClass:"cropper-view-box"},[e("img",{style:{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("+90*t.rotate+"deg)"},attrs:{src:t.imgs,alt:"cropper-img"}})]),t._v(" "),e("span",{staticClass:"cropper-face cropper-move",on:{mousedown:t.cropMove,touchstart:t.cropMove}}),t._v(" "),t.info?e("span",{staticClass:"crop-info",style:{top:t.cropInfo.top}},[t._v(t._s(t.cropInfo.width)+" × "+t._s(t.cropInfo.height))]):t._e(),t._v(" "),t.fixedBox?t._e():e("span",[e("span",{staticClass:"crop-line line-w",on:{mousedown:function(e){return t.changeCropSize(e,!1,!0,0,1)},touchstart:function(e){return t.changeCropSize(e,!1,!0,0,1)}}}),t._v(" "),e("span",{staticClass:"crop-line line-a",on:{mousedown:function(e){return t.changeCropSize(e,!0,!1,1,0)},touchstart:function(e){return t.changeCropSize(e,!0,!1,1,0)}}}),t._v(" "),e("span",{staticClass:"crop-line line-s",on:{mousedown:function(e){return t.changeCropSize(e,!1,!0,0,2)},touchstart:function(e){return t.changeCropSize(e,!1,!0,0,2)}}}),t._v(" "),e("span",{staticClass:"crop-line line-d",on:{mousedown:function(e){return t.changeCropSize(e,!0,!1,2,0)},touchstart:function(e){return t.changeCropSize(e,!0,!1,2,0)}}}),t._v(" "),e("span",{staticClass:"crop-point point1",on:{mousedown:function(e){return t.changeCropSize(e,!0,!0,1,1)},touchstart:function(e){return t.changeCropSize(e,!0,!0,1,1)}}}),t._v(" "),e("span",{staticClass:"crop-point point2",on:{mousedown:function(e){return t.changeCropSize(e,!1,!0,0,1)},touchstart:function(e){return t.changeCropSize(e,!1,!0,0,1)}}}),t._v(" "),e("span",{staticClass:"crop-point point3",on:{mousedown:function(e){return t.changeCropSize(e,!0,!0,2,1)},touchstart:function(e){return t.changeCropSize(e,!0,!0,2,1)}}}),t._v(" "),e("span",{staticClass:"crop-point point4",on:{mousedown:function(e){return t.changeCropSize(e,!0,!1,1,0)},touchstart:function(e){return t.changeCropSize(e,!0,!1,1,0)}}}),t._v(" "),e("span",{staticClass:"crop-point point5",on:{mousedown:function(e){return t.changeCropSize(e,!0,!1,2,0)},touchstart:function(e){return t.changeCropSize(e,!0,!1,2,0)}}}),t._v(" "),e("span",{staticClass:"crop-point point6",on:{mousedown:function(e){return t.changeCropSize(e,!0,!0,1,2)},touchstart:function(e){return t.changeCropSize(e,!0,!0,1,2)}}}),t._v(" "),e("span",{staticClass:"crop-point point7",on:{mousedown:function(e){return t.changeCropSize(e,!1,!0,0,2)},touchstart:function(e){return t.changeCropSize(e,!1,!0,0,2)}}}),t._v(" "),e("span",{staticClass:"crop-point point8",on:{mousedown:function(e){return t.changeCropSize(e,!0,!0,2,2)},touchstart:function(e){return t.changeCropSize(e,!0,!0,2,2)}}})])])])};function e(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,i=new Array(e);n<e;n++)i[n]=t[n];return i}function r(t,n){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var n=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=n){var i,r,o,s,a=[],c=!0,h=!1;try{if(o=(n=n.call(t)).next,0===e){if(Object(n)!==n)return;c=!1}else for(;!(c=(i=o.call(n)).done)&&(a.push(i.value),a.length!==e);c=!0);}catch(t){h=!0,r=t}finally{try{if(!c&&null!=n.return&&(s=n.return(),Object(s)!==s))return}finally{if(h)throw r}}return a}}(t,n)||function(t,n){if(t){if("string"==typeof t)return e(t,n);var i=Object.prototype.toString.call(t).slice(8,-1);return"Object"===i&&t.constructor&&(i=t.constructor.name),"Map"===i||"Set"===i?Array.from(t):"Arguments"===i||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i)?e(t,n):void 0}}(t,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}t._withStripped=!0;var o={getData:function(t){return new Promise((function(e,n){var i={};(function(t){var e=null;return new Promise((function(n,i){if(t.src)if(/^data\:/i.test(t.src))e=function(t,e){e=e||t.match(/^data\:([^\;]+)\;base64,/im)[1]||"",t=t.replace(/^data\:([^\;]+)\;base64,/gim,"");for(var n=atob(t),i=n.length%2==0?n.length:n.length+1,r=new ArrayBuffer(i),o=new Uint16Array(r),s=0;s<i;s++)o[s]=n.charCodeAt(s);return r}(t.src),n(e);else if(/^blob\:/i.test(t.src)){var r=new FileReader;r.onload=function(t){e=t.target.result,n(e)},function(t,e){var n=new XMLHttpRequest;n.open("GET",t,!0),n.responseType="blob",n.onload=function(t){var e;200!=this.status&&0!==this.status||(e=this.response,r.readAsArrayBuffer(e))},n.send()}(t.src)}else{var o=new XMLHttpRequest;o.onload=function(){if(200!=this.status&&0!==this.status)throw"Could not load image";e=o.response,n(e),o=null},o.open("GET",t.src,!0),o.responseType="arraybuffer",o.send(null)}else i("img error")}))})(t).then((function(t){i.arrayBuffer=t;try{i.orientation=function(t){var e,n,i,r,o,s,a,c,h,p=new DataView(t),l=p.byteLength;if(255===p.getUint8(0)&&216===p.getUint8(1))for(c=2;c<l;){if(255===p.getUint8(c)&&225===p.getUint8(c+1)){s=c;break}c++}if(s&&(n=s+10,"Exif"===function(t,e,n){var i,r="";for(i=e,n+=e;i<n;i++)r+=String.fromCharCode(t.getUint8(i));return r}(p,s+4,4)&&((r=18761===(o=p.getUint16(n)))||19789===o)&&42===p.getUint16(n+2,r)&&(i=p.getUint32(n+4,r))>=8&&(a=n+i)),a)for(l=p.getUint16(a,r),h=0;h<l;h++)if(c=a+12*h+2,274===p.getUint16(c,r)){c+=8,e=p.getUint16(c,r);break}return e}(t)}catch(t){i.orientation=-1}e(i)})).catch((function(t){n(t)}))}))}};const s=o,a={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,imgIsQqualCrop:!1}},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:function(){return[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:function(){return 10},validator:function(t){return Array.isArray(t)?Number(t[0])>=0&&Number(t[1])>=0:Number(t)>=0}},fillColor:{type:String,default:""}},computed:{cropInfo:function(){var 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){var e=1;this.high&&!this.full&&(e=window.devicePixelRatio),1!==this.enlarge&!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:function(){return navigator.userAgent,!!window.ActiveXObject||"ActiveXObject"in window},passive:function(){return this.isIE?null:{passive:!1}}},watch:{img:function(){this.checkedImg()},imgs:function(t){""!==t&&this.reload()},cropW:function(){this.showPreview()},cropH:function(){this.showPreview()},cropOffsertX:function(){this.showPreview()},cropOffsertY:function(){this.showPreview()},scale:function(t,e){this.showPreview()},x:function(){this.showPreview()},y:function(){this.showPreview()},autoCrop:function(t){t&&this.goAutoCrop()},autoCropWidth:function(){this.autoCrop&&this.goAutoCrop()},autoCropHeight:function(){this.autoCrop&&this.goAutoCrop()},mode:function(){this.checkedImg()},rotate:function(){this.showPreview(),(this.autoCrop||this.cropW>0||this.cropH>0)&&this.goAutoCrop(this.cropW,this.cropH)}},methods:{getVersion:function(t){for(var e=navigator.userAgent.split(" "),n="",i=new RegExp(t,"i"),r=0;r<e.length;r++)i.test(e[r])&&(n=e[r]);return n?n.split("/")[1].split("."):["0","0","0"]},checkOrientationImage:function(t,e,n,i){var r=this;if(this.getVersion("chrome")[0]>=81)e=-1;else if(this.getVersion("safari")[0]>=605){var o=this.getVersion("version");o[0]>13&&o[1]>1&&(e=-1)}else{var s=navigator.userAgent.toLowerCase().match(/cpu iphone os (.*?) like mac os/);if(s){var a=s[1];((a=a.split("_"))[0]>13||a[0]>=13&&a[1]>=4)&&(e=-1)}}var c=document.createElement("canvas"),h=c.getContext("2d");switch(h.save(),e){case 2:c.width=n,c.height=i,h.translate(n,0),h.scale(-1,1);break;case 3:c.width=n,c.height=i,h.translate(n/2,i/2),h.rotate(180*Math.PI/180),h.translate(-n/2,-i/2);break;case 4:c.width=n,c.height=i,h.translate(0,i),h.scale(1,-1);break;case 5:c.height=n,c.width=i,h.rotate(.5*Math.PI),h.scale(1,-1);break;case 6:c.width=i,c.height=n,h.translate(i/2,n/2),h.rotate(90*Math.PI/180),h.translate(-n/2,-i/2);break;case 7:c.height=n,c.width=i,h.rotate(.5*Math.PI),h.translate(n,-i),h.scale(-1,1);break;case 8:c.height=n,c.width=i,h.translate(i/2,n/2),h.rotate(-90*Math.PI/180),h.translate(-n/2,-i/2);break;default:c.width=n,c.height=i}h.drawImage(t,0,0,n,i),h.restore(),c.toBlob((function(t){var e=URL.createObjectURL(t);URL.revokeObjectURL(r.imgs),r.imgs=e}),"image/"+this.outputType,1)},checkedImg:function(){var t=this;if(null===this.img||""===this.img)return this.imgs="",void this.clearCrop();this.loading=!0,this.scale=1,this.rotate=0,this.clearCrop();var e=new Image;if(e.onload=function(){if(""===t.img)return t.$emit("imgLoad","error"),t.$emit("img-load","error"),t.$emit("img-load",new Error("图片不能为空")),!1;var n=e.width,i=e.height;s.getData(e).then((function(r){t.orientation=r.orientation||1;var o=Number(t.maxImgSize);!t.orientation&&n<o&i<o?t.imgs=t.img:(n>o&&(i=i/n*o,n=o),i>o&&(n=n/i*o,i=o),t.checkOrientationImage(e,t.orientation,n,i))})).catch((function(e){t.$emit("img-load","error"),t.$emit("img-load-error",e)}))},e.onerror=function(){t.$emit("imgLoad","error"),t.$emit("img-load","error"),t.$emit("img-load-error",error)},"data"!==this.img.substr(0,4)&&(e.crossOrigin=""),this.isIE){var n=new XMLHttpRequest;n.onload=function(){var t=URL.createObjectURL(this.response);e.src=t},n.open("GET",this.img,!0),n.responseType="blob",n.send()}else e.src=this.img},startMove:function(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),2==t.touches.length&&(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:function(t){var e=this;t.preventDefault();var n=this.scale,i=this.touches[0].clientX,r=this.touches[0].clientY,o=t.touches[0].clientX,s=t.touches[0].clientY,a=this.touches[1].clientX,c=this.touches[1].clientY,h=t.touches[1].clientX,p=t.touches[1].clientY,l=Math.sqrt(Math.pow(i-a,2)+Math.pow(r-c,2)),u=Math.sqrt(Math.pow(o-h,2)+Math.pow(s-p,2))-l,f=1,d=(f=(f=f/this.trueWidth>f/this.trueHeight?f/this.trueHeight:f/this.trueWidth)>.1?.1:f)*u;if(!this.touchNow){if(this.touchNow=!0,u>0?n+=Math.abs(d):u<0&&n>Math.abs(d)&&(n-=Math.abs(d)),this.touches=t.touches,setTimeout((function(){e.touchNow=!1}),8),!this.checkoutImgAxis(this.x,this.y,n))return!1;this.scale=n}},cancelTouchScale:function(t){window.removeEventListener("touchmove",this.touchScale)},moveImg:function(t){var e=this;if(t.preventDefault(),t.touches&&2===t.touches.length)return this.touches=t.touches,window.addEventListener("touchmove",this.touchScale),window.addEventListener("touchend",this.cancelTouchScale),window.removeEventListener("touchmove",this.moveImg),!1;var n,i,r="clientX"in t?t.clientX:t.touches[0].clientX,o="clientY"in t?t.clientY:t.touches[0].clientY;n=r-this.moveX,i=o-this.moveY,this.$nextTick((function(){if(e.centerBox){var t,r,o,s,a=e.getImgAxis(n,i,e.scale),c=e.getCropAxis(),h=e.trueHeight*e.scale,p=e.trueWidth*e.scale;switch(e.rotate){case 1:case-1:case 3:case-3:t=e.cropOffsertX-e.trueWidth*(1-e.scale)/2+(h-p)/2,r=e.cropOffsertY-e.trueHeight*(1-e.scale)/2+(p-h)/2,o=t-h+e.cropW,s=r-p+e.cropH;break;default:t=e.cropOffsertX-e.trueWidth*(1-e.scale)/2,r=e.cropOffsertY-e.trueHeight*(1-e.scale)/2,o=t-p+e.cropW,s=r-h+e.cropH}a.x1>=c.x1&&(n=t),a.y1>=c.y1&&(i=r),a.x2<=c.x2&&(n=o),a.y2<=c.y2&&(i=s)}e.x=n,e.y=i,e.$emit("imgMoving",{moving:!0,axis:e.getImgAxis()}),e.$emit("img-moving",{moving:!0,axis:e.getImgAxis()})}))},leaveImg:function(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:function(){this.canScale&&window.addEventListener(this.support,this.changeSize,this.passive)},cancelScale:function(){this.canScale&&window.removeEventListener(this.support,this.changeSize)},changeSize:function(t){var e=this;t.preventDefault();var n=this.scale,i=t.deltaY||t.wheelDelta;i=navigator.userAgent.indexOf("Firefox")>0?30*i:i,this.isIE&&(i=-i);var r=this.coe,o=(r=r/this.trueWidth>r/this.trueHeight?r/this.trueHeight:r/this.trueWidth)*i;o<0?n+=Math.abs(o):n>Math.abs(o)&&(n-=Math.abs(o));var s=o<0?"add":"reduce";if(s!==this.coeStatus&&(this.coeStatus=s,this.coe=.2),this.scaling||(this.scalingSet=setTimeout((function(){e.scaling=!1,e.coe=e.coe+=.01}),50)),this.scaling=!0,!this.checkoutImgAxis(this.x,this.y,n))return!1;this.scale=n},changeScale:function(t){var e=this.scale;t=t||1;var n=20;if((t*=n=n/this.trueWidth>n/this.trueHeight?n/this.trueHeight:n/this.trueWidth)>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:function(t){var e=this;t.preventDefault();var n="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((function(){var t=n-e.cropX,r=i-e.cropY;if(t>0?(e.cropW=t+e.cropChangeX>e.w?e.w-e.cropChangeX:t,e.cropOffsertX=e.cropChangeX):(e.cropW=e.w-e.cropChangeX+Math.abs(t)>e.w?e.cropChangeX:Math.abs(t),e.cropOffsertX=e.cropChangeX+t>0?e.cropChangeX+t:0),e.fixed){var o=e.cropW/e.fixedNumber[0]*e.fixedNumber[1];o+e.cropOffsertY>e.h?(e.cropH=e.h-e.cropOffsertY,e.cropW=e.cropH/e.fixedNumber[1]*e.fixedNumber[0],e.cropOffsertX=t>0?e.cropChangeX:e.cropChangeX-e.cropW):e.cropH=o,e.cropOffsertY=e.cropOffsertY}else r>0?(e.cropH=r+e.cropChangeY>e.h?e.h-e.cropChangeY:r,e.cropOffsertY=e.cropChangeY):(e.cropH=e.h-e.cropChangeY+Math.abs(r)>e.h?e.cropChangeY:Math.abs(r),e.cropOffsertY=e.cropChangeY+r>0?e.cropChangeY+r:0)}))},changeCropSize:function(t,e,n,i,r){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=n,this.changeCropTypeX=i,this.changeCropTypeY=r,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("changeCropSize",{width:this.cropW,height:this.cropH}),this.$emit("change-crop-size",{width:this.cropW,height:this.cropH})},changeCropNow:function(t){var e=this;t.preventDefault();var n="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,o=this.w,s=this.h,a=0,c=0;if(this.centerBox){var h=this.getImgAxis(),p=h.x2,l=h.y2;a=h.x1>0?h.x1:0,c=h.y1>0?h.y1:0,o>p&&(o=p),s>l&&(s=l)}var u=r(this.checkCropLimitSize(),2),f=u[0],d=u[1];this.$nextTick((function(){var t=n-e.cropX,r=i-e.cropY;if(e.canChangeX&&(1===e.changeCropTypeX?e.cropOldW-t<f?(e.cropW=f,e.cropOffsertX=e.cropOldW+e.cropChangeX-a-f):e.cropOldW-t>0?(e.cropW=o-e.cropChangeX-t<=o-a?e.cropOldW-t:e.cropOldW+e.cropChangeX-a,e.cropOffsertX=o-e.cropChangeX-t<=o-a?e.cropChangeX+t:a):(e.cropW=Math.abs(t)+e.cropChangeX<=o?Math.abs(t)-e.cropOldW:o-e.cropOldW-e.cropChangeX,e.cropOffsertX=e.cropChangeX+e.cropOldW):2===e.changeCropTypeX&&(e.cropOldW+t<f?e.cropW=f:e.cropOldW+t>0?(e.cropW=e.cropOldW+t+e.cropOffsertX<=o?e.cropOldW+t:o-e.cropOffsertX,e.cropOffsertX=e.cropChangeX):(e.cropW=o-e.cropChangeX+Math.abs(t+e.cropOldW)<=o-a?Math.abs(t+e.cropOldW):e.cropChangeX-a,e.cropOffsertX=o-e.cropChangeX+Math.abs(t+e.cropOldW)<=o-a?e.cropChangeX-Math.abs(t+e.cropOldW):a))),e.canChangeY&&(1===e.changeCropTypeY?e.cropOldH-r<d?(e.cropH=d,e.cropOffsertY=e.cropOldH+e.cropChangeY-c-d):e.cropOldH-r>0?(e.cropH=s-e.cropChangeY-r<=s-c?e.cropOldH-r:e.cropOldH+e.cropChangeY-c,e.cropOffsertY=s-e.cropChangeY-r<=s-c?e.cropChangeY+r:c):(e.cropH=Math.abs(r)+e.cropChangeY<=s?Math.abs(r)-e.cropOldH:s-e.cropOldH-e.cropChangeY,e.cropOffsertY=e.cropChangeY+e.cropOldH):2===e.changeCropTypeY&&(e.cropOldH+r<d?e.cropH=d:e.cropOldH+r>0?(e.cropH=e.cropOldH+r+e.cropOffsertY<=s?e.cropOldH+r:s-e.cropOffsertY,e.cropOffsertY=e.cropChangeY):(e.cropH=s-e.cropChangeY+Math.abs(r+e.cropOldH)<=s-c?Math.abs(r+e.cropOldH):e.cropChangeY-c,e.cropOffsertY=s-e.cropChangeY+Math.abs(r+e.cropOldH)<=s-c?e.cropChangeY-Math.abs(r+e.cropOldH):c))),e.canChangeX&&e.fixed){var h=e.cropW/e.fixedNumber[0]*e.fixedNumber[1];h<d?(e.cropH=d,e.cropW=e.fixedNumber[0]*d/e.fixedNumber[1],1===e.changeCropTypeX&&(e.cropOffsertX=e.cropChangeX+(e.cropOldW-e.cropW))):h+e.cropOffsertY>s?(e.cropH=s-e.cropOffsertY,e.cropW=e.cropH/e.fixedNumber[1]*e.fixedNumber[0],1===e.changeCropTypeX&&(e.cropOffsertX=e.cropChangeX+(e.cropOldW-e.cropW))):e.cropH=h}if(e.canChangeY&&e.fixed){var p=e.cropH/e.fixedNumber[1]*e.fixedNumber[0];p<f?(e.cropW=f,e.cropH=e.fixedNumber[1]*f/e.fixedNumber[0]):p+e.cropOffsertX>o?(e.cropW=o-e.cropOffsertX,e.cropH=e.cropW/e.fixedNumber[0]*e.fixedNumber[1]):e.cropW=p}e.$emit("cropSizing",{cropW:e.cropW,cropH:e.cropH}),e.$emit("crop-sizing",{cropW:e.cropW,cropH:e.cropH})}))},checkCropLimitSize:function(){this.cropW,this.cropH;var t=this.limitMinSize,e=new Array;return e=Array.isArray(t)?t:[t,t],[parseFloat(e[0]),parseFloat(e[1])]},changeCropEnd:function(t){window.removeEventListener("mousemove",this.changeCropNow),window.removeEventListener("mouseup",this.changeCropEnd),window.removeEventListener("touchmove",this.changeCropNow),window.removeEventListener("touchend",this.changeCropEnd)},calculateSize:function(t,e,n,i,r,o){var s=t/e,a=r,c=o;return a<n&&(a=n,c=Math.ceil(a/s)),c<i&&(c=i,(a=Math.ceil(c*s))<n&&(a=n,c=Math.ceil(a/s))),a<r&&(a=r,c=Math.ceil(a/s)),c<o&&(c=o,a=Math.ceil(c*s)),{width:a,height:c}},endCrop:function(){0===this.cropW&&0===this.cropH&&(this.cropping=!1);var t=r(this.checkCropLimitSize(),2),e=t[0],n=t[1],i=this.fixed?this.calculateSize(this.fixedNumber[0],this.fixedNumber[1],e,n,this.cropW,this.cropH):{width:e,height:n},o=i.width,s=i.height;o>this.cropW&&(this.cropW=o,this.cropOffsertX+o>this.w&&(this.cropOffsertX=this.w-o)),s>this.cropH&&(this.cropH=s,this.cropOffsertY+s>this.h&&(this.cropOffsertY=this.h-s)),window.removeEventListener("mousemove",this.createCrop),window.removeEventListener("mouseup",this.endCrop),window.removeEventListener("touchmove",this.createCrop),window.removeEventListener("touchend",this.endCrop)},startCrop:function(){this.crop=!0},stopCrop:function(){this.crop=!1},clearCrop:function(){this.cropping=!1,this.cropW=0,this.cropH=0},cropMove:function(t){if(t.preventDefault(),!this.canMoveBox)return this.crop=!1,this.startMove(t),!1;if(t.touches&&2===t.touches.length)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);var e,n,i="clientX"in t?t.clientX:t.touches[0].clientX,r="clientY"in t?t.clientY:t.touches[0].clientY;e=i-this.cropOffsertX,n=r-this.cropOffsertY,this.cropX=e,this.cropY=n,this.$emit("cropMoving",{moving:!0,axis:this.getCropAxis()}),this.$emit("crop-moving",{moving:!0,axis:this.getCropAxis()})},moveCrop:function(t,e){var n=this,i=0,r=0;t&&(t.preventDefault(),i="clientX"in t?t.clientX:t.touches[0].clientX,r="clientY"in t?t.clientY:t.touches[0].clientY),this.$nextTick((function(){var t,o,s=i-n.cropX,a=r-n.cropY;if(e&&(s=n.cropOffsertX,a=n.cropOffsertY),t=s<=0?0:s+n.cropW>n.w?n.w-n.cropW:s,o=a<=0?0:a+n.cropH>n.h?n.h-n.cropH:a,n.centerBox){var c=n.getImgAxis();t<=c.x1&&(t=c.x1),t+n.cropW>c.x2&&(t=c.x2-n.cropW),o<=c.y1&&(o=c.y1),o+n.cropH>c.y2&&(o=c.y2-n.cropH)}n.cropOffsertX=t,n.cropOffsertY=o,n.$emit("cropMoving",{moving:!0,axis:n.getCropAxis()}),n.$emit("crop-moving",{moving:!0,axis:n.getCropAxis()})}))},getImgAxis:function(t,e,n){t=t||this.x,e=e||this.y,n=n||this.scale;var i={x1:0,x2:0,y1:0,y2:0},r=this.trueWidth*n,o=this.trueHeight*n;switch(this.rotate){case 0:i.x1=t+this.trueWidth*(1-n)/2,i.x2=i.x1+this.trueWidth*n,i.y1=e+this.trueHeight*(1-n)/2,i.y2=i.y1+this.trueHeight*n;break;case 1:case-1:case 3:case-3:i.x1=t+this.trueWidth*(1-n)/2+(r-o)/2,i.x2=i.x1+this.trueHeight*n,i.y1=e+this.trueHeight*(1-n)/2+(o-r)/2,i.y2=i.y1+this.trueWidth*n;break;default:i.x1=t+this.trueWidth*(1-n)/2,i.x2=i.x1+this.trueWidth*n,i.y1=e+this.trueHeight*(1-n)/2,i.y2=i.y1+this.trueHeight*n}return i},getCropAxis:function(){var 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:function(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:function(t){var e=this,n=document.createElement("canvas"),i=n.getContext("2d"),r=new Image,o=this.rotate,s=this.trueWidth,a=this.trueHeight,c=this.cropOffsertX,h=this.cropOffsertY;r.onload=function(){if(0!==e.cropW){var p=1;e.high&!e.full&&(p=window.devicePixelRatio),1!==e.enlarge&!e.full&&(p=Math.abs(Number(e.enlarge)));var u=e.cropW*p,f=e.cropH*p,d=s*e.scale*p,g=a*e.scale*p,m=(e.x-c+e.trueWidth*(1-e.scale)/2)*p,v=(e.y-h+e.trueHeight*(1-e.scale)/2)*p;switch(l(u,f),i.save(),o){case 0:e.full?(l(u/e.scale,f/e.scale),i.drawImage(r,m/e.scale,v/e.scale,d/e.scale,g/e.scale)):i.drawImage(r,m,v,d,g);break;case 1:case-3:e.full?(l(u/e.scale,f/e.scale),m=m/e.scale+(d/e.scale-g/e.scale)/2,v=v/e.scale+(g/e.scale-d/e.scale)/2,i.rotate(90*o*Math.PI/180),i.drawImage(r,v,-m-g/e.scale,d/e.scale,g/e.scale)):(m+=(d-g)/2,v+=(g-d)/2,i.rotate(90*o*Math.PI/180),i.drawImage(r,v,-m-g,d,g));break;case 2:case-2:e.full?(l(u/e.scale,f/e.scale),i.rotate(90*o*Math.PI/180),m/=e.scale,v/=e.scale,i.drawImage(r,-m-d/e.scale,-v-g/e.scale,d/e.scale,g/e.scale)):(i.rotate(90*o*Math.PI/180),i.drawImage(r,-m-d,-v-g,d,g));break;case 3:case-1:e.full?(l(u/e.scale,f/e.scale),m=m/e.scale+(d/e.scale-g/e.scale)/2,v=v/e.scale+(g/e.scale-d/e.scale)/2,i.rotate(90*o*Math.PI/180),i.drawImage(r,-v-d/e.scale,m,d/e.scale,g/e.scale)):(m+=(d-g)/2,v+=(g-d)/2,i.rotate(90*o*Math.PI/180),i.drawImage(r,-v-d,m,d,g));break;default:e.full?(l(u/e.scale,f/e.scale),i.drawImage(r,m/e.scale,v/e.scale,d/e.scale,g/e.scale)):i.drawImage(r,m,v,d,g)}i.restore()}else{var A=s*e.scale,x=a*e.scale;switch(i.save(),o){case 0:l(A,x),i.drawImage(r,0,0,A,x);break;case 1:case-3:l(x,A),i.rotate(90*o*Math.PI/180),i.drawImage(r,0,-x,A,x);break;case 2:case-2:l(A,x),i.rotate(90*o*Math.PI/180),i.drawImage(r,-A,-x,A,x);break;case 3:case-1:l(x,A),i.rotate(90*o*Math.PI/180),i.drawImage(r,-A,0,A,x);break;default:l(A,x),i.drawImage(r,0,0,A,x)}i.restore()}t(n)},"data"!==this.img.substr(0,4)&&(r.crossOrigin="Anonymous"),r.src=this.imgs;var p=this.fillColor;function l(t,e){n.width=Math.round(t),n.height=Math.round(e),p&&(i.fillStyle=p,i.fillRect(0,0,n.width,n.height))}},getCropData:function(t){var e=this;this.getCropChecked((function(n){t(n.toDataURL("image/"+e.outputType,e.outputSize))}))},getCropBlob:function(t){var e=this;this.getCropChecked((function(n){n.toBlob((function(e){return t(e)}),"image/"+e.outputType,e.outputSize)}))},showPreview:function(){var t=this;if(!this.isCanShow)return!1;this.isCanShow=!1,setTimeout((function(){t.isCanShow=!0}),16);var e=this.cropW,n=this.cropH,i=this.scale,r={};r.div={width:"".concat(e,"px"),height:"".concat(n,"px")};var o=(this.x-this.cropOffsertX)/i,s=(this.y-this.cropOffsertY)/i;r.w=e,r.h=n,r.url=this.imgs,r.img={width:"".concat(this.trueWidth,"px"),height:"".concat(this.trueHeight,"px"),transform:"scale(".concat(i,")translate3d(").concat(o,"px, ").concat(s,"px, ").concat(0,"px)rotateZ(").concat(90*this.rotate,"deg)")},r.html='\n <div class="show-preview" style="width: '.concat(r.w,"px; height: ").concat(r.h,'px; overflow: hidden">\n <div style="width: ').concat(e,"px; height: ").concat(n,'px">\n <img src=').concat(r.url,' style="width: ').concat(this.trueWidth,"px; height: ").concat(this.trueHeight,"px; transform:\n scale(").concat(i,")translate3d(").concat(o,"px, ").concat(s,"px, ").concat(0,"px)rotateZ(").concat(90*this.rotate,'deg)">\n </div>\n </div>'),this.$emit("realTime",r),this.$emit("real-time",r)},reload:function(){var t=this,e=new Image;e.onload=function(){t.w=parseFloat(window.getComputedStyle(t.$refs.cropper).width),t.h=parseFloat(window.getComputedStyle(t.$refs.cropper).height),t.trueWidth=e.width,t.trueHeight=e.height,t.original?t.scale=1:t.scale=t.checkedMode(),t.$nextTick((function(){t.x=-(t.trueWidth-t.trueWidth*t.scale)/2+(t.w-t.trueWidth*t.scale)/2,t.y=-(t.trueHeight-t.trueHeight*t.scale)/2+(t.h-t.trueHeight*t.scale)/2,t.loading=!1,t.autoCrop&&t.goAutoCrop(),t.$emit("img-load","success"),t.$emit("imgLoad","success"),setTimeout((function(){t.showPreview()}),20)}))},e.onerror=function(){t.$emit("imgLoad","error"),t.$emit("img-load","error")},e.src=this.imgs},checkedMode:function(){var t=1,e=(this.trueWidth,this.trueHeight),n=this.mode.split(" ");switch(n[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*=t=this.w/this.trueWidth)<this.h&&(t=(e=this.h)/this.trueHeight);break;default:try{var i=n[0];if(-1!==i.search("px")){i=i.replace("px","");var r=parseFloat(i)/this.trueWidth,o=1,s=n[1];-1!==s.search("px")&&(s=s.replace("px",""),o=(e=parseFloat(s))/this.trueHeight),t=Math.min(r,o)}if(-1!==i.search("%")&&(i=i.replace("%",""),t=parseFloat(i)/100*this.w/this.trueWidth),2===n.length&&"auto"===i){var a=n[1];-1!==a.search("px")&&(a=a.replace("px",""),t=(e=parseFloat(a))/this.trueHeight),-1!==a.search("%")&&(a=a.replace("%",""),t=(e=parseFloat(a)/100*this.h)/this.trueHeight)}}catch(e){t=1}}return t},goAutoCrop:function(t,e){if(""!==this.imgs&&null!==this.imgs){this.clearCrop(),this.cropping=!0;var n=this.w,i=this.h;if(this.centerBox){var r=Math.abs(this.rotate)%2>0,o=(r?this.trueHeight:this.trueWidth)*this.scale,s=(r?this.trueWidth:this.trueHeight)*this.scale;n=o<n?o:n,i=s<i?s:i}var a=t||parseFloat(this.autoCropWidth),c=e||parseFloat(this.autoCropHeight);0!==a&&0!==c||(a=.8*n,c=.8*i),a=a>n?n:a,c=c>i?i:c,this.fixed&&(c=a/this.fixedNumber[0]*this.fixedNumber[1]),c>this.h&&(a=(c=this.h)/this.fixedNumber[1]*this.fixedNumber[0]),this.changeCrop(a,c)}},changeCrop:function(t,e){var n=this;if(this.centerBox){var i=this.getImgAxis();t>i.x2-i.x1&&(e=(t=i.x2-i.x1)/this.fixedNumber[0]*this.fixedNumber[1]),e>i.y2-i.y1&&(t=(e=i.y2-i.y1)/this.fixedNumber[1]*this.fixedNumber[0])}this.cropW=t,this.cropH=e,this.checkCropLimitSize(),this.$nextTick((function(){n.cropOffsertX=(n.w-n.cropW)/2,n.cropOffsertY=(n.h-n.cropH)/2,n.centerBox&&n.moveCrop(null,!0)}))},refresh:function(){var t=this;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((function(){t.checkedImg()}))},rotateLeft:function(){this.rotate=this.rotate<=-3?0:this.rotate-1},rotateRight:function(){this.rotate=this.rotate>=3?0:this.rotate+1},rotateClear:function(){this.rotate=0},checkoutImgAxis:function(t,e,n){t=t||this.x,e=e||this.y,n=n||this.scale;var i=!0;if(this.centerBox){var r=this.getImgAxis(t,e,n),o=this.getCropAxis();r.x1>=o.x1&&(i=!1),r.x2<=o.x2&&(i=!1),r.y1>=o.y1&&(i=!1),r.y2<=o.y2&&(i=!1),i||this.changeImgScale(r,o,n)}return i},changeImgScale:function(t,e,n){var i=this.trueWidth,r=this.trueHeight,o=i*n,s=r*n;if(o>=this.cropW&&s>=this.cropH)this.scale=n;else{var a=this.cropW/i,c=this.cropH/r,h=this.cropH<=r*a?a:c;this.scale=h,o=i*h,s=r*h}this.imgIsQqualCrop||(t.x1>=e.x1&&(this.isRotateRightOrLeft?this.x=e.x1-(i-o)/2-(o-s)/2:this.x=e.x1-(i-o)/2),t.x2<=e.x2&&(this.isRotateRightOrLeft?this.x=e.x1-(i-o)/2-(o-s)/2-s+this.cropW:this.x=e.x2-(i-o)/2-o),t.y1>=e.y1&&(this.isRotateRightOrLeft?this.y=e.y1-(r-s)/2-(s-o)/2:this.y=e.y1-(r-s)/2),t.y2<=e.y2&&(this.isRotateRightOrLeft?this.y=e.y2-(r-s)/2-(s-o)/2-o:this.y=e.y2-(r-s)/2-s)),(o<this.cropW||s<this.cropH)&&(this.imgIsQqualCrop=!0)}},mounted:function(){this.support="onwheel"in document.createElement("div")?"wheel":void 0!==document.onmousewheel?"mousewheel":"DOMMouseScroll";var t=this,e=navigator.userAgent;this.isIOS=!!e.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),HTMLCanvasElement.prototype.toBlob||Object.defineProperty(HTMLCanvasElement.prototype,"toBlob",{value:function(e,n,i){for(var r=atob(this.toDataURL(n,i).split(",")[1]),o=r.length,s=new Uint8Array(o),a=0;a<o;a++)s[a]=r.charCodeAt(a);e(new Blob([s],{type:t.type||"image/png"}))}}),this.showPreview(),this.checkedImg()},destroyed:function(){window.removeEventListener("mousemove",this.moveCrop),window.removeEventListener("mouseup",this.leaveCrop),window.removeEventListener("touchmove",this.moveCrop),window.removeEventListener("touchend",this.leaveCrop),this.cancelScale()}};var c=n(72),h=n.n(c),p=n(825),l=n.n(p),u=n(659),f=n.n(u),d=n(56),g=n.n(d),m=n(540),v=n.n(m),A=n(113),x=n.n(A),w=n(750),y={};y.styleTagTransform=x(),y.setAttributes=g(),y.insert=f().bind(null,"head"),y.domAPI=l(),y.insertStyleElement=v(),h()(w.A,y),w.A&&w.A.locals&&w.A.locals;var C=function(t,e,n,i,r,o,s,a){var c,h="function"==typeof t?t.options:t;if(e&&(h.render=e,h.staticRenderFns=[],h._compiled=!0),o&&(h._scopeId="data-v-"+o),c)if(h.functional){h._injectStyles=c;var p=h.render;h.render=function(t,e){return c.call(e),p(t,e)}}else{var l=h.beforeCreate;h.beforeCreate=l?[].concat(l,c):[c]}return{exports:t,options:h}}(a,t,0,0,0,"01ee97ad");const b=C.exports;var H=function(t){t.component("VueCropper",b)};"undefined"!=typeof window&&window.Vue&&H(window.Vue);const W={version:"0.6.5",install:H,VueCropper:b,vueCropper:b}})(),i})())},"7fa5":function(t,e,n){},9938:function(t,e,n){"use strict";n.r(e);var i=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticStyle:{"padding-top":".12rem",overflow:"hidden","min-height":"100vh"}},["Video"===t.playType?n("div",{staticClass:"section sectionVideo"},[n("img",{staticClass:"videoBg",attrs:{src:t.videoImg||t.videoBg}}),n("div",{staticClass:"btnGroup"},[n("MUpload",{staticClass:"muploader imgCover",attrs:{cropper:"",previewImage:!1,options:{fixedNumber:[16,9]}},scopedSlots:t._u([{key:"default",fn:function(){return[n("div",{staticClass:"btnImg",on:{click:t.onCropper}},[t._v("\n 相册获取封面\n ")])]},proxy:!0}],null,!1,1331315068),model:{value:t.videoImg,callback:function(e){t.videoImg=e},expression:"videoImg"}}),n("div",{staticClass:"btnCropper",on:{click:t.onCropper}},[t._v("\n 视频截取封面\n ")])],1)]):t._e(),n("div",{staticClass:"section"},[n("van-field",{attrs:{rows:4,autosize:"",type:"textarea",maxlength:"150",placeholder:"我发布了一首演奏作品，快来听听吧～",showWordLimit:""},model:{value:t.desc,callback:function(e){t.desc=e},expression:"desc"}})],1),n("div",{staticClass:"section sectionFile "},[n("div",{class:["uploadImg2"]},[n("MUpload",{staticClass:"muploader mupload uploadSingleImg opacity",attrs:{cropper:"",defaultImg:t.musicBg,previewImage:!0},model:{value:t.img,callback:function(e){t.img=e},expression:"img"}})],1),n("div",{staticClass:"musicDetail"},[n("p",{staticClass:"musicName"},[t._v(t._s(t.musicDetail.musicSheetName))]),n("p",{staticClass:"username"},[t._v(t._s(t.musicDetail.username))])])]),n("div",{staticClass:"btnGroup"},[n("van-button",{attrs:{type:"primary",round:"",block:"",color:"#2DC7AA"},on:{click:t.onSubmit}},[t._v("\n "+t._s("FORMAL"===t.musicDetail.type?"保存":"发布")+"\n ")])],1)])},r=[],o=n("ddf4"),s=n("22c6"),a=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"m-upload"},[t.cropper?t._e():n("van-uploader",{staticClass:"muploader",attrs:{"preview-full-image":!1,"preview-image":t.previewImage,deletable:t.deletable,"before-read":t.beforeRead,"after-read":t.afterRead,accept:"image/*"},model:{value:t.list,callback:function(e){t.list=e},expression:"list"}},[t._t("default")],2),t.cropper?n("div",{staticClass:"mcropper"},[t.previewImage?n("div",{staticClass:"mcropperSection"},[t.value||t.defaultImg?n("van-image",{staticClass:"uploadImg",attrs:{fit:"cover",position:"center",src:t.value||t.defaultImg}}):n("van-icon",{attrs:{name:"photograph",size:"32"}})],1):t._e(),t._t("default"),t.cropper?n("MCropper",{attrs:{option:t.options},on:{getFile:t.getFile}}):t._e()],2):t._e()],1)},c=[],h=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"upbtn cropper"},[t.hideInput?t._e():n("input",{ref:"headinput",staticClass:"upbtn",staticStyle:{opacity:"0"},attrs:{type:"file",accept:"image/*"},on:{change:function(e){return t.upphoto(e)}}}),""!=t.img?n("div",{staticClass:"bg"},[t.config.ceilbutton?n("div",{staticClass:"btndiv"},[n("div",{staticClass:"btn",style:"backgroundColor:"+t.config.cancelButtonBackgroundColor+";color:"+t.config.cancelButtonTextColor,on:{click:t.canceltailor}},[t._v(t._s(t.config.cancelButtonText))]),n("div",{staticClass:"img",on:{click:t.rotating}}),n("div",{staticClass:"btn",style:"backgroundColor:"+t.config.confirmButtonBackgroundColor+";color:"+t.config.confirmButtonTextColor,on:{click:t.tailoring}},[t._v(t._s(t.config.confirmButtonText))])]):t._e(),n("div",{staticClass:"wrapper"},[n("vueCropper",{ref:"cropper",attrs:{id:"cropper",img:t.img,outputSize:t.config.outputSize,outputType:t.config.outputType,info:t.config.info,canScale:t.config.canScale,autoCrop:t.config.autoCrop,autoCropWidth:t.config.autoCropWidth,autoCropHeight:t.config.autoCropHeight,fixed:t.config.fixed,fixedNumber:t.config.fixedNumber,full:t.config.full,fixedBox:t.config.fixedBox,canMove:t.config.canMove,canMoveBox:t.config.canMoveBox,original:t.config.original,centerBox:t.config.centerBox,high:t.config.high,infoTrue:t.config.infoTrue,maxImgSize:t.config.maxImgSize,enlarge:t.config.enlarge,mode:t.config.mode},on:{cropMoving:function(e){return t.moving(e)},imgMoving:function(e){return t.moving(e)}}})],1),t.config.ceilbutton?t._e():n("div",{staticClass:"btndiv"},[n("div",{staticClass:"btn",style:"backgroundColor:"+t.config.cancelButtonBackgroundColor+";color:"+t.config.cancelButtonTextColor,on:{click:t.canceltailor}},[t._v(t._s(t.config.cancelButtonText))]),n("div",{staticClass:"img",on:{click:t.rotating}}),n("div",{staticClass:"btn",style:"backgroundColor:"+t.config.confirmButtonBackgroundColor+";color:"+t.config.confirmButtonTextColor,on:{click:t.tailoring}},[t._v(t._s(t.config.confirmButtonText))])])]):t._e()])},p=[],l=n("7e79");function u(t){return u="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},u(t)}function f(){/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */f=function(){return t};var t={},e=Object.prototype,n=e.hasOwnProperty,i="function"==typeof Symbol?Symbol:{},r=i.iterator||"@@iterator",o=i.asyncIterator||"@@asyncIterator",s=i.toStringTag||"@@toStringTag";function a(t,e,n){return Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}),t[e]}try{a({},"")}catch(S){a=function(t,e,n){return t[e]=n}}function c(t,e,n,i){var r=e&&e.prototype instanceof l?e:l,o=Object.create(r.prototype),s=new W(i||[]);return o._invoke=function(t,e,n){var i="suspendedStart";return function(r,o){if("executing"===i)throw new Error("Generator is already running");if("completed"===i){if("throw"===r)throw o;return O()}for(n.method=r,n.arg=o;;){var s=n.delegate;if(s){var a=C(s,n);if(a){if(a===p)continue;return a}}if("next"===n.method)n.sent=n._sent=n.arg;else if("throw"===n.method){if("suspendedStart"===i)throw i="completed",n.arg;n.dispatchException(n.arg)}else"return"===n.method&&n.abrupt("return",n.arg);i="executing";var c=h(t,e,n);if("normal"===c.type){if(i=n.done?"completed":"suspendedYield",c.arg===p)continue;return{value:c.arg,done:n.done}}"throw"===c.type&&(i="completed",n.method="throw",n.arg=c.arg)}}}(t,n,s),o}function h(t,e,n){try{return{type:"normal",arg:t.call(e,n)}}catch(S){return{type:"throw",arg:S}}}t.wrap=c;var p={};function l(){}function d(){}function g(){}var m={};a(m,r,(function(){return this}));var v=Object.getPrototypeOf,A=v&&v(v(E([])));A&&A!==e&&n.call(A,r)&&(m=A);var x=g.prototype=l.prototype=Object.create(m);function w(t){["next","throw","return"].forEach((function(e){a(t,e,(function(t){return this._invoke(e,t)}))}))}function y(t,e){function i(r,o,s,a){var c=h(t[r],t,o);if("throw"!==c.type){var p=c.arg,l=p.value;return l&&"object"==u(l)&&n.call(l,"__await")?e.resolve(l.__await).then((function(t){i("next",t,s,a)}),(function(t){i("throw",t,s,a)})):e.resolve(l).then((function(t){p.value=t,s(p)}),(function(t){return i("throw",t,s,a)}))}a(c.arg)}var r;this._invoke=function(t,n){function o(){return new e((function(e,r){i(t,n,e,r)}))}return r=r?r.then(o,o):o()}}function C(t,e){var n=t.iterator[e.method];if(void 0===n){if(e.delegate=null,"throw"===e.method){if(t.iterator.return&&(e.method="return",e.arg=void 0,C(t,e),"throw"===e.method))return p;e.method="throw",e.arg=new TypeError("The iterator does not provide a 'throw' method")}return p}var i=h(n,t.iterator,e.arg);if("throw"===i.type)return e.method="throw",e.arg=i.arg,e.delegate=null,p;var r=i.arg;return r?r.done?(e[t.resultName]=r.value,e.next=t.nextLoc,"return"!==e.method&&(e.method="next",e.arg=void 0),e.delegate=null,p):r:(e.method="throw",e.arg=new TypeError("iterator result is not an object"),e.delegate=null,p)}function b(t){var e={tryLoc:t[0]};1 in t&&(e.catchLoc=t[1]),2 in t&&(e.finallyLoc=t[2],e.afterLoc=t[3]),this.tryEntries.push(e)}function H(t){var e=t.completion||{};e.type="normal",delete e.arg,t.completion=e}function W(t){this.tryEntries=[{tryLoc:"root"}],t.forEach(b,this),this.reset(!0)}function E(t){if(t){var e=t[r];if(e)return e.call(t);if("function"==typeof t.next)return t;if(!isNaN(t.length)){var i=-1,o=function e(){for(;++i<t.length;)if(n.call(t,i))return e.value=t[i],e.done=!1,e;return e.value=void 0,e.done=!0,e};return o.next=o}}return{next:O}}function O(){return{value:void 0,done:!0}}return d.prototype=g,a(x,"constructor",g),a(g,"constructor",d),d.displayName=a(g,s,"GeneratorFunction"),t.isGeneratorFunction=function(t){var e="function"==typeof t&&t.constructor;return!!e&&(e===d||"GeneratorFunction"===(e.displayName||e.name))},t.mark=function(t){return Object.setPrototypeOf?Object.setPrototypeOf(t,g):(t.__proto__=g,a(t,s,"GeneratorFunction")),t.prototype=Object.create(x),t},t.awrap=function(t){return{__await:t}},w(y.prototype),a(y.prototype,o,(function(){return this})),t.AsyncIterator=y,t.async=function(e,n,i,r,o){void 0===o&&(o=Promise);var s=new y(c(e,n,i,r),o);return t.isGeneratorFunction(n)?s:s.next().then((function(t){return t.done?t.value:s.next()}))},w(x),a(x,s,"Generator"),a(x,r,(function(){return this})),a(x,"toString",(function(){return"[object Generator]"})),t.keys=function(t){var e=[];for(var n in t)e.push(n);return e.reverse(),function n(){for(;e.length;){var i=e.pop();if(i in t)return n.value=i,n.done=!1,n}return n.done=!0,n}},t.values=E,W.prototype={constructor:W,reset:function(t){if(this.prev=0,this.next=0,this.sent=this._sent=void 0,this.done=!1,this.delegate=null,this.method="next",this.arg=void 0,this.tryEntries.forEach(H),!t)for(var e in this)"t"===e.charAt(0)&&n.call(this,e)&&!isNaN(+e.slice(1))&&(this[e]=void 0)},stop:function(){this.done=!0;var t=this.tryEntries[0].completion;if("throw"===t.type)throw t.arg;return this.rval},dispatchException:function(t){if(this.done)throw t;var e=this;function i(n,i){return s.type="throw",s.arg=t,e.next=n,i&&(e.method="next",e.arg=void 0),!!i}for(var r=this.tryEntries.length-1;r>=0;--r){var o=this.tryEntries[r],s=o.completion;if("root"===o.tryLoc)return i("end");if(o.tryLoc<=this.prev){var a=n.call(o,"catchLoc"),c=n.call(o,"finallyLoc");if(a&&c){if(this.prev<o.catchLoc)return i(o.catchLoc,!0);if(this.prev<o.finallyLoc)return i(o.finallyLoc)}else if(a){if(this.prev<o.catchLoc)return i(o.catchLoc,!0)}else{if(!c)throw new Error("try statement without catch or finally");if(this.prev<o.finallyLoc)return i(o.finallyLoc)}}}},abrupt:function(t,e){for(var i=this.tryEntries.length-1;i>=0;--i){var r=this.tryEntries[i];if(r.tryLoc<=this.prev&&n.call(r,"finallyLoc")&&this.prev<r.finallyLoc){var o=r;break}}o&&("break"===t||"continue"===t)&&o.tryLoc<=e&&e<=o.finallyLoc&&(o=null);var s=o?o.completion:{};return s.type=t,s.arg=e,o?(this.method="next",this.next=o.finallyLoc,p):this.complete(s)},complete:function(t,e){if("throw"===t.type)throw t.arg;return"break"===t.type||"continue"===t.type?this.next=t.arg:"return"===t.type?(this.rval=this.arg=t.arg,this.method="return",this.next="end"):"normal"===t.type&&e&&(this.next=e),p},finish:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var n=this.tryEntries[e];if(n.finallyLoc===t)return this.complete(n.completion,n.afterLoc),H(n),p}},catch:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var n=this.tryEntries[e];if(n.tryLoc===t){var i=n.completion;if("throw"===i.type){var r=i.arg;H(n)}return r}}throw new Error("illegal catch attempt")},delegateYield:function(t,e,n){return this.delegate={iterator:E(t),resultName:e,nextLoc:n},"next"===this.method&&(this.arg=void 0),p}},t}function d(t,e,n,i,r,o,s){try{var a=t[o](s),c=a.value}catch(error){return void n(error)}a.done?e(c):Promise.resolve(c).then(i,r)}function g(t){return function(){var e=this,n=arguments;return new Promise((function(i,r){var o=t.apply(e,n);function s(t){d(o,i,r,s,a,"next",t)}function a(t){d(o,i,r,s,a,"throw",t)}s(void 0)}))}}var m={name:"H5Cropper",components:{VueCropper:l["VueCropper"]},props:{hideInput:{type:Boolean,default:!1},option:{type:Object,default:function(){return{}}}},data:function(){return{img:"",config:{}}},watch:{option:{handler:function(){delete this.option.autoCrop,"string"===typeof this.option.outputType&&-1===["jpeg","png","webp"].indexOf(this.option.outputType)&&delete this.option.outputType,this.config=Object.assign(this.config,this.option)},deep:!0}},created:function(){delete this.option.autoCrop,"string"===typeof this.option.outputType&&-1===["jpeg","png","webp"].indexOf(this.option.outputType)&&delete this.option.outputType,console.log(this.option,"option"),this.config=Object.assign({ceilbutton:!1,outputSize:1,outputType:"png",info:!1,canScale:!0,autoCrop:!1,autoCropWidth:0,autoCropHeight:0,fixed:!0,fixedNumber:[1,1],full:!1,fixedBox:!0,canMove:!0,canMoveBox:!1,original:!1,centerBox:!0,high:!0,infoTrue:!1,maxImgSize:2e3,enlarge:1,mode:"100%",cancelButtonText:"取消",confirmButtonText:"确定",cancelButtonBackgroundColor:"#606266",confirmButtonBackgroundColor:"#ed594c",cancelButtonTextColor:"#ffffff",confirmButtonTextColor:"#ffffff"},this.option)},methods:{canceltailor:function(){this.img="",this.$emit("canceltailor")},upphoto:function(){var t=g(f().mark((function t(e){var n,i=this;return f().wrap((function(t){while(1)switch(t.prev=t.next){case 0:if(n=e.target.files[0],this.$refs.headinput.value=null,void 0==n){t.next=9;break}return this.$emit("imgorigoinf",n),t.next=6,this.onloadimg(n);case 6:this.img=t.sent,this.config.autoCrop=!0,setTimeout((function(){i.addsolide()}),10);case 9:case"end":return t.stop()}}),t,this)})));function e(e){return t.apply(this,arguments)}return e}(),onloadimg:function(t){return new Promise((function(e){var n=new FileReader;n.readAsDataURL(t),n.onload=function(t){e(t.target["result"])}}))},tailoring:function(){var t=this;this.$refs.cropper.getCropData((function(e){t.$emit("getbase64Data",e),t.$emit("getbase64",e),t.img="",t.config.autoCrop=!1})),this.$refs.cropper.getCropBlob((function(e){t.$emit("getblobData",e),t.$emit("getblob",e);var n={jpeg:"jpg",png:"png",webp:"webp"}[t.config.outputType],i=(new Date).getTime(),r=new File([e],"".concat(i,".").concat(n),{type:"image/".concat(t.config.outputType)});t.$emit("getFile",r),t.$emit("get-file",r),t.img="",t.config.autoCrop=!1}))},rotating:function(){this.$refs.cropper.rotateRight(),document.getElementsByClassName("cropper-modal")[0].style="background-color: rgba(0,0,0,0.5);transition: 0.88s"},moving:function(t){t.moving?document.getElementsByClassName("cropper-modal")[0].style="background-color: rgba(0,0,0,0.5);transition: 0.88s":document.getElementsByClassName("cropper-modal")[0].style="background-color: rgba(0,0,0,0.8);transition: 0.88s"},addsolide:function(){if(null==document.getElementById("vertical")){var t=document.getElementsByClassName("cropper-crop-box")[0],e=document.createElement("div");e.id="vertical",e.style.width="1px",e.style.height="100%",e.style.top="0px",e.style.left="33%",e.style.position="absolute",e.style.backgroundColor="#fff",e.style.zIndex="522",e.style.opacity="0.5";var n=document.createElement("div");n.style.width="1px",n.style.height="100%",n.style.top="0px",n.style.right="33%",n.style.position="absolute",n.style.backgroundColor="#fff",n.style.zIndex="522",n.style.opacity="0.5";var i=document.createElement("div");i.style.width="100%",i.style.height="1px",i.style.top="33%",i.style.left="0px",i.style.position="absolute",i.style.backgroundColor="#fff",i.style.zIndex="522",i.style.opacity="0.5";var r=document.createElement("div");r.style.width="100%",r.style.height="1px",r.style.bottom="33%",r.style.left="0px",r.style.position="absolute",r.style.backgroundColor="#fff",r.style.zIndex="522",r.style.opacity="0.5";var o=document.createElement("div");o.style.width="30px",o.style.height="4px",o.style.top="-4px",o.style.left="-4px",o.style.position="absolute",o.style.backgroundColor="#fff",o.style.zIndex="522",o.style.opacity="1";var s=document.createElement("div");s.style.width="4px",s.style.height="30px",s.style.top="-4px",s.style.left="-4px",s.style.position="absolute",s.style.backgroundColor="#fff",s.style.zIndex="522",s.style.opacity="1";var a=document.createElement("div");a.style.width="30px",a.style.height="4px",a.style.top="-4px",a.style.right="-4px",a.style.position="absolute",a.style.backgroundColor="#fff",a.style.zIndex="522",a.style.opacity="1";var c=document.createElement("div");c.style.width="4px",c.style.height="30px",c.style.top="-4px",c.style.right="-4px",c.style.position="absolute",c.style.backgroundColor="#fff",c.style.zIndex="522",c.style.opacity="1";var h=document.createElement("div");h.style.width="30px",h.style.height="4px",h.style.bottom="-4px",h.style.left="-4px",h.style.position="absolute",h.style.backgroundColor="#fff",h.style.zIndex="522",h.style.opacity="1";var p=document.createElement("div");p.style.width="4px",p.style.height="30px",p.style.bottom="-4px",p.style.left="-4px",p.style.position="absolute",p.style.backgroundColor="#fff",p.style.zIndex="522",p.style.opacity="1";var l=document.createElement("div");l.style.width="30px",l.style.height="4px",l.style.bottom="-4px",l.style.right="-4px",l.style.position="absolute",l.style.backgroundColor="#fff",l.style.zIndex="522",l.style.opacity="1";var u=document.createElement("div");u.style.width="4px",u.style.height="30px",u.style.bottom="-4px",u.style.right="-4px",u.style.position="absolute",u.style.backgroundColor="#fff",u.style.zIndex="522",u.style.opacity="1",t.appendChild(e),t.appendChild(n),t.appendChild(i),t.appendChild(r),t.appendChild(o),t.appendChild(s),t.appendChild(a),t.appendChild(c),t.appendChild(h),t.appendChild(p),t.appendChild(l),t.appendChild(u)}},loadFile:function(t){var e=this;if(!(t instanceof File))throw new Error("Arguments file is not File");this.onloadimg(t).then((function(t){e.img=t,setTimeout((function(){e.config.autoCrop=!0,e.addsolide()}),10)}))},loadBase64:function(t){var e=this;if("string"!==typeof t)throw new Error("Arguments base64 is not string");var n=t.split(",");if(!/^data:image\/(.*?);base64$/.test(n[0]))throw new Error("Arguments base64 MIME is not image/*");if(!/^[\/]?([\da-zA-Z]+[\/+]+)*[\da-zA-Z]+([+=]{1,2}|[\/])?$/.test(n[1]))throw new Error("Not standard base64");this.img=t,setTimeout((function(){e.config.autoCrop=!0,e.addsolide()}),10)}}},v=m,A=(n("c9aa"),n("2877")),x=Object(A["a"])(v,h,p,!1,null,"3d15a8de",null),w=x.exports,y=n("4450");function C(t){return C="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},C(t)}function b(){/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */b=function(){return t};var t={},e=Object.prototype,n=e.hasOwnProperty,i="function"==typeof Symbol?Symbol:{},r=i.iterator||"@@iterator",o=i.asyncIterator||"@@asyncIterator",s=i.toStringTag||"@@toStringTag";function a(t,e,n){return Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}),t[e]}try{a({},"")}catch(S){a=function(t,e,n){return t[e]=n}}function c(t,e,n,i){var r=e&&e.prototype instanceof l?e:l,o=Object.create(r.prototype),s=new W(i||[]);return o._invoke=function(t,e,n){var i="suspendedStart";return function(r,o){if("executing"===i)throw new Error("Generator is already running");if("completed"===i){if("throw"===r)throw o;return O()}for(n.method=r,n.arg=o;;){var s=n.delegate;if(s){var a=w(s,n);if(a){if(a===p)continue;return a}}if("next"===n.method)n.sent=n._sent=n.arg;else if("throw"===n.method){if("suspendedStart"===i)throw i="completed",n.arg;n.dispatchException(n.arg)}else"return"===n.method&&n.abrupt("return",n.arg);i="executing";var c=h(t,e,n);if("normal"===c.type){if(i=n.done?"completed":"suspendedYield",c.arg===p)continue;return{value:c.arg,done:n.done}}"throw"===c.type&&(i="completed",n.method="throw",n.arg=c.arg)}}}(t,n,s),o}function h(t,e,n){try{return{type:"normal",arg:t.call(e,n)}}catch(S){return{type:"throw",arg:S}}}t.wrap=c;var p={};function l(){}function u(){}function f(){}var d={};a(d,r,(function(){return this}));var g=Object.getPrototypeOf,m=g&&g(g(E([])));m&&m!==e&&n.call(m,r)&&(d=m);var v=f.prototype=l.prototype=Object.create(d);function A(t){["next","throw","return"].forEach((function(e){a(t,e,(function(t){return this._invoke(e,t)}))}))}function x(t,e){function i(r,o,s,a){var c=h(t[r],t,o);if("throw"!==c.type){var p=c.arg,l=p.value;return l&&"object"==C(l)&&n.call(l,"__await")?e.resolve(l.__await).then((function(t){i("next",t,s,a)}),(function(t){i("throw",t,s,a)})):e.resolve(l).then((function(t){p.value=t,s(p)}),(function(t){return i("throw",t,s,a)}))}a(c.arg)}var r;this._invoke=function(t,n){function o(){return new e((function(e,r){i(t,n,e,r)}))}return r=r?r.then(o,o):o()}}function w(t,e){var n=t.iterator[e.method];if(void 0===n){if(e.delegate=null,"throw"===e.method){if(t.iterator.return&&(e.method="return",e.arg=void 0,w(t,e),"throw"===e.method))return p;e.method="throw",e.arg=new TypeError("The iterator does not provide a 'throw' method")}return p}var i=h(n,t.iterator,e.arg);if("throw"===i.type)return e.method="throw",e.arg=i.arg,e.delegate=null,p;var r=i.arg;return r?r.done?(e[t.resultName]=r.value,e.next=t.nextLoc,"return"!==e.method&&(e.method="next",e.arg=void 0),e.delegate=null,p):r:(e.method="throw",e.arg=new TypeError("iterator result is not an object"),e.delegate=null,p)}function y(t){var e={tryLoc:t[0]};1 in t&&(e.catchLoc=t[1]),2 in t&&(e.finallyLoc=t[2],e.afterLoc=t[3]),this.tryEntries.push(e)}function H(t){var e=t.completion||{};e.type="normal",delete e.arg,t.completion=e}function W(t){this.tryEntries=[{tryLoc:"root"}],t.forEach(y,this),this.reset(!0)}function E(t){if(t){var e=t[r];if(e)return e.call(t);if("function"==typeof t.next)return t;if(!isNaN(t.length)){var i=-1,o=function e(){for(;++i<t.length;)if(n.call(t,i))return e.value=t[i],e.done=!1,e;return e.value=void 0,e.done=!0,e};return o.next=o}}return{next:O}}function O(){return{value:void 0,done:!0}}return u.prototype=f,a(v,"constructor",f),a(f,"constructor",u),u.displayName=a(f,s,"GeneratorFunction"),t.isGeneratorFunction=function(t){var e="function"==typeof t&&t.constructor;return!!e&&(e===u||"GeneratorFunction"===(e.displayName||e.name))},t.mark=function(t){return Object.setPrototypeOf?Object.setPrototypeOf(t,f):(t.__proto__=f,a(t,s,"GeneratorFunction")),t.prototype=Object.create(v),t},t.awrap=function(t){return{__await:t}},A(x.prototype),a(x.prototype,o,(function(){return this})),t.AsyncIterator=x,t.async=function(e,n,i,r,o){void 0===o&&(o=Promise);var s=new x(c(e,n,i,r),o);return t.isGeneratorFunction(n)?s:s.next().then((function(t){return t.done?t.value:s.next()}))},A(v),a(v,s,"Generator"),a(v,r,(function(){return this})),a(v,"toString",(function(){return"[object Generator]"})),t.keys=function(t){var e=[];for(var n in t)e.push(n);return e.reverse(),function n(){for(;e.length;){var i=e.pop();if(i in t)return n.value=i,n.done=!1,n}return n.done=!0,n}},t.values=E,W.prototype={constructor:W,reset:function(t){if(this.prev=0,this.next=0,this.sent=this._sent=void 0,this.done=!1,this.delegate=null,this.method="next",this.arg=void 0,this.tryEntries.forEach(H),!t)for(var e in this)"t"===e.charAt(0)&&n.call(this,e)&&!isNaN(+e.slice(1))&&(this[e]=void 0)},stop:function(){this.done=!0;var t=this.tryEntries[0].completion;if("throw"===t.type)throw t.arg;return this.rval},dispatchException:function(t){if(this.done)throw t;var e=this;function i(n,i){return s.type="throw",s.arg=t,e.next=n,i&&(e.method="next",e.arg=void 0),!!i}for(var r=this.tryEntries.length-1;r>=0;--r){var o=this.tryEntries[r],s=o.completion;if("root"===o.tryLoc)return i("end");if(o.tryLoc<=this.prev){var a=n.call(o,"catchLoc"),c=n.call(o,"finallyLoc");if(a&&c){if(this.prev<o.catchLoc)return i(o.catchLoc,!0);if(this.prev<o.finallyLoc)return i(o.finallyLoc)}else if(a){if(this.prev<o.catchLoc)return i(o.catchLoc,!0)}else{if(!c)throw new Error("try statement without catch or finally");if(this.prev<o.finallyLoc)return i(o.finallyLoc)}}}},abrupt:function(t,e){for(var i=this.tryEntries.length-1;i>=0;--i){var r=this.tryEntries[i];if(r.tryLoc<=this.prev&&n.call(r,"finallyLoc")&&this.prev<r.finallyLoc){var o=r;break}}o&&("break"===t||"continue"===t)&&o.tryLoc<=e&&e<=o.finallyLoc&&(o=null);var s=o?o.completion:{};return s.type=t,s.arg=e,o?(this.method="next",this.next=o.finallyLoc,p):this.complete(s)},complete:function(t,e){if("throw"===t.type)throw t.arg;return"break"===t.type||"continue"===t.type?this.next=t.arg:"return"===t.type?(this.rval=this.arg=t.arg,this.method="return",this.next="end"):"normal"===t.type&&e&&(this.next=e),p},finish:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var n=this.tryEntries[e];if(n.finallyLoc===t)return this.complete(n.completion,n.afterLoc),H(n),p}},catch:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var n=this.tryEntries[e];if(n.tryLoc===t){var i=n.completion;if("throw"===i.type){var r=i.arg;H(n)}return r}}throw new Error("illegal catch attempt")},delegateYield:function(t,e,n){return this.delegate={iterator:E(t),resultName:e,nextLoc:n},"next"===this.method&&(this.arg=void 0),p}},t}function H(t,e,n,i,r,o,s){try{var a=t[o](s),c=a.value}catch(error){return void n(error)}a.done?e(c):Promise.resolve(c).then(i,r)}function W(t){return function(){var e=this,n=arguments;return new Promise((function(i,r){var o=t.apply(e,n);function s(t){H(o,i,r,s,a,"next",t)}function a(t){H(o,i,r,s,a,"throw",t)}s(void 0)}))}}var E={name:"m-upload",components:{MCropper:w},props:{value:String,cropper:Boolean,deletable:Boolean,defaultImg:String,previewImage:{type:Boolean,default:!0},options:Object},data:function(){return{fileUrl:this.value,list:this.value?[{url:this.value}]:[]}},methods:{beforeRead:function(t){var e=t.size/1024/1024<5;return!!e||(this.$toast("图片大小不能超过 5MB"),!1)},afterRead:function(){var t=W(b().mark((function t(e){var n,i,r,o,s,a,c;return b().wrap((function(t){while(1)switch(t.prev=t.next){case 0:return t.prev=0,e.status="uploading",e.message="",n=e.file.name||"",i=n&&n.replace(/ /gi,"_"),r=(new Date).getTime()+i,o={filename:r,bucketName:"gym",postData:{filename:r,acl:"public-read",key:r,unknowValueField:[]}},t.next=9,Object(y["a"])(o);case 9:return s=t.sent,a={policy:s.data.policy,signature:s.data.signature,key:r,KSSAccessKeyId:s.data.kssAccessKeyId,acl:"public-read",name:r,file:e.file},t.next=13,Object(y["b"])(this.ossUploadUrl,a);case 13:c=t.sent,e.status="done",this.fileUrl=c,this.$emit("input",c),t.next=26;break;case 19:return t.prev=19,t.t0=t["catch"](0),e.status="failed",e.message="上传失败",this.list[origin]=[],this.fileUrl="",t.abrupt("return",!1);case 26:case"end":return t.stop()}}),t,this,[[0,19]])})));function e(e){return t.apply(this,arguments)}return e}(),getFile:function(){var t=W(b().mark((function t(e){var n,i,r,o,s,a,c;return b().wrap((function(t){while(1)switch(t.prev=t.next){case 0:return n=e.name||"",i=n&&n.replace(/ /gi,"_"),r=(new Date).getTime()+i,o={filename:r,bucketName:"gym",postData:{filename:r,acl:"public-read",key:r,unknowValueField:[]}},t.next=6,Object(y["a"])(o);case 6:return s=t.sent,a={policy:s.data.policy,signature:s.data.signature,key:r,KSSAccessKeyId:s.data.kssAccessKeyId,acl:"public-read",name:r,file:e},t.next=10,Object(y["b"])(this.ossUploadUrl,a);case 10:c=t.sent,this.$emit("input",c);case 12:case"end":return t.stop()}}),t,this)})));function e(e){return t.apply(this,arguments)}return e}()}},O=E,S=(n("2731"),Object(A["a"])(O,a,c,!1,null,null,null)),X=S.exports;function Y(t){return Y="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},Y(t)}function I(){/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */I=function(){return t};var t={},e=Object.prototype,n=e.hasOwnProperty,i="function"==typeof Symbol?Symbol:{},r=i.iterator||"@@iterator",o=i.asyncIterator||"@@asyncIterator",s=i.toStringTag||"@@toStringTag";function a(t,e,n){return Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}),t[e]}try{a({},"")}catch(E){a=function(t,e,n){return t[e]=n}}function c(t,e,n,i){var r=e&&e.prototype instanceof l?e:l,o=Object.create(r.prototype),s=new b(i||[]);return o._invoke=function(t,e,n){var i="suspendedStart";return function(r,o){if("executing"===i)throw new Error("Generator is already running");if("completed"===i){if("throw"===r)throw o;return W()}for(n.method=r,n.arg=o;;){var s=n.delegate;if(s){var a=w(s,n);if(a){if(a===p)continue;return a}}if("next"===n.method)n.sent=n._sent=n.arg;else if("throw"===n.method){if("suspendedStart"===i)throw i="completed",n.arg;n.dispatchException(n.arg)}else"return"===n.method&&n.abrupt("return",n.arg);i="executing";var c=h(t,e,n);if("normal"===c.type){if(i=n.done?"completed":"suspendedYield",c.arg===p)continue;return{value:c.arg,done:n.done}}"throw"===c.type&&(i="completed",n.method="throw",n.arg=c.arg)}}}(t,n,s),o}function h(t,e,n){try{return{type:"normal",arg:t.call(e,n)}}catch(E){return{type:"throw",arg:E}}}t.wrap=c;var p={};function l(){}function u(){}function f(){}var d={};a(d,r,(function(){return this}));var g=Object.getPrototypeOf,m=g&&g(g(H([])));m&&m!==e&&n.call(m,r)&&(d=m);var v=f.prototype=l.prototype=Object.create(d);function A(t){["next","throw","return"].forEach((function(e){a(t,e,(function(t){return this._invoke(e,t)}))}))}function x(t,e){function i(r,o,s,a){var c=h(t[r],t,o);if("throw"!==c.type){var p=c.arg,l=p.value;return l&&"object"==Y(l)&&n.call(l,"__await")?e.resolve(l.__await).then((function(t){i("next",t,s,a)}),(function(t){i("throw",t,s,a)})):e.resolve(l).then((function(t){p.value=t,s(p)}),(function(t){return i("throw",t,s,a)}))}a(c.arg)}var r;this._invoke=function(t,n){function o(){return new e((function(e,r){i(t,n,e,r)}))}return r=r?r.then(o,o):o()}}function w(t,e){var n=t.iterator[e.method];if(void 0===n){if(e.delegate=null,"throw"===e.method){if(t.iterator.return&&(e.method="return",e.arg=void 0,w(t,e),"throw"===e.method))return p;e.method="throw",e.arg=new TypeError("The iterator does not provide a 'throw' method")}return p}var i=h(n,t.iterator,e.arg);if("throw"===i.type)return e.method="throw",e.arg=i.arg,e.delegate=null,p;var r=i.arg;return r?r.done?(e[t.resultName]=r.value,e.next=t.nextLoc,"return"!==e.method&&(e.method="next",e.arg=void 0),e.delegate=null,p):r:(e.method="throw",e.arg=new TypeError("iterator result is not an object"),e.delegate=null,p)}function y(t){var e={tryLoc:t[0]};1 in t&&(e.catchLoc=t[1]),2 in t&&(e.finallyLoc=t[2],e.afterLoc=t[3]),this.tryEntries.push(e)}function C(t){var e=t.completion||{};e.type="normal",delete e.arg,t.completion=e}function b(t){this.tryEntries=[{tryLoc:"root"}],t.forEach(y,this),this.reset(!0)}function H(t){if(t){var e=t[r];if(e)return e.call(t);if("function"==typeof t.next)return t;if(!isNaN(t.length)){var i=-1,o=function e(){for(;++i<t.length;)if(n.call(t,i))return e.value=t[i],e.done=!1,e;return e.value=void 0,e.done=!0,e};return o.next=o}}return{next:W}}function W(){return{value:void 0,done:!0}}return u.prototype=f,a(v,"constructor",f),a(f,"constructor",u),u.displayName=a(f,s,"GeneratorFunction"),t.isGeneratorFunction=function(t){var e="function"==typeof t&&t.constructor;return!!e&&(e===u||"GeneratorFunction"===(e.displayName||e.name))},t.mark=function(t){return Object.setPrototypeOf?Object.setPrototypeOf(t,f):(t.__proto__=f,a(t,s,"GeneratorFunction")),t.prototype=Object.create(v),t},t.awrap=function(t){return{__await:t}},A(x.prototype),a(x.prototype,o,(function(){return this})),t.AsyncIterator=x,t.async=function(e,n,i,r,o){void 0===o&&(o=Promise);var s=new x(c(e,n,i,r),o);return t.isGeneratorFunction(n)?s:s.next().then((function(t){return t.done?t.value:s.next()}))},A(v),a(v,s,"Generator"),a(v,r,(function(){return this})),a(v,"toString",(function(){return"[object Generator]"})),t.keys=function(t){var e=[];for(var n in t)e.push(n);return e.reverse(),function n(){for(;e.length;){var i=e.pop();if(i in t)return n.value=i,n.done=!1,n}return n.done=!0,n}},t.values=H,b.prototype={constructor:b,reset:function(t){if(this.prev=0,this.next=0,this.sent=this._sent=void 0,this.done=!1,this.delegate=null,this.method="next",this.arg=void 0,this.tryEntries.forEach(C),!t)for(var e in this)"t"===e.charAt(0)&&n.call(this,e)&&!isNaN(+e.slice(1))&&(this[e]=void 0)},stop:function(){this.done=!0;var t=this.tryEntries[0].completion;if("throw"===t.type)throw t.arg;return this.rval},dispatchException:function(t){if(this.done)throw t;var e=this;function i(n,i){return s.type="throw",s.arg=t,e.next=n,i&&(e.method="next",e.arg=void 0),!!i}for(var r=this.tryEntries.length-1;r>=0;--r){var o=this.tryEntries[r],s=o.completion;if("root"===o.tryLoc)return i("end");if(o.tryLoc<=this.prev){var a=n.call(o,"catchLoc"),c=n.call(o,"finallyLoc");if(a&&c){if(this.prev<o.catchLoc)return i(o.catchLoc,!0);if(this.prev<o.finallyLoc)return i(o.finallyLoc)}else if(a){if(this.prev<o.catchLoc)return i(o.catchLoc,!0)}else{if(!c)throw new Error("try statement without catch or finally");if(this.prev<o.finallyLoc)return i(o.finallyLoc)}}}},abrupt:function(t,e){for(var i=this.tryEntries.length-1;i>=0;--i){var r=this.tryEntries[i];if(r.tryLoc<=this.prev&&n.call(r,"finallyLoc")&&this.prev<r.finallyLoc){var o=r;break}}o&&("break"===t||"continue"===t)&&o.tryLoc<=e&&e<=o.finallyLoc&&(o=null);var s=o?o.completion:{};return s.type=t,s.arg=e,o?(this.method="next",this.next=o.finallyLoc,p):this.complete(s)},complete:function(t,e){if("throw"===t.type)throw t.arg;return"break"===t.type||"continue"===t.type?this.next=t.arg:"return"===t.type?(this.rval=this.arg=t.arg,this.method="return",this.next="end"):"normal"===t.type&&e&&(this.next=e),p},finish:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var n=this.tryEntries[e];if(n.finallyLoc===t)return this.complete(n.completion,n.afterLoc),C(n),p}},catch:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var n=this.tryEntries[e];if(n.tryLoc===t){var i=n.completion;if("throw"===i.type){var r=i.arg;C(n)}return r}}throw new Error("illegal catch attempt")},delegateYield:function(t,e,n){return this.delegate={iterator:H(t),resultName:e,nextLoc:n},"next"===this.method&&(this.arg=void 0),p}},t}function L(t,e,n,i,r,o,s){try{var a=t[o](s),c=a.value}catch(error){return void n(error)}a.done?e(c):Promise.resolve(c).then(i,r)}function M(t){return function(){var e=this,n=arguments;return new Promise((function(i,r){var o=t.apply(e,n);function s(t){L(o,i,r,s,a,"next",t)}function a(t){L(o,i,r,s,a,"throw",t)}s(void 0)}))}}var k={name:"creation-edit",components:{MUpload:X},data:function(){return{files:[],id:this.$route.query.id,musicDetail:{},playType:"",desc:"",videoImg:"",img:"",videoBg:n("1fc8"),musicBg:n("a1b3")}},mounted:function(){var t=M(I().mark((function t(){var e,n;return I().wrap((function(t){while(1)switch(t.prev=t.next){case 0:return t.prev=0,t.next=3,Object(s["c"])(this.id);case 3:e=t.sent,n=e.data,this.musicDetail=n,this.desc=n.desc,this.videoImg=n.videoImg,this.img=n.img,-1!==(null===n||void 0===n?void 0:n.videoUrl.lastIndexOf("mp4"))?this.playType="Video":this.playType="Audio",t.next=14;break;case 12:t.prev=12,t.t0=t["catch"](0);case 14:case"end":return t.stop()}}),t,this,[[0,12]])})));function e(){return t.apply(this,arguments)}return e}(),methods:{onSubmit:function(){var t=M(I().mark((function t(){return I().wrap((function(t){while(1)switch(t.prev=t.next){case 0:return t.prev=0,t.next=3,Object(s["e"])({id:this.id,img:this.img,videoImg:this.videoImg,desc:this.desc||"我发布了一首演奏作品，快来听听吧～",musicPracticeRecordId:this.musicDetail.musicPracticeRecordId,type:"FORMAL"});case 3:this.$router.back(),t.next=8;break;case 6:t.prev=6,t.t0=t["catch"](0);case 8:case"end":return t.stop()}}),t,this,[[0,6]])})));function e(){return t.apply(this,arguments)}return e}(),onCropper:function(){var t=this;Object(o["b"])({api:"videoCrop",content:{url:this.musicDetail.videoUrl}},(function(e){null!==e&&void 0!==e&&e.content.videoCover&&(t.videoImg=e.content.videoCover)}))}}},B=k,z=(n("ff86"),Object(A["a"])(B,i,r,!1,null,null,null));e["default"]=z.exports},"9f0e":function(t,e,n){},a1b3:function(t,e,n){t.exports=n.p+"img/music_bg.d79e1a83.png"},c9aa:function(t,e,n){"use strict";n("7fa5")},ff86:function(t,e,n){"use strict";n("9f0e")}}]);
|
