[JavaScript知识库]vue 前端编辑图片并获取base64

1，申请账号 搞定设计
2，获取 APP ID 和配置域名白名单 添加域名白名单(注意：本地配置，域名白名单不可用 http://localhost，会配置不成功，建议使用 Network 中的值，可不加端口号 http://***.**.**.***)

3，安装 npm i @gaoding/editor-sdk@next
4，代码编写

<template>
  <div class="hello">
    <div>
      <button @click="open">打开图片编辑器</button>
    </div>
  </div>
</template>

<script>
import { createImageEditor } from "@gaoding/editor-sdk";
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      editor: '',
    };
  },
  methods: {
   async open() {
      this.editor = createImageEditor({
        appId: "你的APP ID",
        // container: "#editorApp",
        //设置之后可将其展现放在相应的位置 注意：如果放入dialog中，有可能会匹配不到id，dialog弹窗与你所在的页面样式层级不同
      });
      this.editor.importImage("https://st0.dancf.com/static/02/202104280445-9936.png");
      editor.onSave(({ files, workId, type, title }) => {
        // 关闭编辑器
        this.editor.close();
        // 对结果进行下载
        const file = files[0];
         this.blobToBase64(file).then((res) => {
            // 转化后的base64
            console.log("base64", res);
          });
      });
    },
    blobToBase64(blob) {
      return new Promise((resolve, reject) => {
        const fileReader = new FileReader();
        fileReader.onload = (e) => {
          resolve(e.target.result);
        };
        fileReader.readAsDataURL(blob);
        fileReader.onerror = () => {
          reject(new Error("error"));
        };
      });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>