| 1 |
- {"remainingRequest":"/Users/caoge/Desktop/地质现场/VehicleMonitor-WEB/node_modules/vue-loader/lib/index.js??vue-loader-options!/Users/caoge/Desktop/地质现场/VehicleMonitor-WEB/node_modules/hevue-img-preview/hevue-img-preview.vue?vue&type=style&index=0&id=3f0ac62e&scoped=true&lang=css","dependencies":[{"path":"/Users/caoge/Desktop/地质现场/VehicleMonitor-WEB/node_modules/hevue-img-preview/hevue-img-preview.vue","mtime":1708395147479},{"path":"/Users/caoge/Desktop/地质现场/VehicleMonitor-WEB/node_modules/css-loader/dist/cjs.js","mtime":1708395146948},{"path":"/Users/caoge/Desktop/地质现场/VehicleMonitor-WEB/node_modules/vue-loader/lib/loaders/stylePostLoader.js","mtime":1708395147772},{"path":"/Users/caoge/Desktop/地质现场/VehicleMonitor-WEB/node_modules/postcss-loader/src/index.js","mtime":1708395147225},{"path":"/Users/caoge/Desktop/地质现场/VehicleMonitor-WEB/node_modules/cache-loader/dist/cjs.js","mtime":1708395146433},{"path":"/Users/caoge/Desktop/地质现场/VehicleMonitor-WEB/node_modules/vue-loader/lib/index.js","mtime":1708395147382}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:CgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCg0KQGltcG9ydCAnLi9pY29uZm9udC9pY29uZm9udC5jc3MnOw0KQGltcG9ydCAnLi9jc3MvZGVmYXVsdC5jc3MnOw0K"},{"version":3,"sources":["hevue-img-preview.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkhBA;AACA","file":"hevue-img-preview.vue","sourceRoot":"node_modules/hevue-img-preview","sourcesContent":["<!--\r\n * @Author: 贺永胜\r\n * @Date: 2021-04-19 16:39:30\r\n * @email: 1378431028@qq.com\r\n * @LastEditors: 贺永胜\r\n * @LastEditTime: 2023-03-28 16:28:25\r\n * @Description: file content\r\n-->\r\n\r\n<!--\r\n * __----~~~~~~~~~~~------___\r\n * . . ~~//====...... __--~ ~~\r\n * -. \\_|// |||\\\\ ~~~~~~::::... /~\r\n * ___-==_ _-~o~ \\/ ||| \\\\ _/~~-\r\n * __---~~~.==~||\\=_ -_--~/_-~|- |\\\\ \\\\ _/~\r\n * _-~~ .=~ | \\\\-_ '-~7 /- / || \\ /\r\n * .~ .~ | \\\\ -_ / /- / || \\ /\r\n * / ____ / | \\\\ ~-_/ /|- _/ .|| \\ /\r\n * |~~ ~~|--~~~~--_ \\ ~==-/ | \\~--===~~ .\\\r\n * ' ~-| /| |-~\\~~ __--~~\r\n * |-~~-_/ | | ~\\_ _-~ /\\\r\n * / \\ \\__ \\/~ \\__\r\n * _--~ _/ | .-~~____--~-/ ~~==.\r\n * ((->/~ '.|||' -_| ~~-/ , . _||\r\n * -_ ~\\ ~~---l__i__i__i--~~_/\r\n * _-~-__ ~) \\--______________--~~\r\n * //.-~~~-~_--~- |-------~~~~~~~~\r\n * //.-~~~--\\\r\n * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\r\n * \r\n * 神兽保佑 永无BUG\r\n -->\r\n\r\n<template>\r\n <transition name=\"fade\">\r\n <div\r\n class=\"hevue-imgpreview-wrap\"\r\n id=\"hevue-imgpreview-wrap\"\r\n v-if=\"visible\"\r\n ref=\"heImg\"\r\n @mouseup=\"removeMove('pc')\"\r\n @touchend=\"removeMove('mobile')\"\r\n @click.stop=\"clickMask\"\r\n >\r\n <div class=\"he-img-wrap\">\r\n <div\r\n class=\"heimgfont hevue-img-status-icon rotate-animation\"\r\n v-show=\"imgState === 1\"\r\n >\r\n \r\n </div>\r\n <!-- <div class=\"heimgfont loading\"></div> -->\r\n <img\r\n :src=\"imgurl\"\r\n ref=\"heImView\"\r\n @click.stop=\"\"\r\n v-show=\"imgState === 2\"\r\n class=\"he-img-view\"\r\n :style=\"\r\n 'transform: scale(' +\r\n imgScale +\r\n ') rotate(' +\r\n imgRotate +\r\n 'deg);margin-top:' +\r\n imgTop +\r\n 'px;margin-left:' +\r\n imgLeft +\r\n 'px;' +\r\n maxWH\r\n \"\r\n @mousedown=\"addMove\"\r\n @touchstart=\"addMoveMobile\"\r\n />\r\n <!-- 图片加载失败 -->\r\n <div class=\"heimgfont hevue-img-status-icon\" v-show=\"imgState === 3\">\r\n \r\n </div>\r\n <!-- 关闭按钮 -->\r\n <div\r\n class=\"heimgfont he-close-icon\"\r\n @click.stop=\"close({ way: 'closeBtn' })\"\r\n v-if=\"closeBtn\"\r\n >\r\n \r\n </div>\r\n <!-- 左箭头 -->\r\n <div\r\n class=\"arrow arrow-left heimgfont\"\r\n @click.stop=\"toogleImg(false, 'btn')\"\r\n v-if=\"arrowBtn && multiple\"\r\n >\r\n \r\n </div>\r\n <!-- 右箭头 -->\r\n <div\r\n class=\"arrow arrow-right heimgfont\"\r\n @click.stop=\"toogleImg(true, 'btn')\"\r\n v-if=\"arrowBtn && multiple\"\r\n >\r\n \r\n </div>\r\n <!-- 控制条 -->\r\n <div class=\"he-control-bar-wrap\" v-if=\"controlBar\">\r\n <div class=\"he-control-bar\" @click.stop>\r\n <!-- 缩小 -->\r\n <div\r\n class=\"he-control-btn heimgfont\"\r\n @click.stop=\"scaleFunc(-0.15)\"\r\n >\r\n \r\n </div>\r\n <!-- 放大 -->\r\n <div class=\"he-control-btn heimgfont\" @click.stop=\"scaleFunc(0.15)\">\r\n \r\n </div>\r\n <!-- 复位 -->\r\n <div\r\n class=\"he-control-btn heimgfont\"\r\n v-show=\"isFull\"\r\n @click.stop=\"imgToggle\"\r\n >\r\n \r\n </div>\r\n <!-- 复位 -->\r\n <div\r\n class=\"he-control-btn heimgfont\"\r\n v-show=\"!isFull\"\r\n @click.stop=\"imgToggle\"\r\n >\r\n \r\n </div>\r\n <!-- 左转 -->\r\n <div class=\"he-control-btn heimgfont\" @click.stop=\"rotateFunc(-90)\">\r\n \r\n </div>\r\n <!-- 右转 -->\r\n <div class=\"he-control-btn heimgfont\" @click.stop=\"rotateFunc(90)\">\r\n \r\n </div>\r\n <!-- 下载 -->\r\n <!-- <div class=\"he-control-btn heimgfont\" @click.stop=\"downloadIamge\">\r\n \r\n </div> -->\r\n </div>\r\n </div>\r\n <!-- 页码指示器 -->\r\n <div class=\"he-control-num\" v-if=\"controlBar && multiple\">\r\n {{ imgIndex + 1 }} / {{ imgList.length }}\r\n </div>\r\n </div>\r\n </div>\r\n </transition>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n name: 'hevue-img-preview',\r\n data() {\r\n return {\r\n // imgWidth: 0,\r\n // imgHeight: 0,\r\n visible: false, // 插件显示，默认为false\r\n imgScale: 1,\r\n imgTop: 0,\r\n imgLeft: 0,\r\n imgRotate: 0,\r\n isFull: false,\r\n maxWH: 'max-width:100%;max-height:100%;',\r\n clientX: 0,\r\n clientY: 0,\r\n imgIndex: 0,\r\n canRun: true,\r\n imgurl: '',\r\n imgState: 1,\r\n start: [{}, {}],\r\n mobileScale: 0, // 手指离开时图片的缩放比例\r\n // 以下内容为用户传入配置\r\n // show: true, // 插件显示，默认为false\r\n url: '', // 预览图片的地址\r\n nowImgIndex: 0,\r\n multiple: false,\r\n imgList: [],\r\n // 以下为可全局配置\r\n controlBar: true,\r\n closeBtn: true,\r\n arrowBtn: true,\r\n keyboard: false,\r\n clickMaskCLose: false, // 是否点击遮罩关闭，默认false\r\n closeFn: null, // 关闭回调函数\r\n changeFn: null, // 切换图片回调函数\r\n }\r\n },\r\n mounted() {\r\n this.initImg()\r\n },\r\n watch: {\r\n url() {\r\n this.initImg()\r\n },\r\n visible: {\r\n handler(newV) {\r\n if (newV) {\r\n this.$nextTick(() => {\r\n let _dom = document.getElementById('hevue-imgpreview-wrap')\r\n _dom.onmousewheel = this.scrollFunc\r\n // 火狐浏览器没有onmousewheel事件，用DOMMouseScroll代替(滚轮事件)\r\n document.body.addEventListener('DOMMouseScroll', this.scrollFunc)\r\n // 禁止火狐浏览器下拖拽图片的默认事件\r\n document.ondragstart = function () {\r\n return false\r\n }\r\n // 判断是否多图\r\n if (this.multiple) {\r\n if (Array.isArray(this.imgList) && this.imgList.length > 0) {\r\n this.imgIndex = Number(this.nowImgIndex) || 0\r\n // this.url = this.imgList[this.imgIndex]\r\n this.changeUrl(this.imgList[this.imgIndex], this.imgIndex)\r\n } else {\r\n // console.error(\"imgList 为空或格式不正确\");\r\n }\r\n } else {\r\n this.changeUrl(this.url)\r\n }\r\n // 判断是否开启键盘事件\r\n if (this.keyboard) {\r\n document.addEventListener('keydown', this.keyHandleDebounce)\r\n }\r\n })\r\n }\r\n },\r\n immediate: true,\r\n },\r\n },\r\n methods: {\r\n show() {\r\n this.visible = true\r\n },\r\n close(data) {\r\n this.initImg()\r\n // this.maxWH = \"max-width:100%;max-height:100%;\";\r\n // this.isFull = false;\r\n // 移除火狐浏览器下的鼠标滚动事件\r\n document.body.removeEventListener('DOMMouseScroll', this.scrollFunc)\r\n //恢复火狐及Safari浏览器下的图片拖拽\r\n document.ondragstart = null\r\n // 移除键盘事件\r\n if (this.keyboard) {\r\n document.removeEventListener('keydown', this.keyHandleDebounce)\r\n }\r\n this.visible = false\r\n this.closeFn && this.closeFn(data)\r\n },\r\n initImg() {\r\n this.mobileScale = 1\r\n this.imgScale = 1\r\n this.imgRotate = 0\r\n this.imgTop = 0\r\n this.imgLeft = 0\r\n },\r\n /**\r\n * 切换图片\r\n * true 下一张\r\n * false 上一张\r\n */\r\n toogleImg(bool, way) {\r\n let fromIndex = this.imgIndex\r\n if (bool) {\r\n this.imgIndex++\r\n if (this.imgIndex > this.imgList.length - 1) {\r\n this.imgIndex = 0\r\n }\r\n } else {\r\n this.imgIndex--\r\n if (this.imgIndex < 0) {\r\n this.imgIndex = this.imgList.length - 1\r\n }\r\n }\r\n this.changeFn &&\r\n this.changeFn({\r\n type: bool ? 'next' : 'prev',\r\n fromImgIndex: fromIndex,\r\n fromImgUrl: this.imgList[fromIndex],\r\n toImgIndex: this.imgIndex,\r\n toImgUrl: this.imgList[this.imgIndex],\r\n way,\r\n })\r\n // this.url = this.imgList[this.imgIndex]\r\n this.changeUrl(this.imgList[this.imgIndex], this.imgIndex)\r\n },\r\n // 改变图片地址\r\n /**\r\n * @description:\r\n * @param {String} url 要显示的图片的url\r\n * @param {Number} index 当前显示当图片下标，防止用户点击切换图片过快\r\n * @return {*}\r\n */\r\n changeUrl(url, index) {\r\n this.imgState = 1\r\n let img = new Image()\r\n img.src = url\r\n img.onload = () => {\r\n // 如果加载出来图片当下标不是当前显示图片当下标，则不予显示（用户点击过快当时候，会出现用户点到第三张了，此时第一张图片才加载完当情况）\r\n if (index != undefined && index == this.imgIndex) {\r\n this.imgState = 2\r\n this.imgurl = url\r\n } else if (index == undefined) {\r\n this.imgState = 2\r\n this.imgurl = url\r\n }\r\n }\r\n img.onerror = () => {\r\n if (index != undefined && index == this.imgIndex) {\r\n this.imgState = 3\r\n } else if (index == undefined) {\r\n this.imgState = 3\r\n }\r\n }\r\n },\r\n // 旋转图片\r\n rotateFunc(deg) {\r\n this.imgRotate += deg\r\n },\r\n // 图片缩放\r\n scaleFunc(num, bool) {\r\n if (this.imgScale <= 0.2 && num < 0) return\r\n if (bool) {\r\n this.imgScale = num\r\n } else {\r\n this.imgScale += num\r\n }\r\n },\r\n // 图片原尺寸切换\r\n imgToggle() {\r\n this.initImg()\r\n if (this.isFull) {\r\n this.maxWH = 'max-width:100%;max-height:100%;'\r\n } else {\r\n this.maxWH = ''\r\n }\r\n this.isFull = !this.isFull\r\n },\r\n // 鼠标滚轮缩放\r\n scrollFunc(e) {\r\n e = e || window.event\r\n // e.returnValue = false // ie\r\n // 火狐下没有wheelDelta，用detail代替，由于detail值的正负和wheelDelta相反，所以取反\r\n e.delta = e.wheelDelta || -e.detail\r\n\r\n e.preventDefault()\r\n if (e.delta > 0) {\r\n //当滑轮向上滚动时\r\n this.scaleFunc(0.05)\r\n }\r\n if (e.delta < 0) {\r\n //当滑轮向下滚动时\r\n this.scaleFunc(-0.05)\r\n }\r\n },\r\n // 鼠标按下\r\n addMove(e) {\r\n e = e || window.event\r\n this.clientX = e.clientX\r\n this.clientY = e.clientY\r\n this.$refs.heImg.onmousemove = this.moveFunc\r\n },\r\n // 手指按下事件\r\n addMoveMobile(e) {\r\n e.preventDefault()\r\n e = e || window.event\r\n if (e.touches.length > 1) {\r\n this.start = e.touches\r\n } else {\r\n this.clientX = e.touches[0].pageX\r\n this.clientY = e.touches[0].pageY\r\n }\r\n // 添加手指拖动事件\r\n this.$refs.heImg.ontouchmove = this.moveFuncMobile\r\n },\r\n // 鼠标拖动\r\n moveFunc(e) {\r\n e = e || window.event\r\n e.preventDefault()\r\n let movementX = e.clientX - this.clientX\r\n let movementY = e.clientY - this.clientY\r\n // event.clientY;\r\n this.imgLeft += movementX * 2\r\n this.imgTop += movementY * 2\r\n this.clientX = e.clientX\r\n this.clientY = e.clientY\r\n },\r\n // 手指拖动\r\n moveFuncMobile(e) {\r\n e = e || window.event\r\n if (e.touches.length > 1) {\r\n var now = e.touches\r\n var scale =\r\n this.getDistance(now[0], now[1]) /\r\n this.getDistance(this.start[0], this.start[1])\r\n // 判断是否手指缩放过，如果缩放过，要在上次缩放的比例基础上进行缩放\r\n if (this.mobileScale) {\r\n if (scale > 1) {\r\n // 放大\r\n this.scaleFunc(scale + this.mobileScale - 1, true)\r\n } else {\r\n // 缩小\r\n this.scaleFunc(scale * this.mobileScale, true)\r\n }\r\n } else {\r\n this.scaleFunc(scale, true)\r\n }\r\n } else {\r\n let touch = e.touches[0]\r\n e.preventDefault()\r\n let movementX = touch.pageX - this.clientX\r\n let movementY = touch.pageY - this.clientY\r\n // event.clientY;\r\n this.imgLeft += movementX * 2\r\n this.imgTop += movementY * 2\r\n this.clientX = touch.pageX\r\n this.clientY = touch.pageY\r\n }\r\n },\r\n // 移除拖动事件\r\n removeMove(type) {\r\n if (type === 'pc') {\r\n this.$refs.heImg.onmousemove = null\r\n } else {\r\n this.mobileScale = this.imgScale\r\n this.$refs.heImg.ontouchmove = null\r\n }\r\n },\r\n keyHandleDebounce(e) {\r\n if (this.canRun) {\r\n // 如果this.canRun为true证明当前可以执行函数\r\n this.keyHandle(e)\r\n this.canRun = false // 执行函数后一段时间内不可再次执行\r\n setTimeout(() => {\r\n this.canRun = true // 等到了我们设定的时间之后，把this.canRun改为true，可以再次执行函数\r\n }, 300)\r\n }\r\n },\r\n // 键盘事件\r\n keyHandle(e) {\r\n e = window.event || e\r\n var key = e.keyCode || e.which || e.charCode\r\n switch (key) {\r\n case 27: // esc\r\n this.close({ way: 'esc' })\r\n break\r\n case 65: // a键-上一张\r\n if (this.multiple) {\r\n this.toogleImg(false, 'key-a')\r\n }\r\n break\r\n case 68: // d键-下一张\r\n if (this.multiple) {\r\n this.toogleImg(true, 'key-d')\r\n }\r\n break\r\n case 87: // w键-放大\r\n this.scaleFunc(0.15)\r\n break\r\n case 83: // s键-缩小\r\n this.scaleFunc(-0.15)\r\n break\r\n case 81: // q键-逆时针旋转\r\n this.rotateFunc(-90)\r\n break\r\n case 69: // e键-顺时针旋转\r\n this.rotateFunc(90)\r\n break\r\n case 82: // r键-复位键\r\n this.initImg()\r\n break\r\n\r\n default:\r\n break\r\n }\r\n },\r\n // 点击遮罩层\r\n clickMask() {\r\n if (this.clickMaskCLose) {\r\n this.close({ way: 'mask' })\r\n }\r\n },\r\n //缩放 勾股定理方法-求两点之间的距离\r\n getDistance(p1, p2) {\r\n var x = p2.pageX - p1.pageX,\r\n y = p2.pageY - p1.pageY\r\n return Math.sqrt(x * x + y * y)\r\n },\r\n /**\r\n * @description:\r\n * @param {String} imgsrc\r\n * @param {*} name\r\n * @return {*}\r\n */\r\n downloadIamge() {\r\n //下载图片地址和图片名\r\n let image = new Image()\r\n // 解决跨域 Canvas 污染问题\r\n image.setAttribute('crossOrigin', 'anonymous')\r\n image.onload = function () {\r\n let canvas = document.createElement('canvas')\r\n canvas.width = image.width\r\n canvas.height = image.height\r\n let context = canvas.getContext('2d')\r\n context.drawImage(image, 0, 0, image.width, image.height)\r\n let url = canvas.toDataURL('image/png') //得到图片的base64编码数据\r\n let a = document.createElement('a') // 生成一个a元素\r\n let event = new MouseEvent('click') // 创建一个单击事件\r\n a.download = 'photo' + +new Date() // 设置图片名称\r\n a.href = url // 将生成的URL设置为a.href属性\r\n a.dispatchEvent(event) // 触发a的单击事件\r\n }\r\n image.onerror = function (err) {\r\n console.log('图片信息不正确或图片服务器禁止访问')\r\n console.log(err)\r\n }\r\n if (this.multiple) {\r\n image.src = this.imgList[this.imgIndex]\r\n } else {\r\n image.src = this.url\r\n }\r\n },\r\n },\r\n}\r\n</script>\r\n\r\n<style scoped>\r\n@import './iconfont/iconfont.css';\r\n@import './css/default.css';\r\n</style>\r\n"]}]}
|
