圖片編輯器----- tui-image-editor

1.上圖

 

 

2.引入 tui-image-editor

npm i tui-image-editor

3.直接上代碼

<template>
  <el-dialog append-to-body :visible.sync="imgVisible" :title="imgName" width="75%">
    <div class="container">
      <div id="tui-image-editor"></div>
    </div>
    <div class="dialog-bottom">
      <el-button size="mini" @click="downloadImg">下載</el-button>
      <el-button size="mini" @click="uploadImg">保存至服務器</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { base64ToFile, uploadFileBase64 } from '@/utils/file-util'
import { fileLocalDownLoad } from '@/utils'
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 #444",

  // 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": "#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: {
    bucketName: {
      type: String,
      default: 'bridge',
    },
  },
  data () {
    return {
      instance: null,
      imgSrc: '',
      imgUrl: '',
      imgName: '圖片',
      imgVisible: false
    };
  },
  mounted () {

  },
  methods: {
    init () {
      this.imgVisible = true
      this.$nextTick(() => {
        this.instance = new ImageEditor(document.querySelector('#tui-image-editor'), {
          includeUI: {
            loadImage: {
              path: this.imgUrl,
              name: 'image'
            },
            menu: ['resize', 'crop', 'rotate', 'draw', 'shape', 'icon', 'text', 'filter'], // 底部菜單按鈕列表 隱藏鏡像flip和遮罩mask
            initMenu: 'draw', // 默認打開的菜單項
            menuBarPosition: 'bottom', // 菜單所在的位置
            locale: locale_zh, // 本地化語言為中文
            theme: customTheme // 自定義樣式

          },
          cssMaxWidth: 1000, // canvas 最大寬度
          cssMaxHeight: 600 // canvas 最大高度

        })
        document.getElementsByClassName('tui-image-editor-main')[0].style.top = '0px' // 調整圖片顯示位置
      })
    },
    downloadImg () { // 文件下載
      const base64String = this.instance.toDataURL();
      const file = base64ToFile(base64String, this.imgName)
      fileLocalDownLoad([file], this.imgName)
    },
    async uploadImg () {
      const base64String = this.instance.toDataURL();
      let fileId = await uploadFileBase64(base64String, this.bucketName)
      // 調用上級頁面
      this.$emit('doImgUpload', fileId)
      this.imgVisible = false
    },

  },
};
</script>

<style lang="css" scoped>
  .container {
    height: 90vh;
    text-align: center;
  }
  .dialog-bottom {
    text-align: right;
    padding-top: 20px;
    padding-right: 20px;
  }
</style>

 文件引入

export const base64ToFile = (base64, fileName) => {
  let arr = base64.split(',')
  let mime = arr[0].match(/:(.*?);/)[1]
  let bstr = atob(arr[1])
  let n = bstr.length
  let u8arr = new Uint8Array(n)
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n)
  }
  let blob = new Blob([u8arr], {
    type: mime
  })
  blob.lastModifiedDate = new Date()
  blob.name = fileName
  console.log('functionbase64ToFile -> blob', blob) // file
  return blob
}

// 上傳base64
export const uploadFileBase64 = (file, bucketName) => {
  let sendData = {
    strBase64Image: file,
    bucketName: bucketName
  }
  if (loading) {
    loading.close() // 關閉加載
  }
  startLoading() // 開啟加載
  return request({
    url: '/filemgr/uploadFileBase64',
    method: 'post',
    data: sendData
  }).then(({ data }) => {
    loading.close() // 關閉加載
    if (data.code === 0) {
      return data.data
    }
  })
}

// 文件下載
export function fileLocalDownLoad(data, fileName) {
  const blob = new Blob(data)
  let downloadElement = document.createElement('a')
  let href = window.URL.createObjectURL(blob)
  downloadElement.href = href
  downloadElement.download = decodeURIComponent(fileName)
  document.body.appendChild(downloadElement)
  downloadElement.click()
  document.body.removeChild(downloadElement)
  window.URL.revokeObjectURL(href)
}