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

做網(wǎng)站、網(wǎng)站建設(shè)介紹好的網(wǎng)站是理念、設(shè)計(jì)和技術(shù)的結(jié)合。成都創(chuàng)新互聯(lián)擁有的網(wǎng)站設(shè)計(jì)理念、多方位的設(shè)計(jì)風(fēng)格、經(jīng)驗(yàn)豐富的設(shè)計(jì)團(tuán)隊(duì)。提供PC端+手機(jī)端網(wǎng)站建設(shè)，用營(yíng)銷思維進(jìn)行網(wǎng)站設(shè)計(jì)、采用先進(jìn)技術(shù)開(kāi)源代碼、注重用戶體驗(yàn)與SEO基礎(chǔ)，將技術(shù)與創(chuàng)意整合到網(wǎng)站之中，以契合客戶的方式做到創(chuàng)意性的視覺(jué)化效果。

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

效果展示

涂鴉

裁剪

標(biāo)注

旋轉(zhuǎn)

濾鏡

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

安裝

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

使用

快速體驗(yàn)

復(fù)制以下代碼，將插件引入到自己的項(xiàng)目中。

<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: '居中',
  Right: '右對(duì)齊',
  Color: '顏色',
  'Text size': '字體大小',
  Custom: '自定義',
  Square: '正方形',
  Apply: '應(yīng)用',
  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': '自定義圖標(biāo)',
  'Load Mask Image': '加載蒙層圖片',
  Grayscale: '灰度',
  Blur: '模糊',
  Sharpen: '銳化',
  Emboss: '浮雕',
  'Remove White': '除去白色',
  Distance: '距離',
  Brightness: '亮度',
  Noise: '噪音',
  'Color Filter': '彩色濾鏡',
  Sepia: '棕色',
  Sepia2: '棕色2',
  Invert: '負(fù)片',
  Pixelate: '像素化',
  Threshold: '閾值',
  Tint: '色調(diào)',
  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', // 默認(rèn)打開(kāi)的菜單項(xiàng)
          menuBarPosition: 'bottom', // 菜單所在的位置
          locale: locale_zh, // 本地化語(yǔ)言為中文
          theme: customTheme // 自定義樣式
        },
        cssMaxWidth: 1000, // canvas 最大寬度
        cssMaxHeight: 600 // canvas 最大高度
      })
      document.getElementsByClassName('tui-image-editor-main')[0].style.top = '45px' // 調(diào)整圖片顯示位置
      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)勢(shì)是功能強(qiáng)大，簡(jiǎn)單易上手。

關(guān)于Vue圖片編輯插件tui.image-editor怎么用問(wèn)題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒(méi)有解開(kāi)，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識(shí)。

分享文章：Vue圖片編輯插件tui.image-editor怎么用
網(wǎng)站地址：http://chinadenli.net/article6/gspoog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、用戶體驗(yàn)、Google、網(wǎng)站營(yíng)銷、ChatGPT、虛擬主機(jī)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)