psd 替换智能图层的的实现-个性化定制网站

老板让做一个在线服装定制的网站，可合成服装的效果图遇到了难处，如果是单纯的图片叠加也比较简单，前端合成的话使用canvas 两张图片合成在一起就可以了

canvas 合成衣服的效果图准备两张图片，一张是素材，一张是背景如下图

 他们加一块就得到了这样一张图

满心欢喜找老板，实现了！！！，终于可以早早下班了，然并卵，老板说：素材为啥没有弯曲，做出来的图片不真实，方案被打回来之后再次研究方案

1.弯曲写死,如果单纯定制杯子是没有问题的，因为他只有一种效果，如果定制的是衣服，风景画等等其他的商品效果图场景，那么单纯的弯曲是无法适配的，现实的场景至少要实现透视，弯曲，纹理等等效果，才能做的真实，所以这种方案也是不行。

2.3d建模，然后再模型上应用贴图纹理，这种确实是能实现，因为是真实的3d渲染，前端有许多优秀的 3d展示库 如 three.js等，展示模型确实也比较简单，可是难点在于建模，我们只有平面设计师，每做一个产品都要建模渲染未免成本也太高了，平面设计师现学也来不及，单独又要招聘人才，这种方案备选

3.直接解析PSD 文件中的智能图层，设计师制作好PSD模板后，解析PSD文件，替换智能图层，最终实现效果，这个方案是最符合现有的人员构成的了，ps开发和设计师都会操作，招聘设计师也比招聘建模师更容易，要是能预期实现那么就太棒了。

确定了最终方案后就开始搜索有哪些解析智能图层的库

找到了一个官方的库和第三方库

Adobe Photoshop File Formats Specification

https://github.com/meltingice/psd.js

var PSD = require('psd');
var psd = PSD.fromFile("path/to/file.psd");
psd.parse();

console.log(psd.tree().export());
console.log(psd.tree().childrenAtPath('A/B/C')[0].export());

// You can also use promises syntax for opening and parsing
PSD.open("path/to/file.psd").then(function (psd) {
  return psd.image.saveAsPng('./output.png');
}).then(function () {
  console.log("Finished!");
});

 psd.js 只能做解析无法做还原，我们的需求是不但要解析更重要是能还原psd,还原psd库有哪些难点呢，首先要清楚知道psd文件的组成部分，还要知道ps中各个模块的数学知识，手动解析然后还原成psd是不可能的，要是实现了那还不得做成中国版的ps了

 搜索了几天后来发现了这个网站 foxpsd-在线psd文件处理工具，替换图层智能对象api接口 FOXPSDhttps://foxpsd.com/

哇塞终于有一家专门的公司提供了这种替换智能图层的服务，

看官网的描述正符合我们的要求，发现虽然是收费的，但是能满足就好

网站描述中可以生成3种规格的图片，最大500px，最大1600像素，最大10000像素，分别对应着实时预览，商品主图，生产图

加了管理员微信，申请账号之后开始对接试一试

 对接的方式，应该获取专属的token，然后请求相关的接口，来实现图片的合成服务

整体的api 比较简单

主要分为 PSD的模板维护，图片生成维护

首先试一下PSD的模板维护吧

先使用 apizza - 极客专属的api管理工具 做一下接口测试

 返回一个专属的 psd sku,传了几个试了试

下面到了关键的部分，试一下生成图片的部分

 也能很快的生成，确实不错，完全满足了我们的开发

最终生成的照片有了 明显的弯曲效果图，太棒了！！