RenderPSD - 渲染示例

本页演示如何使用 RenderService 在浏览器中完成PSD渲染。你需要注册会员，拿到apiToken，并上传PSD，获取到psdKey后才能复现下面的示例。将智能对象 FRONT-CENTRAL 替换为指定图片，并支持导出渲染结果。

渲染结果

点击「开始渲染」查看效果

↓ 下载示例PSD

⚠️ 示例PSD文件来自网络，本站不拥有其版权，仅供功能演示说明。如有侵权，请及时联系我们删除下架。

运行日志

等待执行...

调用代码

下载 SDK v1.0.1

1 引入 render.min.js

<script src="/app/js/render.min.js"></script>

2 初始化 RenderService

const renderService = new RenderService({
    apiHost: 'https://renderpsd.podorn.com',   // API地址，同域可留空
    apiToken: '你的API TOKEN',
    width: 1000,
    height: 1000
});

3 加载PSD数据（方式二：通过 psdKey）

const psdKey = '你上传PSD后生成的psdKey';
await renderService.initKeys([psdKey]);

4 首次渲染到容器

const container = document.getElementById('container');
await renderService.renderAll(container);

5 替换智能对象并更新

const imageUrl = '图片网址或base64数据';
//FRONT-CENTRAL是这个PSD中要替换的智能对象图层名称
const list = {
    'FRONT-CENTRAL': imageUrl
};

await renderService.update(list, (renderedPsdKey) => {
    console.log('渲染完成的psdKey', renderedPsdKey);
});

6 导出指定psdKey的图片


// dataType: 'blob' 或 'base64'
// format: 'png' 或 'webp'或'jpeg'
// quality: 0~1，png格式quality参数无效,webp/jpeg格式quality参数有效，数值越大质量越好（文件也越大）
const dataType = 'blob';
const format = 'png';
const quality = 1;
const data = await renderService.toDataURLByKey(
    psdKey, format, quality, dataType
);
const url = URL.createObjectURL(data);
const a = document.createElement('a');
a.href = url;
a.download = 'render_result.png';
a.click();
URL.revokeObjectURL(url);

7 导出所有psdKey的图片（批量场景）

// 适合一次渲染了多个psdKey的场景
renderService.toDataURLAll(
    'png', 1,
    function (data, psdKey) {
        // 每导出一个psdKey都会调用一次该回调
        console.log('单个导出完成', psdKey);
    },
    'blob'
).then((dataItems) => {
    // dataItems 数组，每项含 dataUrl, psdKey, format
    for (const item of dataItems) {
        if (item.format === 'blob') {
            const url = URL.createObjectURL(item.dataUrl);
            const a = document.createElement('a');
            a.href = url;
            a.download = `render_${item.psdKey}.png`;
            a.click();
            URL.revokeObjectURL(url);
        }else{
            console.log('导出base64', item.dataUrl);
        }
    }
});