1 line
23 KiB
JSON
1 line
23 KiB
JSON
{"remainingRequest":"D:\\data\\hanguodoushan\\acs2\\nladmin-ui\\node_modules\\babel-loader\\lib\\index.js!D:\\data\\hanguodoushan\\acs2\\nladmin-ui\\node_modules\\cache-loader\\dist\\cjs.js??ref--0-0!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\\babel.config.js","mtime":1732871025888},{"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\n'use strict';\n\nvar _interopRequireDefault = require(\"D:/data/hanguodoushan/acs2/nladmin-ui/node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nrequire(\"core-js/modules/es6.object.keys\");\nrequire(\"core-js/modules/web.dom.iterable\");\nvar _typeof2 = _interopRequireDefault(require(\"D:/data/hanguodoushan/acs2/nladmin-ui/node_modules/@babel/runtime/helpers/typeof.js\"));\nrequire(\"core-js/modules/es6.function.name\");\nrequire(\"core-js/modules/es6.number.constructor\");\nvar _language = _interopRequireDefault(require(\"./utils/language.js\"));\nvar _mimes = _interopRequireDefault(require(\"./utils/mimes.js\"));\nvar _data2blob = _interopRequireDefault(require(\"./utils/data2blob.js\"));\nvar _effectRipple = _interopRequireDefault(require(\"./utils/effectRipple.js\"));\nvar _default = exports.default = {\n props: {\n // 域，上传文件name，触发事件会带上（如果一个页面多个图片上传控件，可以做区分\n field: {\n type: String,\n 'default': 'avatar'\n },\n // 原名key，类似于id，触发事件会带上（如果一个页面多个图片上传控件，可以做区分\n ki: {\n 'default': 0\n },\n // 显示该控件与否\n value: {\n 'default': true\n },\n // 上传地址\n url: {\n type: String,\n 'default': ''\n },\n // 其他要上传文件附带的数据，对象格式\n params: {\n type: Object,\n 'default': null\n },\n //Add custom headers\n headers: {\n type: Object,\n 'default': null\n },\n // 剪裁图片的宽\n width: {\n type: Number,\n default: 200\n },\n // 剪裁图片的高\n height: {\n type: Number,\n default: 200\n },\n // 不显示旋转功能\n noRotate: {\n type: Boolean,\n default: true\n },\n // 不预览圆形图片\n noCircle: {\n type: Boolean,\n default: false\n },\n // 不预览方形图片\n noSquare: {\n type: Boolean,\n default: false\n },\n // 单文件大小限制\n maxSize: {\n type: Number,\n 'default': 10240\n },\n // 语言类型\n langType: {\n type: String,\n 'default': 'zh'\n },\n // 语言包\n langExt: {\n type: Object,\n 'default': null\n },\n // 图片上传格式\n imgFormat: {\n type: String,\n 'default': 'png'\n },\n // 图片背景 jpg情况下生效\n imgBgc: {\n type: String,\n 'default': '#fff'\n },\n // 是否支持跨域\n withCredentials: {\n type: Boolean,\n 'default': false\n },\n method: {\n type: String,\n 'default': 'POST'\n }\n },\n data: function data() {\n var that = this,\n imgFormat = that.imgFormat,\n langType = that.langType,\n langExt = that.langExt,\n width = that.width,\n height = that.height,\n isSupported = true,\n allowImgFormat = ['jpg', 'png'],\n tempImgFormat = allowImgFormat.indexOf(imgFormat) === -1 ? 'jpg' : imgFormat,\n lang = _language.default[langType] ? _language.default[langType] : _language.default['en'],\n mime = _mimes.default[tempImgFormat];\n\n // 规范图片格式\n that.imgFormat = tempImgFormat;\n if (langExt) {\n Object.assign(lang, langExt);\n }\n if (typeof FormData != 'function') {\n isSupported = false;\n }\n return {\n // 图片的mime\n mime: mime,\n // 语言包\n lang: lang,\n // 浏览器是否支持该控件\n isSupported: isSupported,\n // 浏览器是否支持触屏事件\n isSupportTouch: document.hasOwnProperty(\"ontouchstart\"),\n // 步骤\n step: 1,\n //1选择文件 2剪裁 3上传\n\n // 上传状态及进度\n loading: 0,\n //0未开始 1正在 2成功 3错误\n progress: 0,\n // 是否有错误及错误信息\n hasError: false,\n errorMsg: '',\n // 需求图宽高比\n ratio: width / height,\n // 原图地址、生成图片地址\n sourceImg: null,\n sourceImgUrl: '',\n createImgUrl: '',\n // 原图片拖动事件初始值\n sourceImgMouseDown: {\n on: false,\n mX: 0,\n //鼠标按下的坐标\n mY: 0,\n x: 0,\n //scale原图坐标\n y: 0\n },\n // 生成图片预览的容器大小\n previewContainer: {\n width: 100,\n height: 100\n },\n // 原图容器宽高\n sourceImgContainer: {\n // sic\n width: 240,\n height: 184 // 如果生成图比例与此一致会出现bug，先改成特殊的格式吧，哈哈哈\n },\n // 原图展示属性\n scale: {\n zoomAddOn: false,\n //按钮缩放事件开启\n zoomSubOn: false,\n //按钮缩放事件开启\n range: 1,\n //最大100\n\n x: 0,\n y: 0,\n width: 0,\n height: 0,\n maxWidth: 0,\n maxHeight: 0,\n minWidth: 0,\n //最宽\n minHeight: 0,\n naturalWidth: 0,\n //原宽\n naturalHeight: 0\n }\n };\n },\n computed: {\n // 进度条样式\n progressStyle: function progressStyle() {\n var progress = this.progress;\n return {\n width: progress + '%'\n };\n },\n // 原图样式\n sourceImgStyle: function sourceImgStyle() {\n var scale = this.scale,\n sourceImgMasking = this.sourceImgMasking,\n top = scale.y + sourceImgMasking.y + 'px',\n left = scale.x + sourceImgMasking.x + 'px';\n return {\n top: top,\n left: left,\n width: scale.width + 'px',\n height: scale.height + 'px' // 兼容 Opera\n };\n },\n // 原图蒙版属性\n sourceImgMasking: function sourceImgMasking() {\n var width = this.width,\n height = this.height,\n ratio = this.ratio,\n sourceImgContainer = this.sourceImgContainer,\n sic = sourceImgContainer,\n sicRatio = sic.width / sic.height,\n x = 0,\n y = 0,\n w = sic.width,\n h = sic.height,\n scale = 1;\n if (ratio < sicRatio) {\n scale = sic.height / height;\n w = sic.height * ratio;\n x = (sic.width - w) / 2;\n }\n if (ratio > sicRatio) {\n scale = sic.width / width;\n h = sic.width / ratio;\n y = (sic.height - h) / 2;\n }\n return {\n scale: scale,\n // 蒙版相对需求宽高的缩放\n x: x,\n y: y,\n width: w,\n height: h\n };\n },\n // 原图遮罩样式\n sourceImgShadeStyle: function sourceImgShadeStyle() {\n var sourceImgMasking = this.sourceImgMasking,\n sourceImgContainer = this.sourceImgContainer,\n sic = sourceImgContainer,\n sim = sourceImgMasking,\n w = sim.width == sic.width ? sim.width : (sic.width - sim.width) / 2,\n h = sim.height == sic.height ? sim.height : (sic.height - sim.height) / 2;\n return {\n width: w + 'px',\n height: h + 'px'\n };\n },\n previewStyle: function previewStyle() {\n var width = this.width,\n height = this.height,\n ratio = this.ratio,\n previewContainer = this.previewContainer,\n pc = previewContainer,\n w = pc.width,\n h = pc.height,\n pcRatio = w / h;\n if (ratio < pcRatio) {\n w = pc.height * ratio;\n }\n if (ratio > pcRatio) {\n h = pc.width / ratio;\n }\n return {\n width: w + 'px',\n height: h + 'px'\n };\n }\n },\n watch: {\n value: function value(newValue) {\n if (newValue && this.loading != 1) {\n this.reset();\n }\n }\n },\n methods: {\n // 点击波纹效果\n ripple: function ripple(e) {\n (0, _effectRipple.default)(e);\n },\n // 关闭控件\n off: function off() {\n var _this = this;\n setTimeout(function () {\n _this.$emit('input', false);\n if (_this.step == 3 && _this.loading == 2) {\n _this.setStep(1);\n }\n }, 200);\n },\n // 设置步骤\n setStep: function setStep(no) {\n var _this2 = this;\n // 延时是为了显示动画效果呢，哈哈哈\n setTimeout(function () {\n _this2.step = no;\n }, 200);\n },\n /* 图片选择区域函数绑定\r\n ---------------------------------------------------------------*/\n preventDefault: function preventDefault(e) {\n e.preventDefault();\n return false;\n },\n handleClick: function handleClick(e) {\n if (this.loading !== 1) {\n if (e.target !== this.$refs.fileinput) {\n e.preventDefault();\n if (document.activeElement !== this.$refs) {\n this.$refs.fileinput.click();\n }\n }\n }\n },\n handleChange: function handleChange(e) {\n e.preventDefault();\n if (this.loading !== 1) {\n var files = e.target.files || e.dataTransfer.files;\n this.reset();\n if (this.checkFile(files[0])) {\n this.setSourceImg(files[0]);\n }\n }\n },\n /* ---------------------------------------------------------------*/\n // 检测选择的文件是否合适\n checkFile: function checkFile(file) {\n var that = this,\n lang = that.lang,\n maxSize = that.maxSize;\n\n // 仅限图片\n if (file.type.indexOf('image') === -1) {\n that.hasError = true;\n that.errorMsg = lang.error.onlyImg;\n return false;\n }\n\n // 超出大小\n if (file.size / 1024 > maxSize) {\n that.hasError = true;\n that.errorMsg = lang.error.outOfSize + maxSize + 'kb';\n return false;\n }\n return true;\n },\n // 重置控件\n reset: function reset() {\n var that = this;\n that.loading = 0;\n that.hasError = false;\n that.errorMsg = '';\n that.progress = 0;\n },\n // 设置图片源\n setSourceImg: function setSourceImg(file) {\n this.$emit('src-file-set', file.name, file.type, file.size);\n var that = this,\n fr = new FileReader();\n fr.onload = function (e) {\n that.sourceImgUrl = fr.result;\n that.startCrop();\n };\n fr.readAsDataURL(file);\n },\n // 剪裁前准备工作\n startCrop: function startCrop() {\n var that = this,\n width = that.width,\n height = that.height,\n ratio = that.ratio,\n scale = that.scale,\n sourceImgUrl = that.sourceImgUrl,\n sourceImgMasking = that.sourceImgMasking,\n lang = that.lang,\n sim = sourceImgMasking,\n img = new Image();\n img.src = sourceImgUrl;\n img.onload = function () {\n var nWidth = img.naturalWidth,\n nHeight = img.naturalHeight,\n nRatio = nWidth / nHeight,\n w = sim.width,\n h = sim.height,\n x = 0,\n y = 0;\n // 图片像素不达标\n if (nWidth < width || nHeight < height) {\n that.hasError = true;\n that.errorMsg = lang.error.lowestPx + width + '*' + height;\n return false;\n }\n if (ratio > nRatio) {\n h = w / nRatio;\n y = (sim.height - h) / 2;\n }\n if (ratio < nRatio) {\n w = h * nRatio;\n x = (sim.width - w) / 2;\n }\n scale.range = 0;\n scale.x = x;\n scale.y = y;\n scale.width = w;\n scale.height = h;\n scale.minWidth = w;\n scale.minHeight = h;\n scale.maxWidth = nWidth * sim.scale;\n scale.maxHeight = nHeight * sim.scale;\n scale.naturalWidth = nWidth;\n scale.naturalHeight = nHeight;\n that.sourceImg = img;\n that.createImg();\n that.setStep(2);\n };\n },\n // 鼠标按下图片准备移动\n imgStartMove: function imgStartMove(e) {\n e.preventDefault();\n // 支持触摸事件，则鼠标事件无效\n if (this.isSupportTouch && !e.targetTouches) {\n return false;\n }\n var et = e.targetTouches ? e.targetTouches[0] : e,\n sourceImgMouseDown = this.sourceImgMouseDown,\n scale = this.scale,\n simd = sourceImgMouseDown;\n simd.mX = et.screenX;\n simd.mY = et.screenY;\n simd.x = scale.x;\n simd.y = scale.y;\n simd.on = true;\n },\n // 鼠标按下状态下移动，图片移动\n imgMove: function imgMove(e) {\n e.preventDefault();\n // 支持触摸事件，则鼠标事件无效\n if (this.isSupportTouch && !e.targetTouches) {\n return false;\n }\n var et = e.targetTouches ? e.targetTouches[0] : e,\n _this$sourceImgMouseD = this.sourceImgMouseDown,\n on = _this$sourceImgMouseD.on,\n mX = _this$sourceImgMouseD.mX,\n mY = _this$sourceImgMouseD.mY,\n x = _this$sourceImgMouseD.x,\n y = _this$sourceImgMouseD.y,\n scale = this.scale,\n sourceImgMasking = this.sourceImgMasking,\n sim = sourceImgMasking,\n nX = et.screenX,\n nY = et.screenY,\n dX = nX - mX,\n dY = nY - mY,\n rX = x + dX,\n rY = y + dY;\n if (!on) return;\n if (rX > 0) {\n rX = 0;\n }\n if (rY > 0) {\n rY = 0;\n }\n if (rX < sim.width - scale.width) {\n rX = sim.width - scale.width;\n }\n if (rY < sim.height - scale.height) {\n rY = sim.height - scale.height;\n }\n scale.x = rX;\n scale.y = rY;\n },\n // 顺时针旋转图片\n rotateImg: function rotateImg(e) {\n var sourceImg = this.sourceImg,\n _this$scale = this.scale,\n naturalWidth = _this$scale.naturalWidth,\n naturalHeight = _this$scale.naturalHeight,\n width = naturalHeight,\n height = naturalWidth,\n canvas = this.$refs.canvas,\n ctx = canvas.getContext('2d');\n canvas.width = width;\n canvas.height = height;\n ctx.clearRect(0, 0, width, height);\n ctx.fillStyle = 'rgba(0,0,0,0)';\n ctx.fillRect(0, 0, width, height);\n ctx.translate(width, 0);\n ctx.rotate(Math.PI * 90 / 180);\n ctx.drawImage(sourceImg, 0, 0, naturalWidth, naturalHeight);\n var imgUrl = canvas.toDataURL(_mimes.default['png']);\n this.sourceImgUrl = imgUrl;\n this.startCrop();\n },\n // 按钮按下开始放大\n startZoomAdd: function startZoomAdd(e) {\n var that = this,\n scale = that.scale;\n scale.zoomAddOn = true;\n function zoom() {\n if (scale.zoomAddOn) {\n var range = scale.range >= 100 ? 100 : ++scale.range;\n that.zoomImg(range);\n setTimeout(function () {\n zoom();\n }, 60);\n }\n }\n zoom();\n },\n // 按钮松开或移开取消放大\n endZoomAdd: function endZoomAdd(e) {\n this.scale.zoomAddOn = false;\n },\n // 按钮按下开始缩小\n startZoomSub: function startZoomSub(e) {\n var that = this,\n scale = that.scale;\n scale.zoomSubOn = true;\n function zoom() {\n if (scale.zoomSubOn) {\n var range = scale.range <= 0 ? 0 : --scale.range;\n that.zoomImg(range);\n setTimeout(function () {\n zoom();\n }, 60);\n }\n }\n zoom();\n },\n // 按钮松开或移开取消缩小\n endZoomSub: function endZoomSub(e) {\n var scale = this.scale;\n scale.zoomSubOn = false;\n },\n zoomChange: function zoomChange(e) {\n this.zoomImg(e.target.value);\n },\n // 缩放原图\n zoomImg: function zoomImg(newRange) {\n var that = this,\n sourceImgMasking = this.sourceImgMasking,\n sourceImgMouseDown = this.sourceImgMouseDown,\n scale = this.scale,\n maxWidth = scale.maxWidth,\n maxHeight = scale.maxHeight,\n minWidth = scale.minWidth,\n minHeight = scale.minHeight,\n width = scale.width,\n height = scale.height,\n x = scale.x,\n y = scale.y,\n range = scale.range,\n sim = sourceImgMasking,\n sWidth = sim.width,\n sHeight = sim.height,\n nWidth = minWidth + (maxWidth - minWidth) * newRange / 100,\n nHeight = minHeight + (maxHeight - minHeight) * newRange / 100,\n nX = sWidth / 2 - nWidth / width * (sWidth / 2 - x),\n nY = sHeight / 2 - nHeight / height * (sHeight / 2 - y);\n\n // 判断新坐标是否超过蒙版限制\n if (nX > 0) {\n nX = 0;\n }\n if (nY > 0) {\n nY = 0;\n }\n if (nX < sWidth - nWidth) {\n nX = sWidth - nWidth;\n }\n if (nY < sHeight - nHeight) {\n nY = sHeight - nHeight;\n }\n\n // 赋值处理\n scale.x = nX;\n scale.y = nY;\n scale.width = nWidth;\n scale.height = nHeight;\n scale.range = newRange;\n setTimeout(function () {\n if (scale.range == newRange) {\n that.createImg();\n }\n }, 300);\n },\n // 生成需求图片\n createImg: function createImg(e) {\n var that = this,\n imgFormat = that.imgFormat,\n imgBgc = that.imgBgc,\n mime = that.mime,\n sourceImg = that.sourceImg,\n _that$scale = that.scale,\n x = _that$scale.x,\n y = _that$scale.y,\n width = _that$scale.width,\n height = _that$scale.height,\n scale = that.sourceImgMasking.scale,\n canvas = that.$refs.canvas,\n ctx = canvas.getContext('2d');\n if (e) {\n // 取消鼠标按下移动状态\n that.sourceImgMouseDown.on = false;\n }\n canvas.width = that.width;\n canvas.height = that.height;\n ctx.clearRect(0, 0, that.width, that.height);\n if (imgFormat == 'png') {\n ctx.fillStyle = 'rgba(0,0,0,0)';\n } else {\n // 如果jpg 为透明区域设置背景，默认白色\n ctx.fillStyle = imgBgc;\n }\n ctx.fillRect(0, 0, that.width, that.height);\n ctx.drawImage(sourceImg, x / scale, y / scale, width / scale, height / scale);\n that.createImgUrl = canvas.toDataURL(mime);\n },\n prepareUpload: function prepareUpload() {\n var url = this.url,\n createImgUrl = this.createImgUrl,\n field = this.field,\n ki = this.ki;\n this.$emit('crop-success', createImgUrl, field, ki);\n if (typeof url == 'string' && url) {\n this.upload();\n } else {\n this.off();\n }\n },\n // 上传图片\n upload: function upload() {\n var that = this,\n lang = this.lang,\n imgFormat = this.imgFormat,\n mime = this.mime,\n url = this.url,\n params = this.params,\n headers = this.headers,\n field = this.field,\n ki = this.ki,\n createImgUrl = this.createImgUrl,\n withCredentials = this.withCredentials,\n method = this.method,\n fmData = new FormData();\n fmData.append(field, (0, _data2blob.default)(createImgUrl, mime), field + '.' + imgFormat);\n\n // 添加其他参数\n if ((0, _typeof2.default)(params) == 'object' && params) {\n Object.keys(params).forEach(function (k) {\n fmData.append(k, params[k]);\n });\n }\n\n // 监听进度回调\n var uploadProgress = function uploadProgress(event) {\n if (event.lengthComputable) {\n that.progress = 100 * Math.round(event.loaded) / event.total;\n }\n };\n\n // 上传文件\n that.reset();\n that.loading = 1;\n that.setStep(3);\n new Promise(function (resolve, reject) {\n var client = new XMLHttpRequest();\n client.open(method, url, true);\n client.withCredentials = withCredentials;\n client.onreadystatechange = function () {\n if (this.readyState !== 4) {\n return;\n }\n if (this.status === 200 || this.status === 201) {\n resolve(JSON.parse(this.responseText));\n } else {\n reject(this.status);\n }\n };\n client.upload.addEventListener(\"progress\", uploadProgress, false); //监听进度\n // 设置header\n if ((0, _typeof2.default)(headers) == 'object' && headers) {\n Object.keys(headers).forEach(function (k) {\n client.setRequestHeader(k, headers[k]);\n });\n }\n client.send(fmData);\n }).then(\n // 上传成功\n function (resData) {\n if (that.value) {\n that.loading = 2;\n that.$emit('crop-upload-success', resData, field, ki);\n }\n },\n // 上传失败\n function (sts) {\n if (that.value) {\n that.loading = 3;\n that.hasError = true;\n that.errorMsg = lang.fail;\n that.$emit('crop-upload-fail', sts, field, ki);\n }\n });\n }\n },\n created: function created() {\n var _this3 = this;\n // 绑定按键esc隐藏此插件事件\n document.addEventListener('keyup', function (e) {\n if (_this3.value && (e.key == 'Escape' || e.keyCode == 27)) {\n _this3.off();\n }\n });\n }\n};",null]} |