Vue+Tui-image-editor实现图片编辑(涂鸦,裁剪,标注,旋转,滤镜)

目录

前言

效果展示

涂鸦

裁剪

标注

旋转

滤镜

安装

 使用

 中文化+自定义样式+按钮优化

 参考链接

---

前言

       需求：对图片进行旋转、缩放、裁剪、涂鸦、标注、添加文本等。

效果展示

涂鸦

裁剪

标注

旋转

滤镜

安装

npm i tui-image-editor

// or

yarn add tui-image-editor

 使用

  <template>
    <div class="drawing-container">
      <div id="tui-image-editor"></div>
    </div>
  </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'
  
  export default {
    data() {
      return {
        instance: null
      }
    },
    mounted() {
      this.init()
    },
    methods: {
      init() {
        this.instance = new ImageEditor(document.querySelector('#tui-image-editor'), {
          includeUI: {
            loadImage: {
              path: 'http://127.0.0.1:9999/online/Pictures/local/webupload/2024/09/09/1b88e7e1-589d-4bf9-9840-40bb69a9b61a.jpg',
              name: 'image'
            },
            menu: ['resize', 'crop', 'rotate', 'draw', 'shape', 'icon', 'text', 'filter'], // 底部菜单按钮列表 隐藏镜像flip和遮罩mask
            initMenu: '', // 默认打开的菜单项
            menuBarPosition: 'bottom', // 菜单所在的位置
          },
          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' // 隐藏顶部重置按钮
      },
      // 保存图片，并上传
      save() {
        const base64String = this.instance.toDataURL() // base64 文件
        const blob = this.base64ToBlob(base64String) // blob 文件
        // 创建FormData对象，并附加Blob对象
        const form = new FormData()
        form.append('image', blob)
        // upload file
      },
      // 将base64字符串转换为Blob对象
      base64ToBlob(base64Str) {
            let parts = base64Str.split(';base64,');
            let contentType = parts[0].split(':')[1];
            let raw = window.atob(parts[1]);
            let rawLength = raw.length;
            let uInt8Array = new Uint8Array(rawLength);
            for (let i = 0; i < rawLength; ++i) {
                uInt8Array[i] = raw.charCodeAt(i);
            }
            return new Blob([uInt8Array], { type: contentType });
        },
    }
  }
  </script>
  
  <style scoped>
  .drawing-container {
    height: 718px;
    position: relative;
    width: 70%;
    margin-top: 40px;
    margin-left: 15%;
  }
  </style>

 中文化+自定义样式+按钮优化

<template>
    <div class="drawing-container">
      <div id="tui-image-editor"></div>
      <el-button class="save" type="primary" size="small" @click="save">保存</el-button>
    </div>
  </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": "0px 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": "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 {
    data() {
      return {
        instance: null
      }
    },
    mounted() {
      this.init()
    },
    methods: {
      init() {
        this.instance = new ImageEditor(document.querySelector('#tui-image-editor'), {
          includeUI: {
            loadImage: {
              path: 'http://127.0.0.1:9999/online/Pictures/local/webupload/2024/09/09/1b88e7e1-589d-4bf9-9840-40bb69a9b61a.jpg',
              name: 'image'
            },
            menu: ['resize', 'crop', 'rotate', 'draw', 'shape', 'icon', 'text', 'filter'], // 底部菜单按钮列表 隐藏镜像flip和遮罩mask
            initMenu: '', // 默认打开的菜单项
            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' // 隐藏顶部重置按钮
      },
      // 保存图片，并上传
      save() {
        const base64String = this.instance.toDataURL() // base64 文件
        const blob = this.base64ToBlob(base64String) // blob 文件
        // 创建FormData对象，并附加Blob对象
        const form = new FormData()
        form.append('image', blob)
        // upload file
      },
      // 将base64字符串转换为Blob对象
      base64ToBlob(base64Str) {
            let parts = base64Str.split(';base64,');
            let contentType = parts[0].split(':')[1];
            let raw = window.atob(parts[1]);
            let rawLength = raw.length;
            let uInt8Array = new Uint8Array(rawLength);
            for (let i = 0; i < rawLength; ++i) {
                uInt8Array[i] = raw.charCodeAt(i);
            }
            return new Blob([uInt8Array], { type: contentType });
        },
    }
  }
  </script>
  
  <style scoped>
  .drawing-container {
    height: 718px;
    position: relative;
    width: 70%;
    margin-top: 40px;
    margin-left: 15%;
    .save {
      position: absolute;
      right: 50px;
      top: 15px;
    }
  }
  </style>

 

 参考链接

分享一个强大的 Vue 图片编辑插件（快来试试！） - 浅浅而谈 - 博客园

官方GitHub地址：GitHub - nhn/tui.image-editor: 🍞🎨 Full-featured photo image editor using canvas. It is really easy, and it comes with great filters.
Api及Examples地址：http://nhn.github.io/tui.image-editor/latest/