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>