<small id="qecus"><code id="qecus"></code></small>

<small id="qecus"><code id="qecus"></code></small>

<table id="qecus"></table>

<sup id="qecus"><dd id="qecus"></dd></sup>

溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×

忘記密碼？

登錄注冊×

獲取短信驗證碼

其他方式登錄

點擊登錄注冊即表示同意《億速云用戶服務條款》

用戶登錄×

賬戶密碼登錄

請使用微信掃描上方二維碼

使用幫助

請求超時！

請點擊重新獲取二維碼

Vue圖片編輯插件tui.image-editor怎么用

發(fā)布時間：2021-11-29 13:03:42 來源：億速云閱讀：1228 作者：柒染欄目：編程語言

Vue圖片編輯插件tui.image-editor怎么用，針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

最近用戶提出了一個新的需求，老師可以批改學生的圖片作業(yè)，需要對圖片進行旋轉、縮放、裁剪、涂鴉、標注、添加文本等。乍一聽，又要掉不少頭發(fā)。有沒有功能強大的插件實現(xiàn)以上功能，讓我有更多的時間去阻止女票雙十一剁手呢？答案當然是有的。

效果展示

涂鴉

Vue圖片編輯插件tui.image-editor怎么用

裁剪

Vue圖片編輯插件tui.image-editor怎么用

標注

Vue圖片編輯插件tui.image-editor怎么用

旋轉

Vue圖片編輯插件tui.image-editor怎么用

濾鏡

Vue圖片編輯插件tui.image-editor怎么用

是不是很強大！還有眾多功能我就不一一展示了。那么還等什么，跟我一起用起來吧~

安裝

npm i tui-image-editor
// or
yarn add tui-image-editor

使用

快速體驗

復制以下代碼，將插件引入到自己的項目中。

<template>
  <div>
    <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: "https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c1d7a1feb60346449c1a64893888989a~tplv-k3u1fbpfcp-watermark.image",
              name: "image",
            },
            initMenu: "draw", // 默認打開的菜單項
            menuBarPosition: "bottom", // 菜單所在的位置
          },
          cssMaxWidth: 1000, // canvas 最大寬度
          cssMaxHeight: 600, // canvas 最大高度
        }
      );
      document.getElementsByClassName("tui-image-editor-main")[0].style.top = "45px"; // 圖片距頂部工具欄的距離
    },
  },
};
</script>

<style scoped>
.drawing-container {
  height: 900px;
}
</style>

可以看到活生生的圖片編輯工具就出現(xiàn)了，是不是很簡單：

Vue圖片編輯插件tui.image-editor怎么用

國際化

由于是老外開發(fā)的，默認的文字描述都是英文，這里我們先漢化一下：

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: "區(qū)間",
  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": "鎖定寬高比例",
};

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",
        name: "image",
      },
      initMenu: "draw", // 默認打開的菜單項
      menuBarPosition: "bottom", // 菜單所在的位置
      locale: locale_zh, // 本地化語言為中文
    },
    cssMaxWidth: 1000, // canvas 最大寬度
    cssMaxHeight: 600, // canvas 最大高度
  }
);

效果如下：

Vue圖片編輯插件tui.image-editor怎么用

自定義樣式

默認風格為暗黑系，如果想改成白底，或者想改變按鈕的大小、顏色等樣式，可以使用自定義樣式。

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": "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",
};

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",
        name: "image",
      },
      initMenu: "draw", // 默認打開的菜單項
      menuBarPosition: "bottom", // 菜單所在的位置
      locale: locale_zh, // 本地化語言為中文
      theme: customTheme, // 自定義樣式
    },
    cssMaxWidth: 1000, // canvas 最大寬度
    cssMaxHeight: 600, // canvas 最大高度
  }
);

效果如下：

Vue圖片編輯插件tui.image-editor怎么用

按鈕優(yōu)化

通過自定義樣式，我們看到右上角的 Load 和 Download 按鈕已經被隱藏了，接下來我們再隱藏掉其他用不上的按鈕（根據業(yè)務需要），并添加一個保存圖片的按鈕。

<template>
  <div>
    <div id="tui-image-editor"></div>
    <el-button type="primary" size="small" @click="save">保存</el-button>
  </div>
</template>

// ...
methods: {
  init() {
    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",
            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 ="45px"; // 調整圖片顯示位置
    document.getElementsByClassName("tie-btn-reset tui-image-editor-item help") [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
  },
}

<style scoped>
.drawing-container {
  height: 900px;
  position: relative;
  .save {
    position: absolute;
    right: 50px;
    top: 15px;
  }
}
</style>

效果如下：

Vue圖片編輯插件tui.image-editor怎么用

可以看到頂部的重置按鈕，以及底部的鏡像和遮罩按鈕都已經不見了。右上角多了一個我們自己的保存按鈕，點擊按鈕，可以獲取到 base64 文件和 blob 文件。

完整代碼

<template>
  <div>
    <div id="tui-image-editor"></div>
    <el-button 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: '區(qū)間',
  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": "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: 'https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c1d7a1feb60346449c1a64893888989a~tplv-k3u1fbpfcp-watermark.image',
            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 = '45px' // 調整圖片顯示位置
      document.getElementsByClassName(
        'tie-btn-reset tui-image-editor-item help'
      )[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 scoped>
.drawing-container {
  height: 900px;
  position: relative;
  .save {
    position: absolute;
    right: 50px;
    top: 15px;
  }
}
</style>

以上就是 tui.image-editor 的基本使用方法，相比其他插件，tui.image-editor 的優(yōu)勢是功能強大，簡單易上手。

關于Vue圖片編輯插件tui.image-editor怎么用問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業(yè)資訊頻道了解更多相關知識。

向AI問一下細節(jié)

推薦閱讀：

免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。

上一篇新聞：
怎樣理解mysql
下一篇新聞：
C/C++?Qt?TreeWidget單層樹形組件怎么應用

猜你喜歡

AI
助
手

產品服務

地區(qū)劃分

專題活動

幫助支持

關于我們

售后咨詢

7*24小時在線電話：400-100-2938

7*24小時在線 QQ：800811969

關注億速云

億速云公眾號

手機網站二維碼

<sup id="gaywe"><dd id="gaywe"></dd></sup>

<input id="gaywe"><small id="gaywe"></small></input>