@gaoding/editor-sdk
Version:
稿定编辑器对外 SDK
100 lines (93 loc) • 3.7 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body,html {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="abs" style="width: 100%; height: 100%"></div>
<script src="./src/index.ts"></script>
<script>
var gdEditor = new GdEditorSdk({
container: '',
autoClose: true,
appId: 'shen_ce_com_poster_editor',
// appId: 'www_haoche_cn',
buttonText: '完成',
// 下载完成
onCompleted: function(file) {
var files = file.files; // 文件对象 {width, height, blob}
var workId = file.workId; // 用户作品 ID
var sourceId = file.sourceId; // 原始模板 ID
// 直接展示
var url = window.URL.createObjectURL(files[0].blob);
var img = document.createElement('img');
img.src = url;
document.body.append(img);
// 上传的例子
const form = new FormData();
form.append('file', files[0].blob, 'gaoding.jpg');
// 需要自行引入 jQuery 或其他请求库
$.ajax({
url: 'url',
type: 'post',
contentType: 'multipart/form-data',
data: form,
success: function (res) {
alert("上传成功");
}
});
},
// 模板加载完成
onTempletLoaded: function(editor) {
var url = 'https://st0.dancf.com/csc/213/configs/system/20210222-164547-cf71.svg';
return new Promise((resolve, reject) => {
var image = new Image();
image.onload = () => resolve(image);
image.onerror = reject;
image.src = url;
}).then(img => {
var radio = Math.min(
editor.width / img.width,
editor.height / img.height
) * 0.5;
editor.setWatermark(url);
// 添加图片元素至模板
// editor.addElement({
// type: 'image',
// url: img.src,
// width: img.width * radio,
// height: img.height * radio
// }).then(() => {
// // alert('添加成功');
// });
});
},
onClose() {
console.log('close');
gdEditor.close();
}
});
gdEditor.open({
ext: {
// exportTypes: 'jpg,png,pdf',
url: 'https://pic.maimiao.icu/erp/20210330/202103301431279936.jpg'
// jwt: 'eyJ0eXBlIjoiSldUIiwiYWxnIjoiSFMyNTYifQ.eyJpc3MiOiI0MzcwMjE3MTM4ODc1OTAiLCJzdWIiOjEwMDAwMSwiYXVkIjoiNDM3MDIxNzEzODg3NTkwIiwiZXhwIjoxNjM5NTU0NjcxfQ.KuQHi6XHQVdveEyg3CqX6hsmyqsYzrBFxJWh940co6c',
// id: '13508623332673596',
// mode: 'user',
// id: 112070,
// thirdCateId: 80,
// thirdPartyUserCode : "e5d4268107f04364a2006fb23562fe86"
}
});
</script>
<script type="text/javascript" src="/gd-editor-sdk.min.js"></script></body>
</html>