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

全栈程序员-用户IM • 2022年5月16日上午9:40 • 未分类

大家好，又见面了，我是你们的朋友全栈君。

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

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

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

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

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

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

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/