浏览器SDK

通过浏览器直接渲染psd文件,显示所见即所得

前提条件

使用此SDK 必须订阅我们的产品才能使用,订阅产品请前往 【定价】如需疑问请联系 176-6401-7800

CDN下载地址

<script src="https://img.foxpsd.com/foxpsd-1.0.0.js"></script>

文件已启用CDN托管,可直接引用

演示地址

点击查看演示

演示中的token,不定期轮换,请勿用于生产环境中

SDK 支持的psd模板结构

请按照我们的示例PSD 进行制作,【示例PSD】

实例化: new foxpsd(id,options)

第一次实例化的时候,因为需要准备必要数据会比较慢,无需担心

参数

id
string
必传
document element ID
options
object
必传
初始化需要的参数值,下面为详细介绍
options.token
字符串
[此处为浏览器token]
必传
验证身份用的 token 在个人中心/浏览器token查看
options.psdSkus
array
必传
psd列表中的sku,请在 个人中心/PSD管理中查看
options.goodsSku
string
必传
API计数列表中的sku,,请在 个人中心/API 计数中查看
options.onload
string
非必传
资源加载完成后的回调函数

请求演示

  1. let foxpsdObj = new foxpsd("xiaoguotu", {
  2. psdSkus: ['1637653018199421773', '1637653008897318635'],
  3. goodsSku: '163765136915264690',
  4. token: 'Basic xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
  5. onload:function(){
  6. //加载完成后的操作
  7. }
  8. })
js

实例化方法: command(options)

canvas与image二选一,建议选用canvas参数

参数

options.canvas
element
非必传
canvas,与image参数二选一,建议使用参数能优化性能,canvas加载图片注意跨域问题,设置不正确无法生成图像
options.image
string
非必传
有效的图片链接,与canvas参数二选一
options.layers
string
必传
图层名字用英文逗号隔开

请求演示

  1. let foxpsdObj = new foxpsd("xiaoguotu", {
  2. psdSkus: ['1637653018199421773', '1637653008897318635'],
  3. goodsSku: '163765136915264690',
  4. token: 'Basic xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
  5. onload:function(){
  6. //加载完成后的操作
  7. }
  8. })
  9. if (foxpsdObj && foxpsdObj.load) {
  10. foxpsdObj.command({
  11. image: 'https://foxpsd.com/www/images/th3.jpg',
  12. //传多个表示替换多个图层,使用英文逗号隔开
  13. layers: 'zhengmian,sucai,qianpian,右袖'
  14. })
  15. //如果想销毁当前实例
  16. foxpsdObj.destroy();
  17. foxpsdObj =null;
  18. }
js

编辑器 SDK前端引入SDK

1、引入 CDN下载地址

<script src="https://img.foxpsd.com/foxpsd-1.0.0.js"></script>

js 文件已启用CDN托管,可直接引用

<script src="https://img.foxpsd.com/foxpsd3DEdit.umd.js"></script>

js 文件已启用CDN托管,可直接引用

<link rel="stylesheet" type="text/css" href="https://img.foxpsd.com/foxpsd3DEdit.css" />

css 文件已启用CDN托管,可直接引用

点击查看演示

演示中的token,不定期轮换,请勿用于生产环境中

2、 实例化方法 new foxpsd3DEdit.main(element,options)

属性及方法

element
字符串
必传
dom id
options.token
字符串
[此处为浏览器token]
必传
验证身份用的 token 在个人中心/浏览器token查看
options.goodsSku
字符串
必传
订单的产品 sku 在 个人中心/API 计数查看
options.title
字符串
非必传
左上角logo位置,可设置 html标签来实现特殊需求
options.callBackHref
字符串
非必传
效果图及尺码图生成完成后的回调地址,foxpsd会发送POST来请求此地址
options.saveCallback
字符串
非必传
模板点击保存之后的回调方法,会返回保存后的 sku,开发者可自行存储,来实现后面逻辑

请求演示

  1. <link rel="stylesheet" type="text/css" href="https://img.foxpsd.com/foxpsd3DEdit.css" />
  2. <script src="https://img.foxpsd.com/foxpsd-1.0.0.js"></script>
  3. <script src="https://img.foxpsd.com/foxpsd3DEdit.umd.js"></script>
  4. new foxpsd3DEdit.main('#app',{
  5. token:'Basic xxxxxxxxxxxxxxxxxxxx',
  6. goodsSku:'1645061099030970357',
  7. userSku:'511536b8-2f26-4a9a-b87f-3c55271da733',
  8. title:`logo 或标题`,
  9. // 数据图片生成完成后的回调地址,方式为POST请求
  10. callBackHref:"http://xxxxxxxx",
  11. // 设置保存完成的跳转链接
  12. saveCallback:function(res){
  13. console.log('保存完成',res);
  14. //保存完成,会返回当前的保存记录水库,但并不代表图片生成完成,图片生成后会请求 callBackHref
  15. window.location.href ="/diy/user/index";
  16. }
  17. });
js