抠图编辑器

通过 JavaScript SDK 的方式，将稿定编辑器添加到网站中

该文档适用于 2.x 版本。如果你当前使用的是 1.x 版本。请升级版本！

浏览器版本要求

Chrome >= 60

使用前提

使用前需在开发平台创建应用, 并在应用中添加抠图编辑器产品，可参考入驻指引了解。

步骤1: 添加域名白名单

使用编辑器产品时，出于安全考量，需将应用和网站域名进行绑定。未绑定的域名为非法域名，会出现403禁止访问的提示具体操作看添加域名白名单

步骤2: 安装 JavaScript SDK

安装的方式有两种

第一种通过 NPM 方式

npm i @gaoding/editor-sdk@next
# or
yarn add @gaoding/editor-sdk@next

第二种通过 CDN 方式

<script src="https://open.gaoding.com/assets/editor-sdk-v2.js"></script>

该方式的优点是使用简单并且保证 sdk 为最新版本，不用因 SDK 更新而重新安装

步骤3: 实例化抠图编辑器

参数中的 appId 可在我的应用中点击应用管理后，在应用详情左侧查看

<!DOCTYPE html>
<html>
    <head>
        <script src="https://open.gaoding.com/assets/editor-sdk-v2.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            const editor = window.gaoding.createKoutuEditor({
                appId: '在稿定开放平台应用详情里查看',
            });
        </script>
    </body>
</html>

步骤4: 打开抠图编辑器

下面例子中，展示了如何使用稿定提供的抠图编辑器创建一个空白画布。

<!DOCTYPE html>
<html>
    <head>
      <script src="https://open.gaoding.com/assets/editor-sdk-v2.js"></script>
    </head>
    <body>
        <button>打开抠图</button>
        <script type="text/javascript">
            const editor = window.gaoding.createKoutuEditor({
                appId: '在稿定开放平台应用详情里查看',
            });
            function create() {
                editor.importImage(
                    'https://gd-filems.dancf.com/mcm79j/mcm79j/78199/6d62576f-5240-4d22-ae26-a157a4a2d4891793409.png'
                ).then(res => {
                    // 如果 res 为 false 表示没有进行导出操作
                    if (res) {
                        // files 为导出的文件数组
                        const { files } = res;
                        console.log(files);
                        // ...do something
                    }
                })
            }
            document.querySelector('button').addEventListener('click', create);
        </script>
    </body>
</html>

控制权益消费和用户绑定

稿定支持平台方统一付费后供用户使用，如果是用户直接付费给稿定的可不关注该章节

平台方付费场景下，用户账户和稿定账户一对一绑定，用户不直接付费给稿定。平台开发者控制用户是否有权限进行权益消费（下载成品图）。

为此，开发者需在编辑器实例化参数中添加三个配置。

<!DOCTYPE html>
<html>
    <head>
        <script src="https://open.gaoding.com/assets/editor-sdk-v2.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            const editor = window.gaoding.createKoutuEditor({
                appId: '在稿定开放平台应用详情里查看',
                // 用户授权
                async authorize() {
                    // return "xxxxxx" 返回授权码
                },
                // 获取权益使用凭证
                async getUseRightCert(info) {
                    // return  'xxxx' 返回权益标识
                },
            });
        </script>
    </body>
</html>

添加 authorize 方法，该方法返回调用开放平台获取授权码返回的 code 字段。具体调用方式查看获取授权码
添加 getUseRightCert 方法，该方法用于扣减权益。具体调用方式查看扣减权益

例子

下面以 Node 环境为例子，模拟鉴权和扣除权益的流程

server.js

const axios = require('axios');
const express = require('express');
const {
    createHmac
} = require('crypto');

const app = express();

axios.defaults.baseURL = 'https://open-api.gaoding.com';
axios.interceptors.request.use(async (config) => {
    const timestamp = Math.floor(Date.now() / 1000);
    const ak = '控制台查看AK';
    const sk = '控制台查看SK';
    config.headers['x-AccessKey'] = ak;
    config.headers['x-Timestamp'] = timestamp;
    let canonicalRequest = `${config.method.toUpperCase()}@${(config.url + '/').replace(
            /\/\/$/,
            '/',
        )}`;
    if (config.params) {
        const qs = Object.keys(config.params || {})
            .sort()
            .map((k) => `${k}=${config.params[k]}`)
            .join('&');
        canonicalRequest += `@${qs}`;
    } else {
        canonicalRequest += '@';
    }
    canonicalRequest += `@${timestamp}`;
    if (config.data) {
        canonicalRequest += `@${JSON.stringify(config.data)}`;
    }
    console.log(canonicalRequest);
    config.headers['x-Signature'] = createHmac('sha1', sk)
        .update(canonicalRequest)
        .digest('base64');
    console.log(config);
    return config;
});

app.get('/user-code', async (request, response) => {
    // 调用开放平台获取授权码接口
    const {
        data
    } = await axios.get(
        '/api/authorized/code', {
            params: {
                app_id: request.query.app_id,
                uid: request.query.uid,
            },
            headers: {

            }
        });
    response.send({
        code: data.code,
    });
});

app.get('/user-right', async (request, response) => {
    // 调用开放平台扣除用户权益接口
    const {
        data
    } = await axios.post('/api/use-cert', {
        app_id: request.query.app_id,
        ability_code: request.query.ability_code,
        works_id: request.query.works_id,
    });

    response.send({
        use_cert: data.use_cert,
    });
});

app.listen(3000);

index.html

<!DOCTYPE html>
<html>
    <head>
        <script src="https://open.gaoding.com/assets/editor-sdk-v2.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            const editor = window.gaoding.createKoutuEditor({
                appId: '在稿定开放平台应用详情里查看',
                async authorize() {
                    return fetch('https://www.example.com/user-code', {
                        headers: {
                            'content-type': 'application/json',
                        },
                        params: {
                            app_id: '应用id',
                            uid: '当前的用户标识',
                        },
                    })
                        .then((res) => res.json())
                        .then((res) => res.code);
                    // return "xxxxxx" 返回授权码
                },
                async getUseRightCert(info) {
                    return fetch('https://www.example.com/user-right', {
                        headers: {
                            'content-type': 'application/json',
                        },
                        params: {
                            app_id: info.appId,
                            works_id: info.workId,
                            ability_code: info.abilityCode,
                        },
                    })
                        .then((res) => res.json())
                        .then((res) => res.use_cert);
                },
            });
        </script>
    </body>
</html>