editImage(修改图片作品)
通过已知的用户作品ID,编辑图片
在编辑器实例化完毕后, 可以通过 editImage方法,编辑用户以前编辑的历史图片(二次编辑)
editor.editImage('作品ID')// 在 editor 导出后可以通过 workId 字段获取
例子
下面例子为,点击按钮时,打开 ID 为 359445 的图片进行编辑,编辑完成后,编辑重新将设计结果图插入到页面中进行二次编辑
<!DOCTYPE html>
<html>
<head>
<script src="https://open.gaoding.com/assets/editor-sdk.js"></script>
</head>
<body>
<input type="file" />
<script type="text/javascript">
const editor = window.gaoding.createImageEditor({
appId: '在稿定开放平台应用详情里查看',
});
async function create(e) {
let res = await editor.importImage(e.target.files[0]);
if (res) {
// 二次编辑
res = editor.editImage(id: res.workId);
if (res) {
editor.close();
// files 为导出的文件数组
const { files } = res;
const url == URL.createObjectURL(files[0]);
const img = document.createElement('img');
img.src = url;
document.body.append(img);
}
}
}
document.querySelector('input').addEventListener('change', create);
</script>
</body>
</html>
注意: 如果没有通过 authorize
进行账户绑定,可能会出现用户信息丢失导致,workId
无法正常使用
参数说明
id
类型: string | number
用户以前通过 importImage
返回得到的 workId
options.fileTypes
版本: 2.0+
类型: string[]
控制导出文件的格式类型。 目前支持的格式类型有 'jpg' | 'png'
。
如果 fileTypes
传递的导出类型不符当前模板的导出格式时,将显示该默认的导出格式类型选项。
比如 fileTypes
传递的是 gif 但是当前使用的是个图片模板。 那么导出类型还是只会展示 jpg png
editor.editImage('xxx', {
fileTypes: ['png']
})
options.disableModules
版本: 2.0+
类型: string[]
该方法用于隐藏编辑器对应模块。目前支持的隐藏模块如下
模块名 | 说明 |
panel.template | 左侧模板面板 |
panel.ajustment | 左侧调整面板 |
panel.mark | 左侧标记面板 |
panel.text | 左侧文字面板 |
panel.border | 左侧边框面板 |
panel.elment | 左侧元素面板 |
panel.watermark | 左侧水印面板 |
panel.upload | 左侧我的面板 |
// 隐藏模板面板和我的面板
editor.editImage('xxx', {
disableModules: ['panel.template', 'panel.upload']
})
返回结果
类型: Promise<false | { files: Blob[]; workId: string; title: string; type: string; }>
如果返回 false
标识用户关闭了编辑器的默认弹窗
files
为导出的文件数组。 workId
为作品ID, 开放者可以通过这个ID进行二次编辑
title
为该设计作品的标题。 type
为导出文件的类型 有 png jpg
等
注意项: 因为返回的是一个 Promise, 所以不管用户完成多少次, 返回的只有第一次导出的结果。 如果要持续对用户导出结果做出处理。请使用 editor.onSave
方法。