importImage(导入图片)

打开抠图编辑器并导入图片进行抠图

在编辑器实例化完毕后，可以调用 importImage 方法导入图片

editor.importImage(file);

返回结果类型

false | { files: Blob[]; workId: string }
// 如果为 false 表示用户关闭了编辑器，没有进行导出

使用场景

用户需要对图片进行抠图。

注意项: 目前抠图仅支持单张抠图，不支持批量操作

例子

下面例子为选择图片后，打开抠图编辑器进行抠图，并将抠图后的图片文件插入到 html 中

<!DOCTYPE html>
<html>
    <head>
        <script src="https://open.gaoding.com/assets/editor-sdk-v2.js"></script>
    </head>
    <body>
        <input type="file"/>
        <script type="text/javascript">
            const editor = window.gaoding.createKoutuEditor({
                appId: '在稿定开放平台应用详情里查看',
            });
            function change(e) {
                editor.close();
                editor.importImage(e.target.files[0]).then(res => {
                    // 如果 res 为 false 表示没有进行导出操作
                    if (res) {
                        // files 为导出的文件数组
                        const { files, workId } = res;
                        const url = URL.createObjectURL(files[0]);
                        const img = document.createElement('img');
                        img.src = url;
                        document.body.append(img);
                    }
                })
            }
            document.querySelector('input').addEventListener('change', change);
        </script>
    </body>
</html>

参数说明

files

类型: string|Blob

需要编辑的图片地址或者图片文件。支持的图片类型有 JPG JPGE PNG 格式。

注意项: 如果是使用URL形式，请确保图片支持跨域请求, 并且 response 返回的 content-type 返回的是图片格式

const editor = window.gaoding.createKoutuEditor({
    appId: 'xxx',
});
editor.importImage('https://st0.dancf.com/static/02/202104280136-0091.png');
// 支持 Blob 类型, 所以可以导入 input 本地上传的文件
editor.importImage(e.target.files[0])

返回值

类型: Promise<false | { files: Blob[]; workId: string }>

如果返回 false 表示关闭了默认的弹窗。反之返回作品信息。 files: 抠图结果的Blob文件， workId: 作品id 可用于二次编辑

注意项: 因为返回的是Promise 所以无论用户点击几次，只会返回第一次导出导出的抠图结果，所以要对用户多次导出处理请使用 onSave 参数进行控制