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

psd 替换智能图层的的实现-个性化定制网站老板让做一个在线服装定制的网站,可合成服装的效果图遇到了难处,如果是单纯的图片叠加也比较简单,前端合成的话使用canvas两张图片合成在一起就可以了canvas合成衣服的效果图准备两张图片,一张是素材,一张是背景如下图他们加一块就得到了这样一张图满心欢喜找老板,实现了!!!,终于可以早早下班了,然并卵,老板说:素材为啥没有弯曲,做出来的图片不真实,方案被打回来之后再次研究方案1.弯曲写死,如果单纯定制杯子是没有问题的,因为他只有一种效果,如果定制的是衣服,风景画等等其他的商品效.

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

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

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

psd 替换智能图层的的实现-个性化定制网站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接口 FOXPSDpsd 替换智能图层的的实现-个性化定制网站https://foxpsd.com/

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

psd 替换智能图层的的实现-个性化定制网站看官网的描述正符合我们的要求,发现虽然是收费的,但是能满足就好

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

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

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

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

整体的api 比较简单

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

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

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

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

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

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

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

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

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

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

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/145939.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • RapeLay(电车之狼R)的结局介绍 (隐藏结局攻略)

    RapeLay(电车之狼R)的结局介绍 (隐藏结局攻略)

    2021年11月28日
  • 什么是mdc_mdc网站

    什么是mdc_mdc网站MDC中包含的可以被同一线程中执行的代码所访问内容。当前线程的子线程会继承其父线程中的MDC的内容。记录日志时,只需要从MDC中获取所需的信息即可。简单来说就是日志的增强功能,如果配置了MDC,并添加了相应的keyvalue,就会在打日志的时候把key对应的value打印出来。内部是用ThreadLocal来实现的,可以携带当前线程的context信息。转载于…

    2022年10月28日
  • 虚拟货币二维码骗局_数字货币交易骗局套路

    虚拟货币二维码骗局_数字货币交易骗局套路最近,网络上出现了一种新的诈骗模式,对象仍然是比特币。原理很简单,因为比特币等虚拟货币的地址非常长,每次交易如果纯靠手输会比较麻烦,因此很多人都会选择将…

  • django 聚合函数_聚合函数和非聚合函数

    django 聚合函数_聚合函数和非聚合函数前言orm模型中的聚合函数跟MySQL中的聚合函数作用是一致的,也有像Sum、Avg、Count、Max、Min,接下来我们逐个介绍聚合函数所有的聚合函数都是放在django.db.models

  • f1 score是什么_F1值

    f1 score是什么_F1值F1score是一个平均数;对精确率与召回率进行平均的一个结果;平均算法有四个,如图所示:调和平均数:Hn=n/(1/a1+1/a2+…+1/an)几何平均数:Gn=(a1a2…an)^(1/n)算术平均数:An=(a1+a2+…+an)/n平方平均数:Qn=√[(a1^2+a2^2+…+an^2)/n]这四种平均数满足Hn≤Gn≤An≤QnF…

    2022年10月14日
  • css后代选择器_什么是后代选择器并举例说明

    css后代选择器_什么是后代选择器并举例说明后代选择器集中形式:1.父代*{}从父代中的找到所有子代。2.父代子代1{}是从父代中找到子代1或者父代子代2{}是从父代中找到子代2。3.父代子代1子代

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号