The modifying of PSD file doesn't work

[mdmuhtasimfuadfahim]

I am trying a edit a .psd file and save another .psd file with the updated data. Here is my code:

const fs = require('fs');
const path = require('path');
const { readPsd, writePsd, initializeCanvas } = require('ag-psd');
const { createCanvas, loadImage } = require('canvas');

initializeCanvas(
    createCanvas,
    loadImage
);

// Load original PSD
const psdPath = path.join(__dirname, './temp.psd');
const buffer = fs.readFileSync(psdPath);
let psd = readPsd(buffer);

// Use replace to update the text
psd.children[2].text.text = "NEW TEXT HERE";
psd.children[2].name = "NEW NAME";
psd.children[2].canvas = undefined;

// Save updated PSD with thumbnail generation
const outputPath = path.join(__dirname, './updated_temp.psd');
const outBuffer = writePsd(psd, { invalidateTextLayers: true });

fs.writeFileSync(outputPath, Buffer.from(outBuffer));

Please help me with the solution. I have tried the initializeCanvas in many ways but didn't work. Help me with the fix please.

[Agamnentzar]

You can use require('ag-psd/initialize-canvas') in order to initialize canvas.

What exactly is not working ?

[mdmuhtasimfuadfahim]

You can use require('ag-psd/initialize-canvas') in order to initialize canvas.

What exactly is not working ?

Well, I will try this. The writePsd don't change the children[i].text.text. Before I use writePsd I debug with console and I got updated data in console. But when I write it and save another psd file with updated data I am getting the old psd file text layers / data as it is.

[Agamnentzar]

Are you checking it by opening in photoshop or reading PSD file again? Do you get this message when opening the file in photoshop?

[mdmuhtasimfuadfahim]

Are you checking it by opening in photoshop or reading PSD file again? Do you get this message when opening the file in photoshop?

No, I didn't take it in Photoshop. But opened it in online photopea and got the previous file text layer. I am using NodeJS script for the whole operation. What else I should do? Please let me know and please check the code I have given at first comment.

[Agamnentzar]

The code looks correct, can you share PSD file?

[mdmuhtasimfuadfahim]

The code looks correct, can you share PSD file?

Here is the PSD file: PSD File. Please help me with the solution of it.

[Agamnentzar]

It works correctly for me in Photoshop, it seems Photopea doesn't have the same handling for missing text layer canvas, so in order for the file to work in there you'd have to redraw the canvas with new text yourself.

[mdmuhtasimfuadfahim]

It works correctly for me in Photoshop, it seems Photopea doesn't have the same handling for missing text layer canvas, so in order for the file to work in there you'd have to redraw the canvas with new text yourself.

Why there would be a need to open the file in Photoshop or Photopea? When I open the file in photos on my device I can see the text without any changes. I cannot ask user to open it in photoshop or something like that. I need to update user's id card whatever he gives with some text like employee_id or employee_name. Give me a proper solution for it if possible.

[Agamnentzar]

Because photos on your device is using composite image (psd.canvas) to show you the preview, it doesn't actually render the whole document. If you want to see the correct preview after changes you need to also update psd.canvas image.

I think in your case using PSD at all is not very good solution and you can make things a lot easier by just drawing on canvas and saving it to PNG.

[mdmuhtasimfuadfahim]

Because photos on your device is using composite image (psd.canvas) to show you the preview, it doesn't actually render the whole document. If you want to see the correct preview after changes you need to also update psd.canvas image.

I think in your case using PSD at all is not very good solution and you can make things a lot easier by just drawing on canvas and saving it to PNG.

Well please give me the correct code to save the files in .png. Please help me with the solution of .png. Maybe I need to change these lines of code only:

const outputPath = path.join(__dirname, './updated_temp.psd');
const outBuffer = writePsd(psd, { invalidateTextLayers: true });

fs.writeFileSync(outputPath, Buffer.from(outBuffer));

And if I want to do it with .psd file what should I do? Please help me with both two solutions. I just got stuck here.

[Agamnentzar]

This library only handles reading and writing PSD files, it doesn't handle rendering, so you can't use it to update the file and get final image. You'd have to render the layers and composite canvas yourself. It's a lot easier to just use node-canvas library and and canvas API https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API to create image if that is your goal.

[mdmuhtasimfuadfahim]

This library only handles reading and writing PSD files, it doesn't handle rendering, so you can't use it to update the file and get final image. You'd have to render the layers and composite canvas yourself. It's a lot easier to just use node-canvas library and and canvas API https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API to create image if that is your goal.

Okay let me check it. But if you help me with the code that would be great. Thanks in advance.

[mdmuhtasimfuadfahim]

Hi @Agamnentzar. Followed this and it worked with Photoshop and local preview too.

Because photos on your device is using composite image (psd.canvas) to show you the preview, it doesn't actually render the whole document. If you want to see the correct preview after changes you need to also update psd.canvas image.

I think in your case using PSD at all is not very good solution and you can make things a lot easier by just drawing on canvas and saving it to PNG.