| 1 |
- {"remainingRequest":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\src\\components\\cropperImg\\index.vue?vue&type=style&index=0&id=197b9909&scoped=true&lang=scss","dependencies":[{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\src\\components\\cropperImg\\index.vue","mtime":1761185179957},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\css-loader\\index.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\postcss-loader\\src\\index.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\sass-loader\\dist\\cjs.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:DQouYnRuIHsNCiAgb3V0bGluZTogbm9uZTsNCiAgZGlzcGxheTogaW5saW5lLWJsb2NrOw0KICBsaW5lLWhlaWdodDogMTsNCiAgd2hpdGUtc3BhY2U6IG5vd3JhcDsNCiAgY3Vyc29yOiBwb2ludGVyOw0KICAtd2Via2l0LWFwcGVhcmFuY2U6IG5vbmU7DQogIHRleHQtYWxpZ246IGNlbnRlcjsNCiAgLXdlYmtpdC1ib3gtc2l6aW5nOiBib3JkZXItYm94Ow0KICBib3gtc2l6aW5nOiBib3JkZXItYm94Ow0KICBvdXRsaW5lOiAwOw0KICAtd2Via2l0LXRyYW5zaXRpb246IDAuMXM7DQogIHRyYW5zaXRpb246IDAuMXM7DQogIGZvbnQtd2VpZ2h0OiA1MDA7DQogIHBhZGRpbmc6IDhweCAxNXB4Ow0KICBmb250LXNpemU6IDEycHg7DQogIGJvcmRlci1yYWRpdXM6IDNweDsNCiAgY29sb3I6ICNmZmY7DQogIGJhY2tncm91bmQtY29sb3I6ICM0MDllZmY7DQogIGJvcmRlci1jb2xvcjogIzQwOWVmZjsNCiAgbWFyZ2luLXJpZ2h0OiAxMHB4Ow0KfQ0KLmNyb3BwZXItY29udGVudCB7DQogIGRpc3BsYXk6IGZsZXg7DQogIGRpc3BsYXk6IC13ZWJraXQtZmxleDsNCiAganVzdGlmeS1jb250ZW50OiBmbGV4LWVuZDsNCiAgLmNyb3BwZXItYm94IHsNCiAgICBmbGV4OiAxOw0KICAgIHdpZHRoOiAxMDAlOw0KICAgIC5jcm9wcGVyIHsNCiAgICAgIHdpZHRoOiBhdXRvOw0KICAgICAgaGVpZ2h0OiAzMDBweDsNCiAgICB9DQogIH0NCg0KICAuc2hvdy1wcmV2aWV3IHsNCiAgICBmbGV4OiAxOw0KICAgIGRpc3BsYXk6IGZsZXg7DQogICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjsNCiAgICBqdXN0aWZ5LWNvbnRlbnQ6IGZsZXgtc3RhcnQ7DQogICAgYWxpZ24taXRlbXM6IGNlbnRlcjsNCiAgICAucHJldmlldyB7DQogICAgICBvdmVyZmxvdzogaGlkZGVuOw0KICAgICAgaGVpZ2h0OiAyMDBweDsNCiAgICAgIHdpZHRoOiAyMDBweDsNCiAgICAgIGJhY2tncm91bmQ6ICNjY2NjY2M7DQogICAgICB0cmFuc2Zvcm06IHNjYWxlKDAuOCk7DQogICAgICBib3JkZXItcmFkaXVzOiA1MCU7DQogICAgfQ0KICB9DQp9DQouZm9vdGVyLWJ0biB7DQogIG1hcmdpbi10b3A6IDMwcHg7DQogIGRpc3BsYXk6IGZsZXg7DQogIGRpc3BsYXk6IC13ZWJraXQtZmxleDsNCiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1hcm91bmQ7DQogIC5zY29wZS1idG4gew0KICAgIGRpc3BsYXk6IGZsZXg7DQogICAgZGlzcGxheTogLXdlYmtpdC1mbGV4Ow0KICAgIGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjsNCiAgICBwYWRkaW5nLXJpZ2h0OiAxMHB4Ow0KICB9DQogIC51cGxvYWQtYnRuIHsNCiAgICBmbGV4OiAxOw0KICAgIC13ZWJraXQtZmxleDogMTsNCiAgICBkaXNwbGF5OiBmbGV4Ow0KICAgIGRpc3BsYXk6IC13ZWJraXQtZmxleDsNCiAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsNCiAgfQ0KfQ0K"},{"version":3,"sources":["index.vue"],"names":[],"mappings":";AAmNA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"index.vue","sourceRoot":"src/components/cropperImg","sourcesContent":["<template>\r\n <div class=\"cropper-content\">\r\n <div class=\"cropper-box\">\r\n <div class=\"cropper\">\r\n <vue-cropper\r\n ref=\"cropper\"\r\n :img=\"option.img\"\r\n :outputSize=\"option.outputSize\"\r\n :outputType=\"option.outputType\"\r\n :info=\"option.info\"\r\n :canScale=\"option.canScale\"\r\n :autoCrop=\"option.autoCrop\"\r\n :autoCropWidth=\"option.autoCropWidth\"\r\n :autoCropHeight=\"option.autoCropHeight\"\r\n :fixed=\"option.fixed\"\r\n :fixedNumber=\"option.fixedNumber\"\r\n :full=\"option.full\"\r\n :fixedBox=\"option.fixedBox\"\r\n :canMove=\"option.canMove\"\r\n :canMoveBox=\"option.canMoveBox\"\r\n :original=\"option.original\"\r\n :centerBox=\"option.centerBox\"\r\n :height=\"option.height\"\r\n :infoTrue=\"option.infoTrue\"\r\n :maxImgSize=\"option.maxImgSize\"\r\n :enlarge=\"option.enlarge\"\r\n :mode=\"option.mode\"\r\n @realTime=\"realTime\"\r\n @imgLoad=\"imgLoad\"\r\n >\r\n </vue-cropper>\r\n </div>\r\n <!--底部操作工具按钮-->\r\n <div class=\"footer-btn\">\r\n <div class=\"scope-btn\">\r\n <input\r\n type=\"file\"\r\n id=\"uploads\"\r\n style=\"position: absolute; clip: rect(0 0 0 0)\"\r\n accept=\"image/png, image/jpeg, image/gif, image/jpg\"\r\n @change=\"selectImg($event)\"\r\n />\r\n <el-button size=\"mini\" type=\"danger\" plain icon=\"el-icon-zoom-in\" v-db-click @click=\"changeScale(1)\"\r\n >放大</el-button\r\n >\r\n <el-button size=\"mini\" type=\"danger\" plain icon=\"el-icon-zoom-out\" v-db-click @click=\"changeScale(-1)\"\r\n >缩小</el-button\r\n >\r\n <el-button size=\"mini\" type=\"danger\" plain v-db-click @click=\"rotateLeft\">↺ 左旋转</el-button>\r\n <el-button size=\"mini\" type=\"danger\" plain v-db-click @click=\"rotateRight\">↻ 右旋转</el-button>\r\n </div>\r\n </div>\r\n </div>\r\n <!--预览效果图-->\r\n <div class=\"show-preview\">\r\n <div class=\"preview\">\r\n <img :src=\"previews.url\" :style=\"previews.img\" />\r\n </div>\r\n <div class=\"upload-btn\">\r\n <label class=\"btn\" for=\"uploads\">选择图片</label>\r\n <el-button size=\"mini\" type=\"success\" v-db-click @click=\"uploadImg()\">确认上传</el-button>\r\n </div>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport { VueCropper } from 'vue-cropper';\r\n// import { updateAvatar } from ''; //这里为文件上传的接口换成自己的文件\r\nimport { fileUpload } from '@/api/setting';\r\nexport default {\r\n name: 'CropperImage',\r\n components: {\r\n VueCropper,\r\n },\r\n data() {\r\n return {\r\n name: '',\r\n resImg: '',\r\n previews: {},\r\n option: {\r\n img: '', //裁剪图片的地址\r\n outputSize: 1, //裁剪生成图片的质量(可选0.1 - 1)\r\n outputType: 'png', //裁剪生成图片的格式（jpeg || png || webp）\r\n info: true, //图片大小信息\r\n canScale: true, //图片是否允许滚轮缩放\r\n autoCrop: true, //是否默认生成截图框\r\n autoCropWidth: 200, //默认生成截图框宽度\r\n autoCropHeight: 200, //默认生成截图框高度\r\n fixed: true, //是否开启截图框宽高固定比例\r\n fixedNumber: [1, 1], //截图框的宽高比例\r\n full: false, //false按原比例裁切图片，不失真\r\n fixedBox: false, //固定截图框大小，不允许改变\r\n canMove: true, //上传图片是否可以移动\r\n canMoveBox: true, //截图框能否拖动\r\n original: false, //上传图片按照原始比例渲染\r\n centerBox: true, //截图框是否被限制在图片里面\r\n height: false, //是否按照设备的dpr 输出等比例图片\r\n infoTrue: false, //true为展示真实输出图片宽高，false展示看到的截图框宽高\r\n maxImgSize: 3000, //限制图片最大宽度和高度\r\n enlarge: 1, //图片根据截图框输出比例倍数\r\n mode: '300px 300px', //图片默认渲染方式\r\n },\r\n };\r\n },\r\n methods: {\r\n //初始化函数\r\n imgLoad(msg) {\r\n console.log('工具初始化函数=====' + msg);\r\n },\r\n //图片缩放\r\n changeScale(num) {\r\n num = num || 1;\r\n this.$refs.cropper.changeScale(num);\r\n },\r\n //向左旋转\r\n rotateLeft() {\r\n this.$refs.cropper.rotateLeft();\r\n },\r\n //向右旋转\r\n rotateRight() {\r\n this.$refs.cropper.rotateRight();\r\n },\r\n // //实时预览函数\r\n realTime(data) {\r\n let that = this;\r\n that.previews = data;\r\n this.$refs.cropper.getCropBlob((data) => {\r\n this.blobToDataURI(data, function (res) {\r\n that.previewImg = res;\r\n });\r\n });\r\n },\r\n blobToDataURI(blob, callback) {\r\n var reader = new FileReader();\r\n reader.readAsDataURL(blob);\r\n reader.onload = function (e) {\r\n callback(e.target.result);\r\n };\r\n },\r\n //选择图片\r\n selectImg(e) {\r\n let file = e.target.files[0];\r\n if (!/\\.(jpg|jpeg|png|JPG|PNG)$/.test(e.target.value)) {\r\n this.$message({\r\n message: '图片类型要求：jpeg、jpg、png',\r\n type: 'error',\r\n });\r\n return false;\r\n }\r\n //转化为blob\r\n let reader = new FileReader();\r\n reader.onload = (e) => {\r\n let data;\r\n if (typeof e.target.result === 'object') {\r\n data = window.URL.createObjectURL(new Blob([e.target.result]));\r\n } else {\r\n data = e.target.result;\r\n }\r\n this.option.img = data;\r\n };\r\n //转化为base64\r\n reader.readAsDataURL(file);\r\n },\r\n\r\n base64ImgtoFile(dataurl, filename = 'file') {\r\n //将base64格式分割：['data:image/png;base64','XXXX']\r\n const arr = dataurl.split(',');\r\n // .*？ 表示匹配任意字符到下一个符合条件的字符 刚好匹配到：\r\n // image/png\r\n const mime = arr[0].match(/:(.*?);/)[1]; //image/png\r\n //[image,png] 获取图片类型后缀\r\n const suffix = mime.split('/')[1]; //png\r\n const bstr = atob(arr[1]); //atob() 方法用于解码使用 base-64 编码的字符串\r\n let n = bstr.length;\r\n const u8arr = new Uint8Array(n);\r\n while (n--) {\r\n u8arr[n] = bstr.charCodeAt(n);\r\n }\r\n return new File([u8arr], `${filename}.${suffix}`, {\r\n type: mime,\r\n });\r\n },\r\n\r\n uploadFile(file) {\r\n const formData = new FormData();\r\n formData.append('file', file);\r\n fileUpload(formData).then((res) => {\r\n if (res.status == 200) {\r\n this.$emit('uploadImgSuccess', res.data);\r\n } else {\r\n this.$message({\r\n message: '上传失败',\r\n type: 'error',\r\n duration: 1000,\r\n });\r\n }\r\n });\r\n },\r\n //上传图片\r\n uploadImg() {\r\n this.$refs.cropper.getCropData((data) => {\r\n this.resImg = this.base64ImgtoFile(data);\r\n this.uploadFile(this.resImg);\r\n });\r\n },\r\n },\r\n};\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n.btn {\r\n outline: none;\r\n display: inline-block;\r\n line-height: 1;\r\n white-space: nowrap;\r\n cursor: pointer;\r\n -webkit-appearance: none;\r\n text-align: center;\r\n -webkit-box-sizing: border-box;\r\n box-sizing: border-box;\r\n outline: 0;\r\n -webkit-transition: 0.1s;\r\n transition: 0.1s;\r\n font-weight: 500;\r\n padding: 8px 15px;\r\n font-size: 12px;\r\n border-radius: 3px;\r\n color: #fff;\r\n background-color: #409eff;\r\n border-color: #409eff;\r\n margin-right: 10px;\r\n}\r\n.cropper-content {\r\n display: flex;\r\n display: -webkit-flex;\r\n justify-content: flex-end;\r\n .cropper-box {\r\n flex: 1;\r\n width: 100%;\r\n .cropper {\r\n width: auto;\r\n height: 300px;\r\n }\r\n }\r\n\r\n .show-preview {\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: flex-start;\r\n align-items: center;\r\n .preview {\r\n overflow: hidden;\r\n height: 200px;\r\n width: 200px;\r\n background: #cccccc;\r\n transform: scale(0.8);\r\n border-radius: 50%;\r\n }\r\n }\r\n}\r\n.footer-btn {\r\n margin-top: 30px;\r\n display: flex;\r\n display: -webkit-flex;\r\n justify-content: space-around;\r\n .scope-btn {\r\n display: flex;\r\n display: -webkit-flex;\r\n justify-content: space-between;\r\n padding-right: 10px;\r\n }\r\n .upload-btn {\r\n flex: 1;\r\n -webkit-flex: 1;\r\n display: flex;\r\n display: -webkit-flex;\r\n justify-content: center;\r\n }\r\n}\r\n</style>\r\n"]}]}
|
