使用 Node.js（和 NPM 包“psd”）解析 Adob​​e PSD 文件，以编程方式替换图像层，然后保存/渲染为 PNG

Posted 2023-03-28

【中文标题】使用 Node.js（和 NPM 包“psd”）解析 Adob​​e PSD 文件，以编程方式替换图像层，然后保存/渲染为 PNG

【英文标题】：Use Node.js (and NPM package 'psd') to parse Adobe PSD file, programatically replace image layer and then save/render as PNG

【发布时间】：2018-02-09 18:27:57

【问题描述】：

对于一个项目，我需要解析 Adobe Photoshop PSD 文件，以编程方式查找和替换图像层，然后将其保存回 PSD 文件和/或将其导出为 PNG（或 JPEG ）。我对 Adob​​e Photoshop 没有太多经验，但我认为这些类型的图层被称为“智能图层”。

用例：

渲染模型预览图像

用户上传图片到Node HTTP服务器 将 PSD 中的图层替换为 上传图片（图片填充层） 呈现为 PNG/JPEG 并写入 HTTP 响应

替换层在 x 和 y 上 3d 倾斜，用于样机模板。我附上了一张图片来说明这意味着什么。未来将创建额外的模型模板，这就是为什么我认为用常量值标记替换层是实现这一点的方法。

模板文件：

上传的图片：

最终渲染的图像

我不需要有关 HTTP 服务器/身份验证等方面的帮助，这部分是微不足道的。我只是在寻找替换图像层的方法。

PSD 文件是/将会为这个特定项目定制的。根据层名称（标签）识别要替换的正确层是一种可接受的实现方式。

我查看了几个 NPM 包来完成这项工作，但无法获得功能正常的原型。这个包似乎是最有前途的。

https://www.npmjs.com/package/psd

我目前有以下代码：

/* mockup.js */
var PSD = require('psd')
var psd = PSD.fromFile("mockup.psd")
var fs = require('fs')

psd.parse()

/* For easier reference */
var replacementLayer, file, fileBuffer

let tree = psd.tree()

let layers = tree.layer.node._children

for(let layer of layers) 
    /* i named the layer 'replacementLayer' */
    if(layer.name == 'replacementLayer')  
        replacementLayer = layer 
        file = replacementLayer.layer.file
        fileBuffer = replacementLayer.layer.file.data
    


/* replacementLayer = instanceof Layer
   file = instanceof File with a property 'data' (data is a buffer)
   fileBuffer = instanceof Buffer */   

我尝试了各种打开图像文件并替换 PSD 中的 replacementLayer 的方法，但我无法让它工作。仅仅用新的 Buffer 对象覆盖属性是不够的。

将图片保存为 PNG 就这么简单

psd.image.saveAsPng('./output.png')

理想情况下，用于替换 replacementLayer 的图像应该“填充”到图层的宽度和高度。

有什么想法吗？

【问题讨论】：

你有倾斜图像的算法吗？因为在这种情况下，简单的“替换”层将无法完成这项工作

你有没有在 Node 中解决过这个问题？

@HMilbradt 不，我没有。

【参考方案1】：

ag-psd 可以处理，但是保存的 PSD 不渲染最外层

【讨论】：

请在您的回答中提供更多详细信息。正如目前所写的那样，很难理解您的解决方案。

这并没有提供问题的答案。一旦你有足够的reputation，你就可以comment on any post；相反，provide answers that don't require clarification from the asker.