海报设计器接入文档

{
  "apiKey": "cs_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  "serviceType": "Poster"
}

{
  "success": true,
  "data": {
    "token": "a1b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6",
    "serviceType": "Poster",
    "expiresAt": "2026-05-17T11:30:00.0000000Z",
    "expiresIn": 3600
  }
}

curl -X POST https://your-webapi.com/api/auth/access-token \
  -H "Content-Type: application/json" \
  -d '{
    "apiKey": "cs_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    "serviceType": "Poster"
  }'

<!-- 1. 嵌入设计器 iframe -->
<iframe id="posterDesigner"
  src="https://your-domain.com/poster/index.html"
  style="width:100%; height:100vh; border:none;">
</iframe>

<script>
  const iframe = document.getElementById('posterDesigner');

  // 2. iframe 加载完成后发送初始化数据
  iframe.addEventListener('load', () => {
    iframe.contentWindow.postMessage({
      type: 'INIT_DESIGNER_DATA',
      timestamp: Date.now(),
      source: 'my-app',
      data: {
        // === 必填 ===
        token: 'a1b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6',
        saveApiUrl: 'https://your-api.com/poster/save',

        // === 画布配置 ===
        templateId: 'order_poster_001',
        canvasSize: { width: 800, height: 1200 },
        canvasBackgroundColor: '#ffffff',
        title: '订单海报',
        description: '用于订单分享的海报模板',

        // === 业务扩展 ===
        extraData: {
          orderId: 'ORD20260516001',
          shopId: 'shop_8888'
        },

        // === 数据源字段（设计器中文本可绑定） ===
        dataSourceFields: {
          userName: '用户姓名',
          phone:    '手机号码',
          orderNo:  '订单号',
          amount:   '订单金额'
        },

        // === 预设元素（可选） ===
        presetElements: [
          {
            type: 'text',
            x: 50, y: 50, width: 700, height: 60,
            content: '欢迎使用海报设计器',
            textStyle: { fontSize: 32, color: '#222', textAlign: 'center' }
          }
        ]
      }
    }, '*');
  });
</script>

{
  "posterId": "a1B2c3D4e5F6g7H8i9J0kLmNoPqRsTuV",
  "token": "a1b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6",
  "timestamp": "2026-05-16T10:30:00.0000000Z"
}

{
  "success": true,
  "message": "ok"
}

{
  "success": false,
  "message": "业务订单不存在"
}

app.post('/poster/save', express.json(), async (req, res) => {
  const { posterId, token, timestamp } = req.body;

  // 1. 基础校验
  if (!posterId || !token) {
    return res.json({ success: false, message: '参数缺失' });
  }

  // 2. 把 posterId 关联到您的业务记录（例如订单、用户、活动）
  await db.savePosterRef({
    posterId,
    token,
    receivedAt: timestamp,
    // 业务字段：orderId / userId / 等
  });

  // 3. 返回结果
  return res.json({ success: true });
});

<script src="https://your-webapi.com/poster/poster-generator-umd.js"></script>

<img id="poster-preview" alt="海报预览" />

<!-- 同源部署：直接相对路径引入即可 -->
<script src="/poster/poster-generator-umd.js"></script>
<script>
  PosterGenerator.render({
    // baseUrl 同源时不要传；跨域时换成您的真实域名：baseUrl: 'https://api.your-domain.com',
    token:    'a1b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6',
    posterId: 'a1B2c3D4e5F6g7H8i9J0kLmNoPqRsTuV',
    dataSourceValues: {
      userName: '张三',
      phone:    '138****8888',
      orderNo:  'ORD20260516001',
      amount:   '￥199.00'
    }
  }).then(function (dataUrl) {
    document.getElementById('poster-preview').src = dataUrl;
  }).catch(function (err) {
    console.error('海报渲染失败：', err.message);
  });
</script>