Node.js中使用ag-psd修改PSD文本后图像未同步更新

问题原因 #

ag-psd读取PSD文件时，文本层会同时加载文本数据和已渲染完成的位图数据。你修改了文本内容，但未更新对应的位图，导致保存后的PSD仍使用原有渲染结果，图像无变化。

解决方案 #

需要触发文本层的重新渲染，两种方式任选其一：

方式1：手动调用渲染方法 #

修改文本后，调用text.render()生成新的位图数据：

import * as fs from 'fs';
import 'ag-psd/initialize-canvas.js';
import { readPsd, writePsdBuffer } from 'ag-psd';

const buffer = fs.readFileSync('UK DL FRONT.psd');
const psd = readPsd(buffer);

const kumonLayer = psd.children[4].children.find(layer => layer.name === 'KUMON');

if (kumonLayer) {
    kumonLayer.text.text = 'MD. Asif';
    // 关键步骤：重新渲染文本层生成新位图
    kumonLayer.text.render();
    
    console.log('Updated text content:', kumonLayer.text.text);
    console.log('Updated layer:', kumonLayer.name);

    const modifiedBuffer = writePsdBuffer(psd);
    fs.writeFileSync('modified_UK_DL_FRONT.psd', modifiedBuffer);
    console.log('Text for KUMON layer updated successfully.');
} else {
    console.log('Layer with name "KUMON" not found.');
}

方式2：写入时开启自动渲染 #

调用writePsdBuffer时传入renderTextLayers: true参数，让库自动处理文本层渲染：

// ... 其他代码保持不变
const modifiedBuffer = writePsdBuffer(psd, { renderTextLayers: true });
// ... 其他代码保持不变

前置依赖检查 #

确保已安装canvas包，ag-psd的文本渲染依赖该包：

npm install canvas

内容的提问来源于stack exchange，提问作者Asif