Vue front-end edits pictures and gets base64

1. Apply for an account to complete the design.
2. Obtain the APP ID and configure the domain name whitelist. Add the domain name whitelist (note: local configuration, if the domain name whitelist is unavailable http://localhost, the configuration will be unsuccessful. It is recommended to use Networkthe value in , and the port number can be omitted http://***.**.**.***)

3. Installation npm i @gaoding/editor-sdk@next
4. Code writing

<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>