浏览器SDK

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

SDK的清晰度有限，最高支持输出1000*1000像素，有更高像素需求请使用 服务器API

前提条件

使用此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. 		})
  16. 	       //如果想销毁当前实例
  17.               foxpsdObj.destroy();
  18.               foxpsdObj =null;
  19.       }
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.title
字符串
非必传		 左上角logo位置，可设置 html标签来实现特殊需求
options.callBackHref
字符串
非必传		 效果图及尺码图生成完成后的回调地址，foxpsd会把生成的sku拼接上后发送GET来请求此地址，开发者可通过 /api/diy/userSave/item 来获取详细数据
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>
  5.     new foxpsd3DEdit.main('#app',{
  6.             token:'Basic xxxxxxxxxxxxxxxxxxxx',
  7.             
  8.             userSku:'511536b8-2f26-4a9a-b87f-3c55271da733（演示值，请查看文档获取）',
  9.             title:`logo 或标题`,
  10.             // 数据图片生成完成后的回调地址，方式为GET请求
  11.             callBackHref:"http://xxxxxxxx",
  12.             // 设置保存完成的跳转链接
  13.             saveCallback:function(res){
  14.                 console.log('保存完成',res);
  15.                //保存完成，会返回当前的保存记录水库，但并不代表图片生成完成，图片生成后会请求 callBackHref 
  16.                 window.location.href ="/diy/user/index";
  17.             }
  18.         });
js
客服微信
加好友可获得
免费次数
咨询电话：
176-6401-7800