importImage(导入图片)

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

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

<code>editor.importImage([file], options);</code>

返回结果类型

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

使用场景

用户需要对一些图片进行编辑，比如裁剪，修改滤镜。另外该方法支持批量导入图片进行批量编辑。

例子

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

<code><!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.createImageEditor({
                appId: '在稿定开放平台应用详情里查看',
            });
            function change(e) {
                editor.importImage(e.target.files[0]).then(res => {
                    // 如果 res 为 false 表示没有进行导出操作
                    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', change);
        </script>
    </body>
</html>
</code>

参数说明

files

类型: (string|Blob)[]

需编辑的图片地址或者图片文件数组, 最多支持导入40张图片。支持的图片类型有 JPG JPGE PNG 格式。

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

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

options.fileTypes

版本: 2.0+

类型: string[]

控制导出文件的格式类型。目前支持的类型有 'jpg' | 'png'。

如果 fileTypes 传递的导出类型不符当前模板的导出格式时，会显示该模板默认的导出格式类型选项。

比如 fileTypes 传递的是 gif 但是当前使用的是个图片模板。那么导出类型还是只会展示 jpg png

<code>editor.importImage(['https://st0.dancf.com/static/02/202104280136-0091.png'], {
    fileTypes: ['png']
})</code>

options.disableModules

版本: 2.0+

类型: string[]

该方法用于隐藏编辑器对应模块。目前支持的隐藏模块如下

模块名	说明
panel.template	左侧模板面板
panel.ajustment	左侧调整面板
panel.mark	左侧标记面板
panel.text	左侧文字面板
panel.border	左侧边框面板
panel.element	左侧素材面板
panel.watermark	左侧水印面板
panel.upload	左侧我的面板

<code>// 隐藏模板面板和我的面板
editor.importImage(['https://st0.dancf.com/static/02/202104280136-0091.png'], {
    disableModules: ['panel.template', 'panel.upload']
})</code>

返回结果

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

如果返回 false 标识用户关闭了编辑器的默认弹窗

files 为导出的文件数组。 workId 为作品ID，开放者可以通过这个ID进行二次编辑

title 为该设计作品的标题。 type为导出文件的类型有 png jpg 等