老板让做一个在线服装定制的网站,可合成服装的效果图遇到了难处,如果是单纯的图片叠加也比较简单,前端合成的话使用canvas 两张图片合成在一起就可以了
canvas 合成衣服的效果图准备两张图片,一张是素材,一张是背景如下图
他们加一块就得到了这样一张图
满心欢喜找老板,实现了!!!,终于可以早早下班了,然并卵,老板说:素材为啥没有弯曲,做出来的图片不真实,方案被打回来之后再次研究方案
1.弯曲写死,如果单纯定制杯子是没有问题的,因为他只有一种效果,如果定制的是衣服,风景画等等其他的商品效果图场景,那么单纯的弯曲是无法适配的,现实的场景至少要实现透视,弯曲,纹理等等效果,才能做的真实,所以这种方案也是不行。
2.3d建模,然后再模型上应用贴图纹理,这种确实是能实现,因为是真实的3d渲染,前端有许多优秀的 3d展示库 如 three.js等,展示模型确实也比较简单,可是难点在于建模,我们只有平面设计师,每做一个产品都要建模渲染未免成本也太高了,平面设计师现学也来不及,单独又要招聘人才,这种方案备选
3.直接解析PSD 文件中的智能图层,设计师制作好PSD模板后,解析PSD文件,替换智能图层,最终实现效果,这个方案是最符合现有的人员构成的了,ps开发和设计师都会操作,招聘设计师也比招聘建模师更容易,要是能预期实现那么就太棒了。
确定了最终方案后就开始搜索有哪些解析智能图层的库
找到了一个官方的库和第三方库
Adobe Photoshop File Formats Specification
/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 parsingPSD.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接口 FOXPSD/
哇塞终于有一家专门的公司提供了这种替换智能图层的服务,
看官网的描述正符合我们的要求,发现虽然是收费的,但是能满足就好
网站描述中可以生成3种规格的图片,最大500px,最大1600像素,最大10000像素,分别对应着实时预览,商品主图,生产图
加了管理员微信,申请账号之后开始对接试一试
对接的方式,应该获取专属的token,然后请求相关的接口,来实现图片的合成服务
整体的api 比较简单
主要分为 PSD的模板维护,图片生成维护
首先试一下PSD的模板维护吧
先使用apizza - 极客专属的api管理工具做一下接口测试
返回一个专属的 psd sku,传了几个试了试
下面到了关键的部分,试一下生成图片的部分
也能很快的生成,确实不错,完全满足了我们的开发
最终生成的照片有了 明显的弯曲效果图,太棒了!!