1 line
22 KiB
JSON
1 line
22 KiB
JSON
{"remainingRequest":"D:\\data\\hanguodoushan\\acs2\\nladmin-ui\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\data\\hanguodoushan\\acs2\\nladmin-ui\\node_modules\\vue-image-crop-upload\\upload-2.vue?vue&type=script&lang=js","dependencies":[{"path":"D:\\data\\hanguodoushan\\acs2\\nladmin-ui\\node_modules\\vue-image-crop-upload\\upload-2.vue","mtime":1732872825712},{"path":"D:\\data\\hanguodoushan\\acs2\\nladmin-ui\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1732872824662},{"path":"D:\\data\\hanguodoushan\\acs2\\nladmin-ui\\node_modules\\babel-loader\\lib\\index.js","mtime":1732872825017},{"path":"D:\\data\\hanguodoushan\\acs2\\nladmin-ui\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1732872824662},{"path":"D:\\data\\hanguodoushan\\acs2\\nladmin-ui\\node_modules\\vue-loader\\lib\\index.js","mtime":1732872825835}],"contextDependencies":[],"result":["//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n\r\n'use strict';\r\nimport language from './utils/language.js';\r\nimport mimes from './utils/mimes.js';\r\nimport data2blob from './utils/data2blob.js';\r\nimport effectRipple from './utils/effectRipple.js';\r\n\r\nexport default {\r\n\tprops: {\r\n\t\t// 域，上传文件name，触发事件会带上（如果一个页面多个图片上传控件，可以做区分\r\n\t\tfield: {\r\n\t\t\ttype: String,\r\n\t\t\t'default': 'avatar'\r\n\t\t},\r\n\t\t// 原名key，类似于id，触发事件会带上（如果一个页面多个图片上传控件，可以做区分\r\n\t\tki: {\r\n\t\t\t'default': 0\r\n\t\t},\r\n\t\t// 显示该控件与否\r\n\t\tvalue: {\r\n\t\t\t'default': true\r\n\t\t},\r\n\t\t// 上传地址\r\n\t\turl: {\r\n\t\t\ttype: String,\r\n\t\t\t'default': ''\r\n\t\t},\r\n\t\t// 其他要上传文件附带的数据，对象格式\r\n\t\tparams: {\r\n\t\t\ttype: Object,\r\n\t\t\t'default': null\r\n\t\t},\r\n\t\t//Add custom headers\r\n\t\theaders: {\r\n\t\t\ttype: Object,\r\n\t\t\t'default': null\r\n\t\t},\r\n\t\t// 剪裁图片的宽\r\n\t\twidth: {\r\n\t\t\ttype: Number,\r\n\t\t\tdefault: 200\r\n\t\t},\r\n\t\t// 剪裁图片的高\r\n\t\theight: {\r\n\t\t\ttype: Number,\r\n\t\t\tdefault: 200\r\n\t\t},\r\n\t\t// 不显示旋转功能\r\n\t\tnoRotate: {\r\n\t\t\ttype: Boolean,\r\n\t\t\tdefault: true\r\n\t\t},\r\n\t\t// 不预览圆形图片\r\n\t\tnoCircle: {\r\n\t\t\ttype: Boolean,\r\n\t\t\tdefault: false\r\n\t\t},\r\n\t\t// 不预览方形图片\r\n\t\tnoSquare: {\r\n\t\t\ttype: Boolean,\r\n\t\t\tdefault: false\r\n\t\t},\r\n\t\t// 单文件大小限制\r\n\t\tmaxSize: {\r\n\t\t\ttype: Number,\r\n\t\t\t'default': 10240\r\n\t\t},\r\n\t\t// 语言类型\r\n\t\tlangType: {\r\n\t\t\ttype: String,\r\n\t\t\t'default': 'zh'\r\n\t\t},\r\n\t\t// 语言包\r\n\t\tlangExt: {\r\n\t\t\ttype: Object,\r\n\t\t\t'default': null\r\n\t\t},\r\n\t\t// 图片上传格式\r\n\t\timgFormat: {\r\n\t\t\ttype: String,\r\n\t\t\t'default': 'png'\r\n\t\t},\r\n\t\t// 图片背景 jpg情况下生效\r\n\t\timgBgc: {\r\n\t\t\ttype: String,\r\n\t\t\t'default': '#fff'\r\n\t\t},\r\n\t\t// 是否支持跨域\r\n\t\twithCredentials: {\r\n\t\t\ttype: Boolean,\r\n\t\t\t'default': false\r\n\t\t},\r\n\t\tmethod: {\r\n\t\t\ttype: String,\r\n\t\t\t'default': 'POST'\r\n\t\t}\r\n\t},\r\n\tdata() {\r\n\t\tlet that = this,\r\n\t\t\t{\r\n\t\t\t\timgFormat,\r\n\t\t\t\tlangType,\r\n\t\t\t\tlangExt,\r\n\t\t\t\twidth,\r\n\t\t\t\theight\r\n\t\t\t} = that,\r\n\t\t\tisSupported = true,\r\n\t\t\tallowImgFormat = [\r\n\t\t\t\t'jpg',\r\n\t\t\t\t'png'\r\n\t\t\t],\r\n\t\t\ttempImgFormat = allowImgFormat.indexOf(imgFormat) === -1 ? 'jpg' : imgFormat,\r\n\t\t\tlang = language[langType] ? language[langType] : language['en'],\r\n\t\t\tmime = mimes[tempImgFormat];\r\n\t\t// 规范图片格式\r\n\t\tthat.imgFormat = tempImgFormat;\r\n\r\n\t\tif (langExt) {\r\n\t\t\tObject.assign(lang, langExt);\r\n\t\t}\r\n\t\tif (typeof FormData != 'function') {\r\n\t\t\tisSupported = false;\r\n\t\t}\r\n\t\treturn {\r\n\t\t\t// 图片的mime\r\n\t\t\tmime,\r\n\r\n\t\t\t// 语言包\r\n\t\t\tlang,\r\n\r\n\t\t\t// 浏览器是否支持该控件\r\n\t\t\tisSupported,\r\n\t\t\t// 浏览器是否支持触屏事件\r\n\t\t\tisSupportTouch: document.hasOwnProperty(\"ontouchstart\"),\r\n\r\n\t\t\t// 步骤\r\n\t\t\tstep: 1, //1选择文件 2剪裁 3上传\r\n\r\n\t\t\t// 上传状态及进度\r\n\t\t\tloading: 0, //0未开始 1正在 2成功 3错误\r\n\t\t\tprogress: 0,\r\n\r\n\t\t\t// 是否有错误及错误信息\r\n\t\t\thasError: false,\r\n\t\t\terrorMsg: '',\r\n\r\n\t\t\t// 需求图宽高比\r\n\t\t\tratio: width / height,\r\n\r\n\t\t\t// 原图地址、生成图片地址\r\n\t\t\tsourceImg: null,\r\n\t\t\tsourceImgUrl: '',\r\n\t\t\tcreateImgUrl: '',\r\n\r\n\t\t\t// 原图片拖动事件初始值\r\n\t\t\tsourceImgMouseDown: {\r\n\t\t\t\ton: false,\r\n\t\t\t\tmX: 0, //鼠标按下的坐标\r\n\t\t\t\tmY: 0,\r\n\t\t\t\tx: 0, //scale原图坐标\r\n\t\t\t\ty: 0\r\n\t\t\t},\r\n\r\n\t\t\t// 生成图片预览的容器大小\r\n\t\t\tpreviewContainer: {\r\n\t\t\t\twidth: 100,\r\n\t\t\t\theight: 100\r\n\t\t\t},\r\n\r\n\t\t\t// 原图容器宽高\r\n\t\t\tsourceImgContainer: { // sic\r\n\t\t\t\twidth: 240,\r\n\t\t\t\theight: 184 // 如果生成图比例与此一致会出现bug，先改成特殊的格式吧，哈哈哈\r\n\t\t\t},\r\n\r\n\t\t\t// 原图展示属性\r\n\t\t\tscale: {\r\n\t\t\t\tzoomAddOn: false, //按钮缩放事件开启\r\n\t\t\t\tzoomSubOn: false, //按钮缩放事件开启\r\n\t\t\t\trange: 1, //最大100\r\n\r\n\t\t\t\tx: 0,\r\n\t\t\t\ty: 0,\r\n\t\t\t\twidth: 0,\r\n\t\t\t\theight: 0,\r\n\t\t\t\tmaxWidth: 0,\r\n\t\t\t\tmaxHeight: 0,\r\n\t\t\t\tminWidth: 0, //最宽\r\n\t\t\t\tminHeight: 0,\r\n\t\t\t\tnaturalWidth: 0, //原宽\r\n\t\t\t\tnaturalHeight: 0\r\n\t\t\t}\r\n\t\t}\r\n\t},\r\n\tcomputed: {\r\n\t\t// 进度条样式\r\n\t\tprogressStyle() {\r\n\t\t\tlet {\r\n\t\t\t\tprogress\r\n\t\t\t} = this;\r\n\t\t\treturn {\r\n\t\t\t\twidth: progress + '%'\r\n\t\t\t}\r\n\t\t},\r\n\t\t// 原图样式\r\n\t\tsourceImgStyle() {\r\n\t\t\tlet {\r\n\t\t\t\t\tscale,\r\n\t\t\t\t\tsourceImgMasking\r\n\t\t\t\t} = this,\r\n\t\t\t\ttop = scale.y + sourceImgMasking.y + 'px',\r\n\t\t\t\tleft = scale.x + sourceImgMasking.x + 'px';\r\n\t\t\treturn {\r\n\t\t\t\ttop,\r\n\t\t\t\tleft,\r\n\t\t\t\twidth: scale.width + 'px',\r\n\t\t\t\theight: scale.height + 'px',// 兼容 Opera\r\n\t\t\t}\r\n\t\t},\r\n\t\t// 原图蒙版属性\r\n\t\tsourceImgMasking() {\r\n\t\t\tlet {\r\n\t\t\t\t\twidth,\r\n\t\t\t\t\theight,\r\n\t\t\t\t\tratio,\r\n\t\t\t\t\tsourceImgContainer\r\n\t\t\t\t} = this,\r\n\t\t\t\tsic = sourceImgContainer,\r\n\t\t\t\tsicRatio = sic.width / sic.height, // 原图容器宽高比\r\n\t\t\t\tx = 0,\r\n\t\t\t\ty = 0,\r\n\t\t\t\tw = sic.width,\r\n\t\t\t\th = sic.height,\r\n\t\t\t\tscale = 1;\r\n\t\t\tif (ratio < sicRatio) {\r\n\t\t\t\tscale = sic.height / height;\r\n\t\t\t\tw = sic.height * ratio;\r\n\t\t\t\tx = (sic.width - w) / 2;\r\n\t\t\t}\r\n\t\t\tif (ratio > sicRatio) {\r\n\t\t\t\tscale = sic.width / width;\r\n\t\t\t\th = sic.width / ratio;\r\n\t\t\t\ty = (sic.height - h) / 2;\r\n\t\t\t}\r\n\t\t\treturn {\r\n\t\t\t\tscale, // 蒙版相对需求宽高的缩放\r\n\t\t\t\tx,\r\n\t\t\t\ty,\r\n\t\t\t\twidth: w,\r\n\t\t\t\theight: h\r\n\t\t\t};\r\n\t\t},\r\n\t\t// 原图遮罩样式\r\n\t\tsourceImgShadeStyle() {\r\n\t\t\tlet {\r\n\t\t\t\t\tsourceImgMasking,\r\n\t\t\t\t\tsourceImgContainer\r\n\t\t\t\t} = this,\r\n\t\t\t\tsic = sourceImgContainer,\r\n\t\t\t\tsim = sourceImgMasking,\r\n\t\t\t\tw = sim.width == sic.width ? sim.width : (sic.width - sim.width) / 2,\r\n\t\t\t\th = sim.height == sic.height ? sim.height : (sic.height - sim.height) / 2;\r\n\t\t\treturn {\r\n\t\t\t\twidth: w + 'px',\r\n\t\t\t\theight: h + 'px'\r\n\t\t\t};\r\n\t\t},\r\n\t\tpreviewStyle() {\r\n\t\t\tlet {\r\n\t\t\t\t\twidth,\r\n\t\t\t\t\theight,\r\n\t\t\t\t\tratio,\r\n\t\t\t\t\tpreviewContainer\r\n\t\t\t\t} = this,\r\n\t\t\t\tpc = previewContainer,\r\n\t\t\t\tw = pc.width,\r\n\t\t\t\th = pc.height,\r\n\t\t\t\tpcRatio = w / h;\r\n\t\t\tif (ratio < pcRatio) {\r\n\t\t\t\tw = pc.height * ratio;\r\n\t\t\t}\r\n\t\t\tif (ratio > pcRatio) {\r\n\t\t\t\th = pc.width / ratio;\r\n\t\t\t}\r\n\t\t\treturn {\r\n\t\t\t\twidth: w + 'px',\r\n\t\t\t\theight: h + 'px'\r\n\t\t\t};\r\n\t\t}\r\n\t},\r\n\twatch: {\r\n\t\tvalue(newValue) {\r\n\t\t\tif (newValue && this.loading != 1) {\r\n\t\t\t\tthis.reset();\r\n\t\t\t}\r\n\t\t}\r\n\t},\r\n\tmethods: {\r\n\t\t// 点击波纹效果\r\n\t\tripple(e) {\r\n\t\t\teffectRipple(e);\r\n\t\t},\r\n\t\t// 关闭控件\r\n\t\toff() {\r\n\t\t\tsetTimeout(()=> {\r\n\t\t\t\tthis.$emit('input', false);\r\n\t\t\t\tif(this.step == 3 && this.loading == 2){\r\n\t\t\t\t\tthis.setStep(1);\r\n\t\t\t\t}\r\n\t\t\t}, 200);\r\n\t\t},\r\n\t\t// 设置步骤\r\n\t\tsetStep(no) {\r\n\t\t\t// 延时是为了显示动画效果呢，哈哈哈\r\n\t\t\tsetTimeout(()=> {\r\n\t\t\t\tthis.step = no;\r\n\t\t\t}, 200);\r\n\t\t},\r\n\r\n\t\t/* 图片选择区域函数绑定\r\n\t\t ---------------------------------------------------------------*/\r\n\t\tpreventDefault(e) {\r\n\t\t\te.preventDefault();\r\n\t\t\treturn false;\r\n\t\t},\r\n\t\thandleClick(e) {\r\n\t\t\tif (this.loading !== 1) {\r\n\t\t\t\tif (e.target !== this.$refs.fileinput) {\r\n\t\t\t\t\te.preventDefault();\r\n\t\t\t\t\tif (document.activeElement !== this.$refs) {\r\n\t\t\t\t\t\tthis.$refs.fileinput.click();\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t},\r\n\t\thandleChange(e) {\r\n\t\t\te.preventDefault();\r\n\t\t\tif (this.loading !== 1) {\r\n\t\t\t\tlet files = e.target.files || e.dataTransfer.files;\r\n\t\t\t\tthis.reset();\r\n\t\t\t\tif (this.checkFile(files[0])) {\r\n\t\t\t\t\tthis.setSourceImg(files[0]);\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t},\r\n\t\t/* ---------------------------------------------------------------*/\r\n\r\n\t\t// 检测选择的文件是否合适\r\n\t\tcheckFile(file) {\r\n\t\t\tlet that = this,\r\n\t\t\t\t{\r\n\t\t\t\t\tlang,\r\n\t\t\t\t\tmaxSize\r\n\t\t\t\t} = that;\r\n\t\t\t// 仅限图片\r\n\t\t\tif (file.type.indexOf('image') === -1) {\r\n\t\t\t\tthat.hasError = true;\r\n\t\t\t\tthat.errorMsg = lang.error.onlyImg;\r\n\t\t\t\treturn false;\r\n\t\t\t}\r\n\r\n\t\t\t// 超出大小\r\n\t\t\tif (file.size / 1024 > maxSize) {\r\n\t\t\t\tthat.hasError = true;\r\n\t\t\t\tthat.errorMsg = lang.error.outOfSize + maxSize + 'kb';\r\n\t\t\t\treturn false;\r\n\t\t\t}\r\n\t\t\treturn true;\r\n\t\t},\r\n\t\t// 重置控件\r\n\t\treset() {\r\n\t\t\tlet that = this;\r\n\t\t\tthat.loading = 0;\r\n\t\t\tthat.hasError = false;\r\n\t\t\tthat.errorMsg = '';\r\n\t\t\tthat.progress = 0;\r\n\t\t},\r\n\t\t// 设置图片源\r\n\t\tsetSourceImg(file) {\r\n\t\t\tthis.$emit('src-file-set', file.name, file.type, file.size);\r\n\t\t\tlet that = this,\r\n\t\t\t\tfr = new FileReader();\r\n\t\t\tfr.onload = function(e) {\r\n\t\t\t\tthat.sourceImgUrl = fr.result;\r\n\t\t\t\tthat.startCrop();\r\n\t\t\t}\r\n\t\t\tfr.readAsDataURL(file);\r\n\t\t},\r\n\t\t// 剪裁前准备工作\r\n\t\tstartCrop() {\r\n\t\t\tlet that = this,\r\n\t\t\t\t{\r\n\t\t\t\t\twidth,\r\n\t\t\t\t\theight,\r\n\t\t\t\t\tratio,\r\n\t\t\t\t\tscale,\r\n\t\t\t\t\tsourceImgUrl,\r\n\t\t\t\t\tsourceImgMasking,\r\n\t\t\t\t\tlang\r\n\t\t\t\t} = that,\r\n\t\t\t\tsim = sourceImgMasking,\r\n\t\t\t\timg = new Image();\r\n\t\t\timg.src = sourceImgUrl;\r\n\t\t\timg.onload = function() {\r\n\t\t\t\tlet nWidth = img.naturalWidth,\r\n\t\t\t\t\tnHeight = img.naturalHeight,\r\n\t\t\t\t\tnRatio = nWidth / nHeight,\r\n\t\t\t\t\tw = sim.width,\r\n\t\t\t\t\th = sim.height,\r\n\t\t\t\t\tx = 0,\r\n\t\t\t\t\ty = 0;\r\n\t\t\t\t// 图片像素不达标\r\n\t\t\t\tif (nWidth < width || nHeight < height) {\r\n\t\t\t\t\tthat.hasError = true;\r\n\t\t\t\t\tthat.errorMsg = lang.error.lowestPx + width + '*' + height;\r\n\t\t\t\t\treturn false;\r\n\t\t\t\t}\r\n\t\t\t\tif (ratio > nRatio) {\r\n\t\t\t\t\th = w / nRatio;\r\n\t\t\t\t\ty = (sim.height - h) / 2;\r\n\t\t\t\t}\r\n\t\t\t\tif (ratio < nRatio) {\r\n\t\t\t\t\tw = h * nRatio;\r\n\t\t\t\t\tx = (sim.width - w) / 2;\r\n\t\t\t\t}\r\n\t\t\t\tscale.range = 0;\r\n\t\t\t\tscale.x = x;\r\n\t\t\t\tscale.y = y;\r\n\t\t\t\tscale.width = w;\r\n\t\t\t\tscale.height = h;\r\n\t\t\t\tscale.minWidth = w;\r\n\t\t\t\tscale.minHeight = h;\r\n\t\t\t\tscale.maxWidth = nWidth * sim.scale;\r\n\t\t\t\tscale.maxHeight = nHeight * sim.scale;\r\n\t\t\t\tscale.naturalWidth = nWidth;\r\n\t\t\t\tscale.naturalHeight = nHeight;\r\n\t\t\t\tthat.sourceImg = img;\r\n\t\t\t\tthat.createImg();\r\n\t\t\t\tthat.setStep(2);\r\n\t\t\t};\r\n\t\t},\r\n\t\t// 鼠标按下图片准备移动\r\n\t\timgStartMove(e) {\r\n\t\t\te.preventDefault();\r\n\t\t\t// 支持触摸事件，则鼠标事件无效\r\n\t\t\tif(this.isSupportTouch && !e.targetTouches){\r\n\t\t\t\treturn false;\r\n\t\t\t}\r\n\t\t\tlet et = e.targetTouches ? e.targetTouches[0] : e,\r\n\t\t\t\t{\r\n\t\t\t\t\tsourceImgMouseDown,\r\n\t\t\t\t\tscale\r\n\t\t\t\t} = this,\r\n\t\t\t\tsimd = sourceImgMouseDown;\r\n\t\t\tsimd.mX = et.screenX;\r\n\t\t\tsimd.mY = et.screenY;\r\n\t\t\tsimd.x = scale.x;\r\n\t\t\tsimd.y = scale.y;\r\n\t\t\tsimd.on = true;\r\n\t\t},\r\n\t\t// 鼠标按下状态下移动，图片移动\r\n\t\timgMove(e) {\r\n\t\t\te.preventDefault();\r\n\t\t\t// 支持触摸事件，则鼠标事件无效\r\n\t\t\tif(this.isSupportTouch && !e.targetTouches){\r\n\t\t\t\treturn false;\r\n\t\t\t}\r\n\t\t\tlet et = e.targetTouches ? e.targetTouches[0] : e,\r\n\t\t\t\t{\r\n\t\t\t\t\tsourceImgMouseDown: {\r\n\t\t\t\t\t\ton,\r\n\t\t\t\t\t\tmX,\r\n\t\t\t\t\t\tmY,\r\n\t\t\t\t\t\tx,\r\n\t\t\t\t\t\ty\r\n\t\t\t\t\t},\r\n\t\t\t\t\tscale,\r\n\t\t\t\t\tsourceImgMasking\r\n\t\t\t\t} = this,\r\n\t\t\t\tsim = sourceImgMasking,\r\n\t\t\t\tnX = et.screenX,\r\n\t\t\t\tnY = et.screenY,\r\n\t\t\t\tdX = nX - mX,\r\n\t\t\t\tdY = nY - mY,\r\n\t\t\t\trX = x + dX,\r\n\t\t\t\trY = y + dY;\r\n\t\t\tif (!on) return;\r\n\t\t\tif (rX > 0) {\r\n\t\t\t\trX = 0;\r\n\t\t\t}\r\n\t\t\tif (rY > 0) {\r\n\t\t\t\trY = 0;\r\n\t\t\t}\r\n\t\t\tif (rX < sim.width - scale.width) {\r\n\t\t\t\trX = sim.width - scale.width;\r\n\t\t\t}\r\n\t\t\tif (rY < sim.height - scale.height) {\r\n\t\t\t\trY = sim.height - scale.height;\r\n\t\t\t}\r\n\t\t\tscale.x = rX;\r\n\t\t\tscale.y = rY;\r\n\t\t},\r\n\t\t// 顺时针旋转图片\r\n rotateImg(e) {\r\n\t\t\tlet {\r\n\t\t\t\t\tsourceImg,\r\n scale: {\r\n\t\t\t\t\t\tnaturalWidth,\r\n\t\t\t\t\t\tnaturalHeight,\r\n }\r\n } = this,\r\n\t\t\t\twidth = naturalHeight,\r\n\t\t\t\theight = naturalWidth,\r\n canvas = this.$refs.canvas,\r\n ctx = canvas.getContext('2d');\r\n\t\t\tcanvas.width = width;\r\n canvas.height = height;\r\n ctx.clearRect(0, 0, width, height);\r\n\r\n\t\t\tctx.fillStyle = 'rgba(0,0,0,0)';\r\n\t\t\tctx.fillRect(0, 0, width, height);\r\n\r\n\t\t\tctx.translate(width, 0);\r\n ctx.rotate(Math.PI * 90 / 180);\r\n\r\n ctx.drawImage(sourceImg, 0, 0, naturalWidth, naturalHeight);\r\n let imgUrl = canvas.toDataURL(mimes['png']);\r\n\r\n\t\t\tthis.sourceImgUrl = imgUrl;\r\n\t\t\tthis.startCrop();\r\n },\r\n\r\n\t\t// 按钮按下开始放大\r\n\t\tstartZoomAdd(e) {\r\n\t\t\tlet that = this,\r\n\t\t\t\t{\r\n\t\t\t\t\tscale\r\n\t\t\t\t} = that;\r\n\t\t\tscale.zoomAddOn = true;\r\n\r\n\t\t\tfunction zoom() {\r\n\t\t\t\tif (scale.zoomAddOn) {\r\n\t\t\t\t\tlet range = scale.range >= 100 ? 100 : ++scale.range;\r\n\t\t\t\t\tthat.zoomImg(range);\r\n\t\t\t\t\tsetTimeout(function() {\r\n\t\t\t\t\t\tzoom();\r\n\t\t\t\t\t}, 60);\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t\tzoom();\r\n\t\t},\r\n\t\t// 按钮松开或移开取消放大\r\n\t\tendZoomAdd(e) {\r\n\t\t\tthis.scale.zoomAddOn = false;\r\n\t\t},\r\n\t\t// 按钮按下开始缩小\r\n\t\tstartZoomSub(e) {\r\n\t\t\tlet that = this,\r\n\t\t\t\t{\r\n\t\t\t\t\tscale\r\n\t\t\t\t} = that;\r\n\t\t\tscale.zoomSubOn = true;\r\n\r\n\t\t\tfunction zoom() {\r\n\t\t\t\tif (scale.zoomSubOn) {\r\n\t\t\t\t\tlet range = scale.range <= 0 ? 0 : --scale.range;\r\n\t\t\t\t\tthat.zoomImg(range);\r\n\t\t\t\t\tsetTimeout(function() {\r\n\t\t\t\t\t\tzoom();\r\n\t\t\t\t\t}, 60);\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t\tzoom();\r\n\t\t},\r\n\t\t// 按钮松开或移开取消缩小\r\n\t\tendZoomSub(e) {\r\n\t\t\tlet {\r\n\t\t\t\tscale\r\n\t\t\t} = this;\r\n\t\t\tscale.zoomSubOn = false;\r\n\t\t},\r\n\t\tzoomChange(e) {\r\n\t\t\tthis.zoomImg(e.target.value);\r\n\t\t},\r\n\t\t// 缩放原图\r\n\t\tzoomImg(newRange) {\r\n\t\t\tlet that = this,\r\n\t\t\t\t{\r\n\t\t\t\t\tsourceImgMasking,\r\n\t\t\t\t\tsourceImgMouseDown,\r\n\t\t\t\t\tscale\r\n\t\t\t\t} = this,\r\n\t\t\t\t{\r\n\t\t\t\t\tmaxWidth,\r\n\t\t\t\t\tmaxHeight,\r\n\t\t\t\t\tminWidth,\r\n\t\t\t\t\tminHeight,\r\n\t\t\t\t\twidth,\r\n\t\t\t\t\theight,\r\n\t\t\t\t\tx,\r\n\t\t\t\t\ty,\r\n\t\t\t\t\trange\r\n\t\t\t\t} = scale,\r\n\t\t\t\tsim = sourceImgMasking,\r\n\t\t\t\t// 蒙版宽高\r\n\t\t\t\tsWidth = sim.width,\r\n\t\t\t\tsHeight = sim.height,\r\n\t\t\t\t// 新宽高\r\n\t\t\t\tnWidth = minWidth + (maxWidth - minWidth) * newRange / 100,\r\n\t\t\t\tnHeight = minHeight + (maxHeight - minHeight) * newRange / 100,\r\n\t\t\t\t// 新坐标（根据蒙版中心点缩放）\r\n\t\t\t\tnX = sWidth / 2 - (nWidth / width) * (sWidth / 2 - x),\r\n\t\t\t\tnY = sHeight / 2 - (nHeight / height) * (sHeight / 2 - y);\r\n\r\n\t\t\t// 判断新坐标是否超过蒙版限制\r\n\t\t\tif (nX > 0) {\r\n\t\t\t\tnX = 0;\r\n\t\t\t}\r\n\t\t\tif (nY > 0) {\r\n\t\t\t\tnY = 0;\r\n\t\t\t}\r\n\t\t\tif (nX < sWidth - nWidth) {\r\n\t\t\t\tnX = sWidth - nWidth;\r\n\t\t\t}\r\n\t\t\tif (nY < sHeight - nHeight) {\r\n\t\t\t\tnY = sHeight - nHeight;\r\n\t\t\t}\r\n\r\n\t\t\t// 赋值处理\r\n\t\t\tscale.x = nX;\r\n\t\t\tscale.y = nY;\r\n\t\t\tscale.width = nWidth;\r\n\t\t\tscale.height = nHeight;\r\n\t\t\tscale.range = newRange;\r\n\t\t\tsetTimeout(function() {\r\n\t\t\t\tif (scale.range == newRange) {\r\n\t\t\t\t\tthat.createImg();\r\n\t\t\t\t}\r\n\t\t\t}, 300);\r\n\t\t},\r\n\t\t // 生成需求图片\r\n createImg(e) {\r\n let that = this,\r\n {\r\n\t\t\t\t\timgFormat,\r\n\t\t\t\t\timgBgc,\r\n mime,\r\n sourceImg,\r\n scale: {\r\n x,\r\n y,\r\n width,\r\n height,\r\n },\r\n sourceImgMasking: {\r\n scale\r\n }\r\n } = that,\r\n canvas = that.$refs.canvas,\r\n ctx = canvas.getContext('2d');\r\n if (e) {\r\n // 取消鼠标按下移动状态\r\n that.sourceImgMouseDown.on = false;\r\n }\r\n\t\t\tcanvas.width = that.width;\r\n canvas.height = that.height;\r\n ctx.clearRect(0, 0, that.width, that.height);\r\n\r\n\t\t\tif(imgFormat == 'png'){\r\n\t\t\t\tctx.fillStyle = 'rgba(0,0,0,0)';\r\n\t\t\t} else{\r\n\t\t\t\t// 如果jpg 为透明区域设置背景，默认白色\r\n\t\t\t\tctx.fillStyle = imgBgc;\r\n\t\t\t}\r\n\t\t\tctx.fillRect(0, 0, that.width, that.height);\r\n\r\n ctx.drawImage(sourceImg, x / scale, y / scale, width / scale, height / scale);\r\n that.createImgUrl = canvas.toDataURL(mime);\r\n },\r\n\t\tprepareUpload(){\r\n\t\t\tlet {\r\n\t\t\t\turl,\r\n\t\t\t\tcreateImgUrl,\r\n\t\t\t\tfield,\r\n\t\t\t\tki\r\n\t\t\t} = this;\r\n\t\t\tthis.$emit('crop-success', createImgUrl, field, ki);\r\n\t\t\tif(typeof url == 'string' && url){\r\n\t\t\t\tthis.upload();\r\n\t\t\t}else{\r\n\t\t\t\tthis.off();\r\n\t\t\t}\r\n\t\t},\r\n\t\t// 上传图片\r\n\t\tupload() {\r\n\t\t\tlet that = this,\r\n\t\t\t\t{\r\n\t\t\t\t\tlang,\r\n\t\t\t\t\timgFormat,\r\n\t\t\t\t\tmime,\r\n\t\t\t\t\turl,\r\n\t\t\t\t\tparams,\r\n\t\t\t\t\theaders,\r\n\t\t\t\t\tfield,\r\n\t\t\t\t\tki,\r\n\t\t\t\t\tcreateImgUrl,\r\n\t\t\t\t\twithCredentials,\r\n\t\t\t\t\tmethod\r\n\t\t\t\t} = this,\r\n\t\t\t\tfmData = new FormData();\r\n\t\t\tfmData.append(field, data2blob(createImgUrl, mime), field + '.' + imgFormat);\r\n\r\n\t\t\t// 添加其他参数\r\n\t\t\tif (typeof params == 'object' && params) {\r\n\t\t\t\tObject.keys(params).forEach((k) => {\r\n\t\t\t\t\tfmData.append(k, params[k]);\r\n\t\t\t\t})\r\n\t\t\t}\r\n\r\n\t\t\t// 监听进度回调\r\n\t\t\tconst uploadProgress = function(event) {\r\n\t\t\t\tif (event.lengthComputable) {\r\n\t\t\t\t\tthat.progress = 100 * Math.round(event.loaded) / event.total;\r\n\t\t\t\t}\r\n\t\t\t};\r\n\r\n\t\t\t// 上传文件\r\n\t\t\tthat.reset();\r\n\t\t\tthat.loading = 1;\r\n\t\t\tthat.setStep(3);\r\n\t\t\tnew Promise(function(resolve, reject) {\r\n\t\t\t\tlet client = new XMLHttpRequest();\r\n\t\t\t\tclient.open(method, url, true);\r\n\t\t\t\tclient.withCredentials = withCredentials;\r\n\t\t\t\tclient.onreadystatechange = function() {\r\n\t\t\t\t\tif (this.readyState !== 4) {\r\n\t\t\t\t\t\treturn;\r\n\t\t\t\t\t}\r\n\t\t\t\t\tif (this.status === 200 || this.status === 201) {\r\n\t\t\t\t\t\tresolve(JSON.parse(this.responseText));\r\n\t\t\t\t\t} else {\r\n\t\t\t\t\t\treject(this.status);\r\n\t\t\t\t\t}\r\n\t\t\t\t};\r\n\t\t\t\tclient.upload.addEventListener(\"progress\", uploadProgress, false); //监听进度\r\n\t\t\t\t// 设置header\r\n\t\t\t\tif (typeof headers == 'object' && headers) {\r\n\t\t\t\t\tObject.keys(headers).forEach((k) => {\r\n\t\t\t\t\t\tclient.setRequestHeader(k, headers[k]);\r\n\t\t\t\t\t})\r\n\t\t\t\t}\r\n\t\t\t\tclient.send(fmData);\r\n\t\t\t}).then(\r\n\t\t\t\t// 上传成功\r\n\t\t\t\tfunction(resData) {\r\n\t\t\t\t\tif (that.value) {\r\n\t\t\t\t\t\tthat.loading = 2;\r\n\t\t\t\t\t\tthat.$emit('crop-upload-success', resData, field, ki);\r\n\t\t\t\t\t}\r\n\t\t\t\t},\r\n\t\t\t\t// 上传失败\r\n\t\t\t\tfunction(sts) {\r\n\t\t\t\t\tif (that.value) {\r\n\t\t\t\t\t\tthat.loading = 3;\r\n\t\t\t\t\t\tthat.hasError = true;\r\n\t\t\t\t\t\tthat.errorMsg = lang.fail;\r\n\t\t\t\t\t\tthat.$emit('crop-upload-fail', sts, field, ki);\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t);\r\n\t\t}\r\n\t},\r\n\tcreated(){\r\n\t\t// 绑定按键esc隐藏此插件事件\r\n\t\tdocument.addEventListener('keyup', (e)=>{\r\n\t\t\tif(this.value && (e.key == 'Escape' || e.keyCode == 27)){\r\n\t\t\t\tthis.off();\r\n\t\t\t}\r\n\t\t})\r\n\t}\r\n}\r\n\r\n",null]} |