{"remainingRequest":"/usr/local/develop/php/www/waibao/NN2024071001/NN2024071001/addons/admin/node_modules/vue-loader/lib/index.js??vue-loader-options!/usr/local/develop/php/www/waibao/NN2024071001/NN2024071001/addons/admin/src/components/EleCropperDialog/EleCropper.vue?vue&type=style&index=0&id=1219e587&scoped=true&lang=css&","dependencies":[{"path":"/usr/local/develop/php/www/waibao/NN2024071001/NN2024071001/addons/admin/src/components/EleCropperDialog/EleCropper.vue","mtime":1616225248000},{"path":"/usr/local/develop/php/www/waibao/NN2024071001/NN2024071001/addons/admin/node_modules/css-loader/dist/cjs.js","mtime":499162500000},{"path":"/usr/local/develop/php/www/waibao/NN2024071001/NN2024071001/addons/admin/node_modules/vue-loader/lib/loaders/stylePostLoader.js","mtime":499162500000},{"path":"/usr/local/develop/php/www/waibao/NN2024071001/NN2024071001/addons/admin/node_modules/postcss-loader/src/index.js","mtime":499162500000},{"path":"/usr/local/develop/php/www/waibao/NN2024071001/NN2024071001/addons/admin/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/usr/local/develop/php/www/waibao/NN2024071001/NN2024071001/addons/admin/node_modules/vue-loader/lib/index.js","mtime":499162500000}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:CgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKDQouZWxlLWNyb3BwZXIgLmVsZS1jcm9wcGVyLWdyb3VwIHsNCiAgZGlzcGxheTogZmxleDsNCn0NCg0KLmVsZS1jcm9wcGVyIC5lbGUtY3JvcHBlci1pbWctZ3JvdXAgew0KICBmbGV4OiAxOw0KfQ0KDQouZWxlLWNyb3BwZXIgLmVsZS1jcm9wcGVyLXByZXZpZXcgew0KICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7DQogIGJvcmRlcjogMXB4IHNvbGlkIGhzbGEoMCwgMCUsIDgwJSwgLjYpOw0KICB2ZXJ0aWNhbC1hbGlnbjogdG9wOw0KICBvdmVyZmxvdzogaGlkZGVuOw0KfQ0KDQovKiDmk43kvZzmjInpkq4gKi8NCi5lbGUtY3JvcHBlciAuZWxlLWNyb3BwZXItdG9vbCB7DQogIG1hcmdpbi10b3A6IDEwcHg7DQp9DQoNCi5lbGUtY3JvcHBlciAuZWxlLWNyb3BwZXItdG9vbC1pdGVtIHsNCiAgbWFyZ2luLXRvcDogMTBweDsNCiAgdmVydGljYWwtYWxpZ246IHRvcDsNCn0NCg0KLmVsZS1jcm9wcGVyIC5lbGUtY3JvcHBlci10b29sLWl0ZW0gew0KICBtYXJnaW4tcmlnaHQ6IDE4cHg7DQp9DQoNCi5lbGUtY3JvcHBlciAuZWxlLWNyb3BwZXItdG9vbC1pdGVtOmxhc3QtY2hpbGQgew0KICBtYXJnaW4tcmlnaHQ6IDAgIWltcG9ydGFudDsNCn0NCg0KLmVsZS1jcm9wcGVyIC5lbGUtY3JvcHBlci10b29sIC5lbC1idXR0b24gew0KICBwYWRkaW5nLWxlZnQ6IDEycHg7DQogIHBhZGRpbmctcmlnaHQ6IDEycHg7DQp9DQoNCi5lbGUtY3JvcHBlciBbZGF0YS1tZXRob2Q9InNjYWxlWCJdIC5lbC1pY29uLXNvcnQgew0KICB0cmFuc2Zvcm06IHJvdGF0ZSg5MGRlZyk7DQp9DQoNCi5lbGUtY3JvcHBlciAuZWxlLWNyb3BwZXItdG9vbC1pdGVtID4gZGl2IHsNCiAgZGlzcGxheTogaW5saW5lLWJsb2NrOw0KfQ0KDQouZWxlLWNyb3BwZXIgLmVsZS1jcm9wcGVyLXRvb2wtaXRlbSAuZWwtdXBsb2FkIC5lbC1idXR0b24gew0KICBib3JkZXItdG9wLWxlZnQtcmFkaXVzOiAwOw0KICBib3JkZXItYm90dG9tLWxlZnQtcmFkaXVzOiAwOw0KfQ0KDQovKiDlsI/lsY/luZXpgILlupQgKi8NCkBtZWRpYSBzY3JlZW4gYW5kIChtYXgtd2lkdGg6IDc2OHB4KSB7DQogIC5lbGUtY3JvcHBlciAuZWxlLWNyb3BwZXItcHJldmlldy1ncm91cCB7DQogICAgZGlzcGxheTogbm9uZTsNCiAgfQ0KDQogIC5lbGUtY3JvcHBlciAuZWxlLWNyb3BwZXItdG9vbC1pdGVtIHsNCiAgICBtYXJnaW4tcmlnaHQ6IDZweDsNCiAgfQ0KDQogIC5lbGUtY3JvcHBlciAuZWxlLWNyb3BwZXItdG9vbCAuZWwtYnV0dG9uIHsNCiAgICBwYWRkaW5nLWxlZnQ6IDEwcHg7DQogICAgcGFkZGluZy1yaWdodDogMTBweDsNCiAgfQ0KfQ0K"},{"version":3,"sources":["EleCropper.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyQA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA","file":"EleCropper.vue","sourceRoot":"src/components/EleCropperDialog","sourcesContent":["<!-- 图片裁剪组件 -->\r\n<template>\r\n  <div class=\"ele-cropper\">\r\n    <div class=\"ele-cropper-group\">\r\n      <div class=\"ele-cropper-img-group\">\r\n        <img ref=\"eleCropperImg\" :src=\"imgSrc\" style=\"max-width:100%;\" alt=\"\"/>\r\n      </div>\r\n      <div v-if=\"showPreview\" ref=\"eleCropperPreviews\" :style=\"pStyle\" class=\"ele-cropper-preview-group\">\r\n        <div :style=\"pItemStyle1\" class=\"ele-cropper-preview\"></div>\r\n        <div v-if=\"this.aspectRatio===1\" :style=\"pItemStyle2\" class=\"ele-cropper-preview\"></div>\r\n        <div v-if=\"this.aspectRatio!==1\" :style=\"pItemStyle3\" class=\"ele-cropper-preview\"></div>\r\n        <div v-if=\"this.aspectRatio!==1\" :style=\"pItemStyle4\" class=\"ele-cropper-preview\"></div>\r\n      </div>\r\n    </div>\r\n    <div v-if=\"tools\" class=\"ele-cropper-tool\">\r\n      <el-button-group v-for=\"(item,index) in toolGroup\" :key=\"index\" class=\"ele-cropper-tool-item\">\r\n        <template v-for=\"(btn,i) in item\">\r\n          <el-button v-if=\"btn==='zoomIn'\" :key=\"i\" @click=\"action\" data-method=\"zoom\"\r\n                     data-option=\"0.1\" title=\"放大\" icon=\"el-icon-zoom-in\" type=\"primary\"/>\r\n          <el-button v-else-if=\"btn==='zoomOut'\" :key=\"i\" @click=\"action\" data-method=\"zoom\"\r\n                     data-option=\"-0.1\" title=\"缩小\" icon=\"el-icon-zoom-out\" type=\"primary\"/>\r\n          <el-button v-else-if=\"btn==='rotateL'\" :key=\"i\" @click=\"action\" data-method=\"rotate\"\r\n                     data-option=\"-45\" title=\"向左旋转\" icon=\"el-icon-refresh-left\" type=\"primary\"/>\r\n          <el-button v-else-if=\"btn==='rotateR'\" :key=\"i\" @click=\"action\" data-method=\"rotate\"\r\n                     data-option=\"45\" title=\"向右旋转\" icon=\"el-icon-refresh-right\" type=\"primary\"/>\r\n          <el-button v-else-if=\"btn==='moveL'\" :key=\"i\" @click=\"action\" data-method=\"move\" data-option=\"-10\"\r\n                     data-option2=\"0\" title=\"左移\" icon=\"el-icon-back\" type=\"primary\"/>\r\n          <el-button v-else-if=\"btn==='moveR'\" :key=\"i\" @click=\"action\" data-method=\"move\" data-option=\"10\"\r\n                     data-option2=\"0\" title=\"右移\" icon=\"el-icon-right\" type=\"primary\"/>\r\n          <el-button v-else-if=\"btn==='moveT'\" :key=\"i\" @click=\"action\" data-method=\"move\" data-option=\"0\"\r\n                     data-option2=\"-10\" title=\"上移\" icon=\"el-icon-top\" type=\"primary\"/>\r\n          <el-button v-else-if=\"btn==='moveB'\" :key=\"i\" @click=\"action\" data-method=\"move\" data-option=\"0\"\r\n                     data-option2=\"10\" title=\"下移\" icon=\"el-icon-bottom\" type=\"primary\"/>\r\n          <el-button v-else-if=\"btn==='scaleX'\" :key=\"i\" @click=\"action\" data-method=\"scaleX\"\r\n                     data-option=\"-1\" title=\"左右翻转\" icon=\"el-icon-sort\" type=\"primary\"/>\r\n          <el-button v-else-if=\"btn==='scaleY'\" :key=\"i\" @click=\"action\" data-method=\"scaleY\"\r\n                     data-option=\"-1\" title=\"上下翻转\" icon=\"el-icon-sort\" type=\"primary\"/>\r\n          <el-button v-else-if=\"btn==='reset'\" :key=\"i\" @click=\"action\" data-method=\"reset\"\r\n                     title=\"重新开始\" icon=\"el-icon-refresh\" type=\"primary\"/>\r\n          <el-upload v-else-if=\"btn==='upload'\" :key=\"i\" action=\"\" :before-upload=\"onUpload\"\r\n                     :show-file-list=\"false\" :accept=\"accept\">\r\n            <el-button title=\"选择图片\" icon=\"el-icon-upload2\" type=\"primary\"/>\r\n          </el-upload>\r\n          <el-button v-else-if=\"btn==='crop'\" :key=\"i\" @click=\"action\" data-method=\"getCroppedCanvas\"\r\n                     data-option=\"{ &quot;maxWidth&quot;: 4096, &quot;maxHeight&quot;: 4096 }\"\r\n                     icon=\"el-icon-check\" type=\"primary\">完成\r\n          </el-button>\r\n        </template>\r\n      </el-button-group>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport 'cropperjs/dist/cropper.css';\r\nimport Cropper from 'cropperjs';\r\n\r\nexport default {\r\n  name: \"EleCropper\",\r\n  props: {\r\n    src: String,  // 图片地址\r\n    aspectRatio: {  // 裁剪比例\r\n      type: Number,\r\n      default: 1\r\n    },\r\n    viewMode: Number,  // 裁剪组件模式\r\n    dragMode: String,\r\n    initialAspectRatio: Number,\r\n    minContainerWidth: Number,\r\n    minContainerHeight: Number,\r\n    minCanvasWidth: Number,\r\n    minCanvasHeight: Number,\r\n    minCropBoxWidth: Number,\r\n    minCropBoxHeight: Number,\r\n    croppedWidth: Number,\r\n    croppedHeight: Number,\r\n    croppedMinWidth: Number,\r\n    croppedMinHeight: Number,\r\n    croppedMaxWidth: Number,\r\n    croppedMaxHeight: Number,\r\n    croppedFillColor: Number,\r\n    croppedImageSmoothingEnabled: Boolean,\r\n    croppedImageSmoothingQuality: String,\r\n    toBlob: Boolean,  // 是否返回blob数据\r\n    accept: {  // 允许上传的图片类型\r\n      type: String,\r\n      default: 'image/*'\r\n    },\r\n    tools: {  // 操作按钮布局\r\n      type: [Boolean, String],\r\n      default: true\r\n    },\r\n    showPreview: {  // 是否显示预览组件\r\n      type: Boolean,\r\n      default: true\r\n    }\r\n  },\r\n  data() {\r\n    return {\r\n      imgSrc: '',  // 图片base64数据\r\n      ins: null,  // cropper实例\r\n      options: {  // cropper配置\r\n        aspectRatio: this.aspectRatio,\r\n        viewMode: this.viewMode\r\n      },\r\n      imgType: 'image/jpeg',  // 当前图片类型\r\n      previewWidth: 120  // 预览组件宽度\r\n    }\r\n  },\r\n  computed: {\r\n    // 预览组件样式\r\n    pStyle() {\r\n      return `width: ${this.previewWidth + 20}px;text-align: right;font-size:0;`;\r\n    },\r\n    pItemStyle1() {\r\n      let h = this.previewWidth / (this.aspectRatio || 1);\r\n      return `width: ${this.previewWidth}px;height: ${h}px;`;\r\n    },\r\n    pItemStyle2() {\r\n      return this.pItemStyle1 + 'border-radius: 50%;margin-top: 10px;';\r\n    },\r\n    pItemStyle3() {\r\n      let w = this.previewWidth / 3 * 2 - 15;\r\n      let h = w / (this.aspectRatio || 1);\r\n      return `width: ${this.previewWidth}px;height: ${h}px;margin-top: 10px;`;\r\n    },\r\n    pItemStyle4() {\r\n      let w = this.previewWidth / 3 - 1;\r\n      let h = w / (this.aspectRatio || 1);\r\n      return `width: ${this.previewWidth}px;height: ${h}px;margin: 10px 0 0 10px;`;\r\n    },\r\n    // 解析按钮布局\r\n    toolGroup() {\r\n      if (typeof this.tools === 'string') {\r\n        let tool = [];\r\n        let group = this.tools.split('|');\r\n        group.forEach(g => {\r\n          tool.push(g.split(',').map(b => b.trim()));\r\n        });\r\n        return tool;\r\n      } else if (this.tools) {\r\n        return [\r\n          ['zoomIn', 'zoomOut'], ['moveL', 'moveR', 'moveT', 'moveB'], ['rotateL', 'rotateR'],\r\n          ['scaleX', 'scaleY'], ['reset', 'upload'], ['crop']\r\n        ];\r\n      }\r\n      return [];\r\n    }\r\n  },\r\n  mounted() {\r\n    // ie兼容\r\n    if (this.src.indexOf('data:image') !== 0 && (!!window.ActiveXObject || 'ActiveXObject' in window)) {\r\n      let req = new window.XMLHttpRequest();\r\n      req.open('GET', this.src, true);\r\n      req.responseType = 'arraybuffer';\r\n      req.onload = () => {\r\n        if ([200, 201].indexOf(req.status) === -1) return console.error('cropper', req);\r\n        let bytes = new Uint8Array(req.response), binary = '';\r\n        for (let i = 0; i < bytes.byteLength; i++) binary += String.fromCharCode(bytes[i]);\r\n        this.imgSrc = 'data:image/jpeg;base64,' + window.btoa(binary);\r\n        this.$nextTick(() => {\r\n          this.render();\r\n        });\r\n      };\r\n      req.send();\r\n    } else {\r\n      this.imgSrc = this.src;\r\n      this.$nextTick(() => {\r\n        this.render();\r\n      });\r\n    }\r\n  },\r\n  methods: {\r\n    /* 渲染 */\r\n    render() {\r\n      if (this.ins) this.ins.destroy();\r\n      if (this.showPreview) this.options.preview = this.$refs.eleCropperPreviews.children;\r\n      this.options.dragMode = this.dragMode;\r\n      this.options.initialAspectRatio = this.initialAspectRatio;\r\n      this.options.minContainerWidth = this.minContainerWidth;\r\n      this.options.minContainerHeight = this.minContainerHeight;\r\n      this.options.minCanvasWidth = this.minCanvasWidth;\r\n      this.options.minCanvasHeight = this.minCanvasHeight;\r\n      this.options.minCropBoxWidth = this.minCropBoxWidth;\r\n      this.options.minCropBoxHeight = this.minCropBoxHeight;\r\n      this.ins = new Cropper(this.$refs.eleCropperImg, this.options);\r\n    },\r\n    /* 操作按钮点击事件 */\r\n    action(e) {\r\n      let method = this.getDataset(e.currentTarget, 'method'),\r\n          option = this.getDataset(e.currentTarget, 'option'),\r\n          secondOption = this.getDataset(e.currentTarget, 'option2');\r\n      if (!this.ins || !method) return;\r\n      let cropped = this.ins.cropped, result;\r\n      switch (method) {\r\n        case 'rotate':\r\n          if (cropped && this.options.viewMode > 0) this.in.clear();\r\n          break;\r\n        case 'getCroppedCanvas':\r\n          option = JSON.parse(option);\r\n          if (this.imgType === 'image/jpeg') {\r\n            if (!option) option = {};\r\n            option.fillColor = '#fff';\r\n          }\r\n          option.width = this.croppedWidth;\r\n          option.height = this.croppedHeight;\r\n          option.minWidth = this.croppedMinWidth;\r\n          option.minHeight = this.croppedMinHeight;\r\n          option.maxWidth = this.croppedMaxWidth;\r\n          option.maxHeight = this.croppedMaxHeight;\r\n          option.fillColor = this.croppedFillColor;\r\n          option.imageSmoothingEnabled = this.croppedImageSmoothingEnabled;\r\n          option.imageSmoothingQuality = this.croppedImageSmoothingQuality;\r\n          break;\r\n      }\r\n      result = this.ins[method](option, secondOption);\r\n      switch (method) {\r\n        case 'rotate':\r\n          if (cropped && this.options.viewMode > 0) this.ins.crop();\r\n          break;\r\n        case 'scaleX':\r\n        case 'scaleY':\r\n          this.setDataset(e.currentTarget, 'option', -option);\r\n          break;\r\n        case 'getCroppedCanvas':\r\n          console.log(result.toDataURL())\r\n          if (result) {\r\n            if (this.toBlob) {\r\n              result.toBlob((blob) => {\r\n                this.$emit('crop', blob);\r\n              }, this.imgType);\r\n            } else {\r\n              this.$emit('crop', result.toDataURL(this.imgType));\r\n            }\r\n          } else {\r\n            this.$message.error('裁剪失败');\r\n          }\r\n          break;\r\n      }\r\n    },\r\n    /* 图片上传处理 */\r\n    onUpload(file) {\r\n      this.imgType = file.type;\r\n      let reader = new FileReader();\r\n      reader.onload = (e) => {\r\n        this.ins.replace(e.target.result);\r\n      };\r\n      reader.readAsDataURL(file);\r\n      return false;\r\n    },\r\n    /* 获取dataset属性 */\r\n    getDataset(elem, key) {\r\n      if (elem.dataset) return elem.dataset[key];\r\n      else return elem.getAttribute('data-' + key);\r\n    },\r\n    /* 设置dataset属性 */\r\n    setDataset(elem, key, value) {\r\n      if (elem.dataset) elem.dataset[key] = value;\r\n      else elem.setAttribute('data-' + key, value);\r\n    }\r\n  }\r\n}\r\n</script>\r\n\r\n<style scoped>\r\n.ele-cropper .ele-cropper-group {\r\n  display: flex;\r\n}\r\n\r\n.ele-cropper .ele-cropper-img-group {\r\n  flex: 1;\r\n}\r\n\r\n.ele-cropper .ele-cropper-preview {\r\n  display: inline-block;\r\n  border: 1px solid hsla(0, 0%, 80%, .6);\r\n  vertical-align: top;\r\n  overflow: hidden;\r\n}\r\n\r\n/* 操作按钮 */\r\n.ele-cropper .ele-cropper-tool {\r\n  margin-top: 10px;\r\n}\r\n\r\n.ele-cropper .ele-cropper-tool-item {\r\n  margin-top: 10px;\r\n  vertical-align: top;\r\n}\r\n\r\n.ele-cropper .ele-cropper-tool-item {\r\n  margin-right: 18px;\r\n}\r\n\r\n.ele-cropper .ele-cropper-tool-item:last-child {\r\n  margin-right: 0 !important;\r\n}\r\n\r\n.ele-cropper .ele-cropper-tool .el-button {\r\n  padding-left: 12px;\r\n  padding-right: 12px;\r\n}\r\n\r\n.ele-cropper [data-method=\"scaleX\"] .el-icon-sort {\r\n  transform: rotate(90deg);\r\n}\r\n\r\n.ele-cropper .ele-cropper-tool-item > div {\r\n  display: inline-block;\r\n}\r\n\r\n.ele-cropper .ele-cropper-tool-item .el-upload .el-button {\r\n  border-top-left-radius: 0;\r\n  border-bottom-left-radius: 0;\r\n}\r\n\r\n/* 小屏幕适应 */\r\n@media screen and (max-width: 768px) {\r\n  .ele-cropper .ele-cropper-preview-group {\r\n    display: none;\r\n  }\r\n\r\n  .ele-cropper .ele-cropper-tool-item {\r\n    margin-right: 6px;\r\n  }\r\n\r\n  .ele-cropper .ele-cropper-tool .el-button {\r\n    padding-left: 10px;\r\n    padding-right: 10px;\r\n  }\r\n}\r\n</style>"]}]}