検索

ホームページ  >  記事  >  ウェブフロントエンド  >  強力な Vue 画像編集プラグインを共有します (ぜひ試してみてください!)

強力な Vue 画像編集プラグインを共有します (ぜひ試してみてください!)

青灯夜游
青灯夜游転載
2021-11-26 19:43:257549ブラウズ

この記事では、友達がいないほど強力な Vue 画像編集プラグインを紹介します。画像の回転、ズーム、切り抜き、落書き、注釈付け、テキストの追加などを行うことができます。ぜひ試してみてください。そして保存してください！

強力な Vue 画像編集プラグインを共有します (ぜひ試してみてください!)

[関連する推奨事項: 「vue.js チュートリアル 」]

最近、ユーザーが新しい要件を提案しました。教師はそれを修正できます。 生徒の画像の課題では、画像の回転、拡大縮小、トリミング、落書き、注釈、テキストの追加などが必要です。一見すると、かなりの量の毛が抜けてしまうように思えます。ダブルイレブン中に女性がチケットを購入できないようにするために、上記の機能を実現できる強力なプラグインはありますか?答えはもちろん「はい」です。

エフェクト表示

グラフィティ

強力な Vue 画像編集プラグインを共有します (ぜひ試してみてください!)

クロップ

強力な Vue 画像編集プラグインを共有します (ぜひ試してみてください!)

マーキング

強力な Vue 画像編集プラグインを共有します (ぜひ試してみてください!)

回転

強力な Vue 画像編集プラグインを共有します (ぜひ試してみてください!)

フィルター

強力な Vue 画像編集プラグインを共有します (ぜひ試してみてください!)

とても強力ではないでしょうか！他にもたくさんの機能がありますが、一つずつ紹介しません。それで、何を待っていますか?一緒に使ってください~

インストール

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>

生きた画像編集ツールが表示されることがわかります。非常に簡単ではありませんか:

強力な Vue 画像編集プラグインを共有します (ぜひ試してみてください!)

国際化

なぜなら私は外国人が開発しました。デフォルトのテキスト説明はすべて英語です。ここで最初に中国語化します: 

const locale_zh = {
  ZoomIn: "放大",
  ZoomOut: "缩小",
  Hand: "手掌",
  History: &#39;历史&#39;,
  Resize: &#39;调整宽高&#39;,
  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": "锁定宽高比例",
};

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 画像編集プラグインを共有します (ぜひ試してみてください!)

カスタム スタイル

デフォルトのスタイルは暗い色になっていますが、白に変更したい場合や、ボタンのサイズや色などを変更したい場合は、カスタム スタイルを使用できます。 

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 画像編集プラグインを共有します (ぜひ試してみてください!)

ボタンの最適化

スタイルをカスタマイズすると、[ロード]ボタンと[ダウンロード]ボタンが右上隅が非表示になっているので、使用しない他のボタンを (ビジネス ニーズに従って) 非表示にし、画像を保存するボタンを追加します。 

<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 画像編集プラグインを共有します (ぜひ試してみてください!)

上部のリセット ボタンと下部のミラー ボタンとマスク ボタンが消えていることがわかります。右上隅に独自の保存ボタンが追加されているので、このボタンをクリックして、base64 ファイルと BLOB ファイルを取得します。

完全なコード

<template>
  <div>
    <div id="tui-image-editor"></div>
    <el-button type="primary" size="small" @click="save">保存</el-button>
  </div>
