vue中使用图像编辑器tui-image-editor(二)——应用示例

vue中使用图像编辑器tui-image-editor(二)——应用示例

效果

代码

mark.vue

<template>
  <div class="drawing-container">
    <div id="tui-image-editor"></div>
    <el-button class="save" type="primary" size="small" @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'
import ImageEditor from 'tui-image-editor'
// import img from "@/assets/img/dg.jpg";
// import img from "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg";
const locale_zh = {
  ZoomIn: "放大",
  ZoomOut: "缩小",
  Resize: "调整宽高",
  // Undo: '撤销',
  // Reset: '重置',
  Rotate: "旋转",
  // 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 {
  name: 'imgBrief',
  data() {
    return {
      instance: null,
      imgURL:''
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    // 图片工具初始化
    init() {
      this.instance = new ImageEditor(
        document.querySelector("#tui-image-editor"),
        {
          includeUI: {
            loadImage: {
              // path: 'https://pics7.baidu.com/feed/10dfa9ec8a136327684e46c100197fe40afac7c4.jpeg', // 饿了么图片
              path: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', // 饿了么图片
              // path: 'https://aqsk.hbgs.cloud:8888/static/2022/09/30/b0c03de6-1a87-44d6-9b38-aa9c5f31d0ef.jpg', // 公司图片
              // path: this.$store.state.user.imgValue,
            //   path:img,
              name: "image",
            },
            menu: ["resize", "rotate"], // 底部菜单按钮列表 隐藏镜像flip和遮罩mask
            initMenu: "rotate", // 默认打开的菜单项
            menuBarPosition: "bottom", // 菜单所在的位置
            locale: locale_zh, // 本地化语言为中文
            theme: customTheme, // 自定义样式
          },
          cssMaxWidth: 240, // canvas 最大宽度
          cssMaxHeight: 560, // canvas 最大高度
        }
      );
      document.getElementsByClassName("tui-image-editor-main")[0].style.top =
        "45px"; // 调整图片显示位置
      document.querySelector(".tui-image-editor-help-menu").style.display =
        "none";
      // document.querySelector('[tooltip-content="ZoomIn"]').style.display = 'none' // 放大
      // document.querySelector('[tooltip-content="ZoomOut"]').style.display = 'none' // 缩小
      // document.querySelector('[tooltip-content="Hand"]').style.display = 'none' // 拖动界面

      document.querySelector('[tooltip-content="Undo"]').style.display = "none"; // 上一步
      document.querySelector('[tooltip-content="Redo"]').style.display = "none"; // 下一步
      document.querySelector('[tooltip-content="Reset"]').style.display =
        "none"; // 完全重新编辑
      document.querySelector('[tooltip-content="History"]').style.display =
        "none";
      document.querySelector('[tooltip-content="Delete"]').style.display =
        "none"; // 删除选中编辑内容
      document.querySelector('[tooltip-content="DeleteAll"]').style.display =
        "none"; // 清空
      // 隐藏分割线
      document
        .querySelectorAll(".tui-image-editor-icpartition")
        .forEach((item) => {
          item.style.display = "none";
        });
      document.getElementsByClassName(
        "tie-btn-reset tui-image-editor-item help"
      )[0].style.display = "none"; // 隐藏顶部重置按钮
    },
    // 保存图片，并上传
    save() {
      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 file = new File([ia], "gis图片", { type: "image/png" });
      // const fd = new FormData();
      // fd.append("file", file);
      // fd.append("groupId", this.editGroupId);
      // fd.append("type", 4);



      this.imgURL = URL.createObjectURL(file);
    //   console.log("map", this.layerImg);
      // this.layerImg.hide();
    //   this.mapValue.removeLayer(this.layerImg);
    //   if (this.layerImage === null) {
        // this.rotateImg(this.imgURL, 1);
    //   } else {
    //     this.layerImage.hide();
        // this.rotateImg(this.imgURL, Date.now());
    //   }



      //  this.layerImage = new maptalks.ImageLayer("images", [{
      //     url : this.imgURL ,
      //     // url : '',
      //     extent: this.mapValue.getExtent(),
      //     opacity : 0.5
      // }]);
      // console.log('新图层',this.layerImage);
      // this.layerImage.addTo(this.mapValue);
      //  map.removeLayer(this.layerImg);
      //  this.$nextTick(() => {
      // this.setMap(this.imgURL)
      //  });
      console.log("file图片数据", file);
    },
        // 图片旋转
    // rotateImg(img, sign) {
    //   this.layerImage = new maptalks.ImageLayer(sign, [
    //     {
    //       url: img,
    //       // url : '',
    //       extent: this.mapValue.getExtent(),
    //       opacity: 0.5,
    //     },
    //   ]);
    //   this.layerImage.addTo(this.mapValue);
    // },
  }
}
</script>

<style lang="scss" scoped>
.drawing-container {
  height: 600px;
  width: 600px;
  position: relative;
  .save {
    position: absolute;
    right: 50px;
    top: 15px;
  }
}
</style>