vuePC端的图片编辑器

72 阅读1分钟

首先,这个编辑本身我是自己写的,但是嘞后来又要保持本身大小又要返回显示时固定 大小,反正嘞就是怎么都不满意。我就直接一搜就看到了
npm install tui-image-editor

我是只要一个画框的,直接上代码:

`<template>
  <div style="height: 100vh; width: 100vh" class="d-flex a-end j-sb">
    <div id="tui-image-editor"></div>
    <el-button type="primary" @click="uploadImg">保存</el-button>
    <el-button type="primary" @click="mark">清空</el-button>
    <!-- <div
      style="
        position: absolute;
        bottom: 2%;
        left: 41%;
        z-index: 999;
        width: 50px;
        height: 50px;
      "
      @click="mark"
      v-if="flag"
    ></div> -->
  </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...
};
// 通过在主题中改变样式隐藏掉我们不需要的header
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",
  "header.display": "none", // 隐藏我们的header

  // 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,
      productPhotoCanvas: "",
      flag: true,
    };
  },
  props: {
    productPhoto: {
      type: String,
      default: "",
    },
    productPhotoTop: {
      type: String,
      default: "",
    },
  },
  mounted() {
    this.productPhotoCanvas = this.productPhotoTop;
    this.init();
  },
  // ...
  methods: {
    init() {
      this.instance = new ImageEditor(
        document.querySelector("#tui-image-editor"),
        {
          includeUI: {
            loadImage: {
              path: this.productPhotoCanvas,
              name: "image",
            },
            initMenu: "",
            menuBarPosition: "bottom",
            locale: locale_zh,
            theme: customTheme, // 自定义主题
            menu: [
              "shape", // 添加形状
            ],
            cssMaxWidth: 1000,
            cssMaxHeight: 800,
          },
        }
      );
      document.getElementsByClassName("tui-image-editor-main")[0].style.top = 0;
      document.getElementsByClassName(
        "tie-btn-reset tui-image-editor-item help"
      )[0].style.display = "none"; // 隐藏顶部重置按钮
      document.getElementsByClassName(
        "tie-btn-zoomIn tui-image-editor-item help enabled"
      )[0].style.display = "none"; // 隐藏顶部放大按钮
      document.getElementsByClassName(
        "tie-btn-zoomOut tui-image-editor-item help enabled"
      )[0].style.display = "none"; // 隐藏顶部缩小按钮
      document.getElementsByClassName(
        "tie-btn-hand tui-image-editor-item help enabled"
      )[0].style.display = "none"; // 隐藏顶部缩小按钮
      document.getElementsByClassName(
        "tui-image-editor-icpartition"
      )[0].style.display = "none";
      document.getElementsByClassName(
        "tie-btn-history tui-image-editor-item help enabled"
      )[0].style.display = "none";
      document.getElementsByClassName(
        "tie-btn-delete tui-image-editor-item help"
      )[0].style.display = "none";
      document.getElementsByClassName(
        "tie-btn-deleteAll tui-image-editor-item help"
      )[0].style.display = "none";
      document.getElementsByClassName(
        "tui-image-editor-icpartition"
      )[1].style.display = "none";
      document.getElementsByClassName(
        "tui-image-editor-button circle"
      )[0].style.display = "none"; //隐藏圆
      document.getElementsByClassName(
        "tui-image-editor-button triangle"
      )[0].style.display = "none";
      document.getElementsByClassName(
        "tie-color-fill tui-image-editor-button"
      )[0].style.display = "none";
    },
    uploadImg() {
      const base64String = this.instance.toDataURL();
      let obj = {
        url: base64String,
        flag: false,
      };
      this.$emit("dataURLClick", obj);
    },
    mark() {
      this.productPhotoCanvas = this.productPhoto;
      this.flag = false;
      this.init();
    },
  },
};
</script>
`

loadImage 就是需要做操作的图片 menuBarPosition菜单显示方向

initMenu默认显示的菜单 locale汉化整体文字

theme自定义主题 menu要显示的菜单,我只要了一个画框shape

cssMaxWidth canvas的最大宽 cssMaxHeightcanvas的最大高

这个是隐藏不需要的按钮的,其余按钮类似,找到class获取下来就可以直接操作

`document.getElementsByClassName(
        "tie-btn-reset tui-image-editor-item help"
      )[0].style.display = "none"; // 隐藏顶部重置按钮`
        

这个是把操作完的图片转为base64,可以传到后端再显示,也可以直接img const base64String = this.instance.toDataURL();