vue2结合tui.image-editor实现图片编辑，并实现保存编辑后图片功能

需求：要求对某一张图片进行编辑功能（类似于微信截图功能），包括：添加文字、可标注、可画箭头等

插件：tui.image-editor

安装

npm install --save @toast-ui/vue-image-editor tui-image-editor

具体功能说明：

1. 根据父级传递过来的图片url渲染到编辑器里，因为有上级操作，所以整个内容是在弹窗里操作
2. 对图片进行编辑
3. 保存编辑后的图片，上传到服务器那一步未实现

直接上代码

<template>
  <el-dialog
    :append-to-body="true"
    :close-on-click-modal="false"
    custom-class="editImg"
    title="编辑图片"
    :visible.sync="editImg"
    width="90%"
  >
    <div class="drawing-container">
      <!-- 绘图组件容器DOM -->
      <div id="tui-image-editor"></div>
      <el-button class="save" size="small" type="primary" @click="save">保存</el-button>
    </div>
  </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 = {
    ZoomIn: '放大',
    ZoomOut: '缩小',
    Hand: '手掌',
    History: '历史',
    Resize: '调整宽高',
    Crop: '裁剪',
    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: '混合色',
    Width: '宽度',
    Height: '高度',
    'Lock Aspect Ratio': '锁定宽高比例',
  }

  // 画布组件自定义样式
  const customTheme = {
    'common.bi.image': '', // 左上角logo图片
    'common.bisize.width': '0px',
    'common.bisize.height': '0px',
    'common.backgroundImage': 'none',
    'common.backgroundColor': '#f3f4f6',
    'common.border': '1px solid #333',

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

    // 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': '#ccc',
    'menu.hoverIcon.color': '#e9e9e9',
    'submenu.normalIcon.color': '#8a8a8a',
    'submenu.activeIcon.color': '#e9e9e9',

    'menu.iconSize.width': '30px',
    'menu.iconSize.height': '30px',
    'submenu.iconSize.width': '25px',
    'submenu.iconSize.height': '25px',

    // 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 {
    name: 'ImgTui',
    data() {
      return {
        instance: null, // 创建的画布对象
        editImg: false,
      }
    },
    mounted() {
      // 页面创建完成后调用
    },
    methods: {
      openPage(url) {
        this.editImg = true
        this.$nextTick(() => {
          this.init(url)
        })
      },
      init(url) {
        this.instance = new ImageEditor(document.querySelector('#tui-image-editor'), {
          includeUI: {
            loadImage: {
              // path: 'https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c1d7a1feb60346449c1a64893888989a~tplv-k3u1fbpfcp-watermark.image',
              path: this.$imgUrl + url,//当前为服务器地址
              name: 'image',
            },
            // menu: ['resize', 'crop', 'rotate', 'draw', 'shape', 'icon', 'text', 'filter'], // 底部菜单按钮列表 隐藏镜像flip和遮罩mask
            menu: ['crop', 'draw', 'shape', 'icon', 'text'], // 底部菜单按钮列表 隐藏镜像flip和遮罩mask
            initMenu: 'text', // 默认打开的菜单项
            menuBarPosition: 'bottom', // 菜单所在的位置
            locale: locale_zh, // 本地化语言为中文
            theme: customTheme, // 自定义样式
          },
          cssMaxWidth: 1000, // canvas 最大宽度
          cssMaxHeight: 600, // canvas 最大高度
        })
        document.getElementsByClassName('tui-image-editor-main')[0].style.top = '45px' // 调整图片显示位置
        document.getElementsByClassName('tie-btn-reset tui-image-editor-item help')[0].style.display = 'none' // 隐藏顶部重置按钮
        document.getElementsByClassName('tie-text-align-button')[0].style.display = 'none' // 隐藏文字对齐选项
      },
      // 保存图片，并上传
      save() {
        const base64String = this.instance.toDataURL() // base64 文件
        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' }) // blob 文件
        const form = new FormData()
        form.append('image', blob)
        // upload file
      },
    },
  }
</script>

<style lang="scss">
  .el-dialog.editImg {
    margin-top: 10vh !important;
  }
  .drawing-container {
    height: 70vh;
    max-width: 90%;
    position: relative;
    .save {
      position: absolute;
      right: 50px;
      top: 15px;
    }
  }
</style>