</template>
<script>
import &#39;tui-image-editor/dist/tui-image-editor.css&#39;
import &#39;tui-color-picker/dist/tui-color-picker.css&#39;
import ImageEditor from &#39;tui-image-editor&#39;
const locale_zh = {
  ZoomIn: &#39;放大&#39;,
  ZoomOut: &#39;缩小&#39;,
  Hand: &#39;手掌&#39;,
  History: &#39;历史&#39;,
  Resize: &#39;调整宽高&#39;,
  Crop: &#39;裁剪&#39;,
  DeleteAll: &#39;全部删除&#39;,
  Delete: &#39;删除&#39;,
  Undo: &#39;撤销&#39;,
  Redo: &#39;反撤销&#39;,
  Reset: &#39;重置&#39;,
  Flip: &#39;镜像&#39;,
  Rotate: &#39;旋转&#39;,
  Draw: &#39;画&#39;,
  Shape: &#39;形状标注&#39;,
  Icon: &#39;图标标注&#39;,
  Text: &#39;文字标注&#39;,
  Mask: &#39;遮罩&#39;,
  Filter: &#39;滤镜&#39;,
  Bold: &#39;加粗&#39;,
  Italic: &#39;斜体&#39;,
  Underline: &#39;下划线&#39;,
  Left: &#39;左对齐&#39;,
  Center: &#39;居中&#39;,
  Right: &#39;右对齐&#39;,
  Color: &#39;颜色&#39;,
  &#39;Text size&#39;: &#39;字体大小&#39;,
  Custom: &#39;自定义&#39;,
  Square: &#39;正方形&#39;,
  Apply: &#39;应用&#39;,
  Cancel: &#39;取消&#39;,
  &#39;Flip X&#39;: &#39;X 轴&#39;,
  &#39;Flip Y&#39;: &#39;Y 轴&#39;,
  Range: &#39;区间&#39;,
  Stroke: &#39;描边&#39;,
  Fill: &#39;填充&#39;,
  Circle: &#39;圆&#39;,
  Triangle: &#39;三角&#39;,
  Rectangle: &#39;矩形&#39;,
  Free: &#39;曲线&#39;,
  Straight: &#39;直线&#39;,
  Arrow: &#39;箭头&#39;,
  &#39;Arrow-2&#39;: &#39;箭头2&#39;,
  &#39;Arrow-3&#39;: &#39;箭头3&#39;,
  &#39;Star-1&#39;: &#39;星星1&#39;,
  &#39;Star-2&#39;: &#39;星星2&#39;,
  Polygon: &#39;多边形&#39;,
  Location: &#39;定位&#39;,
  Heart: &#39;心形&#39;,
  Bubble: &#39;气泡&#39;,
  &#39;Custom icon&#39;: &#39;自定义图标&#39;,
  &#39;Load Mask Image&#39;: &#39;加载蒙层图片&#39;,
  Grayscale: &#39;灰度&#39;,
  Blur: &#39;模糊&#39;,
  Sharpen: &#39;锐化&#39;,
  Emboss: &#39;浮雕&#39;,
  &#39;Remove White&#39;: &#39;除去白色&#39;,
  Distance: &#39;距离&#39;,
  Brightness: &#39;亮度&#39;,
  Noise: &#39;噪音&#39;,
  &#39;Color Filter&#39;: &#39;彩色滤镜&#39;,
  Sepia: &#39;棕色&#39;,
  Sepia2: &#39;棕色2&#39;,
  Invert: &#39;负片&#39;,
  Pixelate: &#39;像素化&#39;,
  Threshold: &#39;阈值&#39;,
  Tint: &#39;色调&#39;,
  Multiply: &#39;正片叠底&#39;,
  Blend: &#39;混合色&#39;,
  Width: &#39;宽度&#39;,
  Height: &#39;高度&#39;,
  &#39;Lock Aspect Ratio&#39;: &#39;锁定宽高比例&#39;
}

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(&#39;#tui-image-editor&#39;), {
        includeUI: {
          loadImage: {
            path: &#39;https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c1d7a1feb60346449c1a64893888989a~tplv-k3u1fbpfcp-watermark.image&#39;,
            name: &#39;image&#39;
          },
          menu: [&#39;resize&#39;, &#39;crop&#39;, &#39;rotate&#39;, &#39;draw&#39;, &#39;shape&#39;, &#39;icon&#39;, &#39;text&#39;, &#39;filter&#39;], // 底部菜单按钮列表 隐藏镜像flip和遮罩mask
          initMenu: &#39;draw&#39;, // 默认打开的菜单项
          menuBarPosition: &#39;bottom&#39;, // 菜单所在的位置
          locale: locale_zh, // 本地化语言为中文
          theme: customTheme // 自定义样式
        },
        cssMaxWidth: 1000, // canvas 最大宽度
        cssMaxHeight: 600 // canvas 最大高度
      })
      document.getElementsByClassName(&#39;tui-image-editor-main&#39;)[0].style.top = &#39;45px&#39; // 调整图片显示位置
      document.getElementsByClassName(
        &#39;tie-btn-reset tui-image-editor-item help&#39;
      )[0].style.display = &#39;none&#39; // 隐藏顶部重置按钮
    },
    // 保存图片，并上传
    save() {
      const base64String = this.instance.toDataURL() // base64 文件
      const data = window.atob(base64String.split(&#39;,&#39;)[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: &#39;image/png&#39; }) // blob 文件
      const form = new FormData()
      form.append(&#39;image&#39;, 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 には利点があります。強力な機能を備え、シンプルで使いやすい。

プラグインは使いやすいのですが、画像を拡大して表示位置を手のひらでドラッグしてリセットボタンをクリックすると画像が消えてしまう場合があるという小さなバグも発見しました。解決策としては、ソースコードを変更してresetZoomメソッドを呼び出してリセット前のズーム率に戻す方法と、リセットボタンを自分で作成し、クリック後にthis.initメソッドを呼び出して再描画する方法の2つがあります。 。

バラの贈り物、香りを贈りましょう。役立つと思われた場合は、高評価といいねを押してください~

その他の API とデモについては、次を参照してください:

github アドレス: https:// github.com/ nhn/tui.image-editor

API とサンプルのアドレス: http://nhn.github.io/tui.image-editor/latest

# #この記事は以下から転載しています：https://juejin.cn/post/7027943745530101773

著者: Front-end A Fei

プログラミング関連の知識の詳細については、次を参照してください。

プログラミング入門! ！

以上が強力な Vue 画像編集プラグインを共有します (ぜひ試してみてください!)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

vue.js JS this github http https bug
声明：
この記事は掘金社区--前端阿飞で複製されています。侵害がある場合は、admin@php.cn までご連絡ください。
前の記事：Vue コンポーネントで手ぶれ補正とスロットルを使用する方法の簡単な分析次の記事：Vue コンポーネントで手ぶれ補正とスロットルを使用する方法の簡単な分析

関連記事

続きを見る