乐趣区

关于前端:快给你的Vue项目添加一个编辑图片组件吧

jiezi

给大家举荐一款性能极其弱小的图片编辑插件 tui.image-editor

疾速体验

  • 首选在你的前端我的项目中装置：
npm i tui-image-editor
// or
yarn add tui-image-editor
  • 当初你就去新建一个 .vue 文件，复制进去上面这段代码：
<template>
  <div id="tui-image-editor"></div>
</template>
<script>
import "tui-image-editor/dist/tui-image-editor.css";
import "tui-color-picker/dist/tui-color-picker.css";
const ImageEditor = require("tui-image-editor");
export default {data() {
    return {instance: null,}
  },
  mounted() {
    this.instance = new ImageEditor(document.querySelector("#tui-image-editor"),
        {
          includeUI: {
            loadImage: {
              path: "https://uploadbeta.com/api/pictures/random/",
              name: "image"
            },
            initMenu: "draw",
            menuBarPosition: "bottom"
          },
        }
      );
  }
}
</script>

默认成果：

国际化：

工具中的形容默认都是英文的咱们先把这部分汉化一下：

// 将原有的代码改为这样
<template>
  <div id="tui-image-editor"></div>
</template>
<script>
import "tui-image-editor/dist/tui-image-editor.css";
import "tui-color-picker/dist/tui-color-picker.css";
const ImageEditor = require("tui-image-editor");
const locale_zh = {
  // override default English locale to your custom
  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: "混合色"
  // etc...
};
export default {data() {
    return {instance: null,}
  },
  mounted() {
    this.instance = new ImageEditor(document.querySelector("#tui-image-editor"),
        {
          includeUI: {
            loadImage: {
              path: "https://uploadbeta.com/api/pictures/random/",
              name: "image"
            },
            initMenu: "draw",
            menuBarPosition: "bottom",
            locale: locale_zh // 本地化语言为中文
          },
        }
      );
  }
}
</script>

汉化后


这时候你会发现你可能不须要右上角的 Load 和Download和左上角这个默认的 logo，咱们能够通过自定义主题将这部分改掉：
批改下面的代码为：

<template>
  <div id="tui-image-editor"></div>
</template>
<script>
import "tui-image-editor/dist/tui-image-editor.css";
import "tui-color-picker/dist/tui-color-picker.css";
const ImageEditor = require("tui-image-editor");
const locale_zh = {
  // override default English locale to your custom
  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: "混合色"
  // etc...
};
const customTheme = {
  // image 坐上角度图片
  "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 {data() {
    return {instance: null,}
  },
  mounted() {
    this.instance = new ImageEditor(document.querySelector("#tui-image-editor"),
        {
          includeUI: {
            loadImage: {
              path: "https://uploadbeta.com/api/pictures/random/",
              name: "image"
            },
            initMenu: "draw",
            menuBarPosition: "bottom",
            locale: locale_zh,
            theme: customTheme, // 自定义主题
          },
        }
      );
  }
}
</script>

自定义款式成果


咱们将下面的默认图片,Load和 Download 按钮去掉了，然而会发现下面存在了一条红色的，这就节约了咱们编辑图片的空间，咱们持续优化：

须要咱们对款式进行批改
// ...
document.getElementsByClassName("tui-image-editor-main")[0].style.top = 0;

下一步咱们要拿到编辑后的图片了：

这个插件提供了一个 toDataURL 的办法, 能够将咱们编辑后的图片转为 base64, 而后咱们能够通过转为form 表单上传到咱们的服务器，或者转为图片，这里提供一份上传到后盾的逻辑：

// ...
methods: {uploadImg() {const base64String = this.instance.toDataURL();
    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"});
    const fd = new FormData();
    fd.append("image", blob);
    // upload fd
  }
}

最初，放上一段残缺的代码：

<template>
  <div class="container">
    <div id="tui-image-editor"></div>
    <button @click="uploadImg"> 实现并上传 </button>
  </div>
</template>
<script>
import "tui-image-editor/dist/tui-image-editor.css";
import "tui-color-picker/dist/tui-color-picker.css";
const ImageEditor = require("tui-image-editor");
const locale_zh = {
  // override default English locale to your custom
  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: "混合色",
  // etc...
};
const customTheme = {
  // image 坐上角度图片
  "common.bi.image": "https://uploadbeta.com/api/pictures/random/", // 在这里换上你喜爱的 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 {data() {
    return {instance: null,};
  },
  mounted() {
    this.instance = new ImageEditor(document.querySelector("#tui-image-editor"),
      {
        includeUI: {
          loadImage: {
            path: "https://uploadbeta.com/api/pictures/random/",
            name: "image",
          },
          initMenu: "draw",
          menuBarPosition: "bottom",
          locale: locale_zh,
          theme: customTheme,
        },
      }
    );
    document.getElementsByClassName("tui-image-editor-main")[0].style.top = 0;
  },
  methods: {uploadImg() {const base64String = this.instance.toDataURL();
      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"});
      const fd = new FormData();
      fd.append("image", blob);
      // upload fd
    },
  },
};
</script>

<style lang="css" scoped>
.container {
  height: 95vh;
  text-align: center;
}
</style>

最终成果，战歌起！

最初

如果有什么疑难或者应用中的其余问题能够在评论中讨论一下。

退出移动版