vue3中项目需要图片编辑功能

    npm i tui-image-editor
    // or
    yarn add tui-image-editor
    
    
    <template>
      <div class="container">   <!-- 编辑图片的dom容器 -->
        <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",
      "header.display": "none",

      // 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>
    
    
    
            <template>
              <div>
                <div class="container">
                  <!-- 编辑图片的dom容器 -->
                  <div id="tui-image-editor" />
                </div>
                <img
                  src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c1d7a1feb60346449c1a64893888989a~tplv-k3u1fbpfcp-watermark.image"
                  @click="
                    editImage(
                      'https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c1d7a1feb60346449c1a64893888989a~tplv-k3u1fbpfcp-watermark.image'
                    )
                  "
                />
                <el-button @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";

            const ImageEditor = require("tui-image-editor");
            const localeZh = {
              // override default English locale to your custom
              Crop: "裁剪",
              ZoomIn: "放大",
              ZoomOut: "缩小",
              Hand: "拖拽",
              History: "历史记录",
              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",
              "header.display": "none",

              // 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 {
              name: "PreviewImage",
              data() {
                return {
                  instance: null, // 编辑图片实例
                  imageName: "", //图片名称
                };
              },
              methods: {
                // 编辑图片
                editImage(url) {
                  // 根据图片路径获取图片名称
                  let route = url.split("?")[0];
                  let name = route.split("/");
                  this.imageName = name[name.length - 1];
                  // 使用编辑组件
                  this.instance = new ImageEditor(
                    document.querySelector("#tui-image-editor"),
                    {
                      includeUI: {
                        // 表示使用它内置的 UI 控件  默认加载的图片
                        loadImage: {
                          path: "https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c1d7a1feb60346449c1a64893888989a~tplv-k3u1fbpfcp-watermark.image", //图片路径
                          name: this.imageName, //如果是根据传值过来的话传值图片的名称 也可以省略
                        },
                        initMenu: "draw", // 表示编辑器加载后，第一个被选中的操作菜单功能
                        //支持的菜单
                        menu: [
                          "crop", // 裁切
                          "flip", // 翻转
                          "rotate", // 旋转
                          "draw", // 添加绘画
                          "shape", // 添加形状
                          "icon", // 添加图标
                          "text", // 添加文本
                          "mask", // 添加覆盖
                          "filter", // 添加滤镜
                        ],
                        menuBarPosition: "left", // 菜单位置栏的位置，有四个选项可选：'top', 'bottom', 'left', 'right'
                      },
                      cssMaxWidth: 100, // 编辑器 Canvas 的最大宽度
                      cssMaxHeight: 100, // 编辑器 Canvas 的最大高度
                      locale: localeZh,
                      theme: customTheme,

                      selectionStyle: {
                        cornerSize: 20,
                        rotatingPointOffset: 70,
                      },
                    }
                  );
                  // canvas区域不遮挡图片 只显示编辑区
                  document.getElementsByClassName("tui-image-editor-main")[0].style.top = 0;
                  // 隐藏删除按钮  留下全部删除就够了
                  document.getElementsByClassName(
                    "tie-btn-delete tui-image-editor-item help"
                  )[0].style.display = "none";
                },
                // 保存图片
                save() {
                  var base64Data = this.instance.toDataURL();
                  var iframe =
                    "<iframe width='100%' height='100%' src='" + base64Data + "'></iframe>";
                  var a = window.open();
                  a.document.open();
                  a.document.write(iframe);
                  a.document.close();
                },
              },
            };
            </script>
            <style scoped>
            img {
              width: 400px;
              height: 400px;
            }
            </style>