xiangan_pc/src/components/360View/img-editor.vue

<template>
  <el-dialog
    title="图片编辑3"
    top="1vh"
    width="95%"
    :visible.sync="visible"
    fullscreen
    append-to-body
    class="img-editor"
    @closed="closeDialog"
  >
    <i class="el-icon-picture-outline replace-picture" />
    <input id="inputFile" class="replace-picture" type="file" name="" accept="image/jpeg,image/jpg,image/png" @change="replaceHandle">
    <div class="dialog-container">
      <div id="tui-image-editor" />
    </div>
    <template slot="footer">
      <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
      <el-button type="primary" @click="submit">{{ $t('confirm') }}</el-button>
    </template>
  </el-dialog>
</template>

<script>
import 'tui-image-editor/dist/tui-image-editor.css'
import 'tui-color-picker/dist/tui-color-picker.css'
import ImageEditor from 'tui-image-editor'
// 汉化
const locale_zh = {
  // override default English locale to your custom
  Crop: '裁剪',
  Resize: '调整大小',
  ZoomIn: '放大',
  Hand: '拖拽',
  History: '历史记录',
  ZoomOut: '缩小',
  DeleteAll: '全部删除',
  Delete: '删除',
  Undo: '撤销',
  Redo: '反撤销',
  Reset: '重置',
  Flip: '镜像',
  Rotate: '旋转',
  Draw: '画',
  Shape: '形状标注',
  Icon: '图标标注',
  Text: '文字标注',
  Mask: '遮罩',
  Filter: '滤镜',
  Bold: '加粗',
  Italic: '斜体',
  Underline: '下划线',
  Left: '左对齐',
  Center: '居中',
  Right: '右对齐',
  Color: '颜色',
  'Text size': '字体大小',
  Custom: '自定义',
  Square: '正方形',
  Apply: '应用',
  Cancel: '取消',
  'Flip X': 'X 轴',
  'Flip Y': 'Y 轴',
  Range: '区间',
  Stroke: '描边',
  Fill: '填充',
  Circle: '圆',
  Triangle: '三角',
  Rectangle: '矩形',
  Free: '曲线',
  Straight: '直线',
  Arrow: '箭头',
  'Arrow-2': '箭头2',
  'Arrow-3': '箭头3',
  'Star-1': '星星1',
  'Star-2': '星星2',
  Polygon: '多边形',
  Location: '定位',
  Heart: '心形',
  Bubble: '气泡',
  'Custom icon': '自定义图标',
  'Load Mask Image': '加载蒙层图片',
  Grayscale: '灰度',
  Blur: '模糊',
  Sharpen: '锐化',
  Emboss: '浮雕',
  'Remove White': '除去白色',
  Distance: '距离',
  Brightness: '亮度',
  Noise: '噪音',
  'Color Filter': '彩色滤镜',
  Sepia: '棕色',
  Sepia2: '棕色2',
  Invert: '负片',
  Pixelate: '像素化',
  Threshold: '阈值',
  Tint: '色调',
  Multiply: '正片叠底',
  Blend: '混合色'
  // etc...
}
// 去除不需要的右上角的Load和Download和左上角这个默认的logo
const customTheme = {
  // image 坐上角度图片
  'common.bi.image': '', // 在这里换上你喜欢的logo图片
  'common.bisize.width': '0px',
  'common.bisize.height': '0px',
  'common.backgroundImage': 'none',
  'common.backgroundColor': '#f3f4f6',
  'common.border': '1px solid #444',

  // header
  'header.backgroundImage': 'none',
  'header.backgroundColor': '#f3f4f6',
  'header.border': '0px',
  'header.display': 'none',

  // load button
  'loadButton.backgroundColor': '#fff',
  'loadButton.border': '1px solid #ddd',
  'loadButton.color': '#222',
  'loadButton.fontFamily': 'NotoSans, sans-serif',
  'loadButton.fontSize': '12px',
  'loadButton.display': 'none', // 可以直接隐藏掉

  // download button
  'downloadButton.backgroundColor': '#fdba3b',
  'downloadButton.border': '1px solid #fdba3b',
  'downloadButton.color': '#fff',
  'downloadButton.fontFamily': 'NotoSans, sans-serif',
  'downloadButton.fontSize': '12px',
  'downloadButton.display': 'none', // 可以直接隐藏掉

  // icons default
  'menu.normalIcon.color': '#8a8a8a',
  'menu.activeIcon.color': '#555555',
  'menu.disabledIcon.color': '#434343',
  'menu.hoverIcon.color': '#e9e9e9',
  'submenu.normalIcon.color': '#8a8a8a',
  'submenu.activeIcon.color': '#e9e9e9',

  'menu.iconSize.width': '24px',
  'menu.iconSize.height': '24px',
  'submenu.iconSize.width': '32px',
  'submenu.iconSize.height': '32px',

  // submenu primary color
  'submenu.backgroundColor': '#1e1e1e',
  'submenu.partition.color': '#858585',

  // submenu labels
  'submenu.normalLabel.color': '#858585',
  'submenu.normalLabel.fontWeight': 'lighter',
  'submenu.activeLabel.color': '#fff',
  'submenu.activeLabel.fontWeight': 'lighter',

  // checkbox style
  'checkbox.border': '1px solid #ccc',
  'checkbox.backgroundColor': '#fff',

  // rango style
  'range.pointer.color': '#fff',
  'range.bar.color': '#666',
  'range.subbar.color': '#d1d1d1',

  'range.disabledPointer.color': '#414141',
  'range.disabledBar.color': '#282828',
  'range.disabledSubbar.color': '#414141',

  'range.value.color': '#fff',
  'range.value.fontWeight': 'lighter',
  'range.value.fontSize': '11px',
  'range.value.border': '1px solid #353535',
  'range.value.backgroundColor': '#151515',
  'range.title.color': '#fff',
  'range.title.fontWeight': 'lighter',

  // colorpicker style
  'colorpicker.button.border': '1px solid #1e1e1e',
  'colorpicker.title.color': '#fff'
}
export default {
  props: {
    bodyStyleShow: {
      type: Boolean,
      default: false
    },
    // 是否为病例模板
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      visible: false,
      imgUrl: '',
      imgAlt: '',
      instance: null,
      textOne: '',
      textTwo: '',
      textThree: ''
    }
  },
  mounted() {
    // ImageEditor

  },
  methods: {
    init(textOne, textTwo, textThree) {
      textOne ? this.textOne = textOne : ''
      textTwo ? this.textTwo = textTwo : ''
      textThree ? this.textThree = textThree : ''
      this.visible = true
      this.$nextTick(() => {
        // console.log(this.imgUrl)
        this.instance = new ImageEditor(
          document.querySelector('#tui-image-editor'),
          {
            includeUI: {
              loadImage: {
                path: this.imgUrl,
                name: 'image'
              },
              // menu: ['crop', 'rotate', 'draw', 'shape', 'icon', 'text', 'filter'], // 底部菜单按钮列表 隐藏镜像flip和遮罩mask
              initMenu: 'draw',
              selectionStyle: {
                lineWidth: 5,
                borderColor: '#000000'
              },
              menuBarPosition: 'bottom',
              locale: locale_zh, // 本地化语言为中文
              theme: customTheme // 自定义主题
            }
          }
        )
        // document.querySelector('.tie-btn-resize').style.display = 'none' // 隐藏顶部重置按钮
        document.querySelector('.tie-btn-mask').style.display = 'none' // 隐藏遮罩按钮
      })
    },
    submit() {
      const base64String = this.instance.toDataURL()
      // console.log(base64String)
      this.$emit('fullImgBack', base64String, this.imgAlt, this.textOne, this.textTwo, this.textThree)
      this.visible = false
      // 掉后台接口存入后台 --- 暂时用不到
      // const data = window.atob(base64String.split(',')[1])
      // const ia = new Uint8Array(data.length)
      // for (let i = 0; i < data.length; i++) {
      //   ia[i] = data.charCodeAt(i)
      // }
      // const blob = new Blob([ia], { type: 'image/png' })
      // const fd = new FormData()
      // fd.append('image', blob)
      // upload fd
    },
    // 替换图片
    replaceHandle(e) {
      var file = e.target.files[0]
      console.log(file)
      var reader = new FileReader()
      var that = this
      reader.readAsDataURL(file)
      console.log(reader)
      reader.onload = function(e) {
        that.imgUrl = reader.result
        that.init()
      }
    },
    closeDialog() {
      this.$emit('closeDialog')
      this.visible = false
    }
  }
}
</script>
<style lang="scss" scoped>
.img-editor{
  .replace-picture {
    z-index: 999;
    position: fixed;
    right:35px;
    top: 73px;
    cursor: pointer;
  }
  .dialog-container {
    height: calc(100vh - 1vh - 54px - 70px);
  }
  #inputFile {
    opacity: 0;
  }
  .el-icon-picture-outline {
    font-size: 28px;
  }
}
</style>