Agamnentzar / ag-psd

Javascript library for reading and writing PSD files
Other
504 stars 66 forks source link

Why isnt it forcing Photoshop to reload the new text? #172

Open DEV-Devound opened 6 months ago

DEV-Devound commented 6 months ago

I had a version of the code who used to work like intended but now it doesnt works like i intended, what could i be doing wrong here? `const fs = require('fs'); const { readPsd, writePsd, updateLayerText, writePsdBuffer } = require('ag-psd'); const { createCanvas } = require('canvas'); const { initializeCanvas } = require('ag-psd');

initializeCanvas(createCanvas);

// Read the PSD const buffer = fs.readFileSync('input.psd'); const psd = readPsd(buffer);

// Find the layer to update const layerToUpdate = psd.children.find(layer => layer.name === 'Reemplazar_1');

// Update the layer text if (layerToUpdate && layerToUpdate.text) { layerToUpdate.text.text = 'No Reemplazar'; }

// Write the updated PSD to a new file const updatedPsdBuffer = writePsd(psd, { invalidateTextLayers: true }); fs.writeFileSync('output.psd', updatedPsdBuffer);;

// After modifying the PSD

const PSD = require('psd');

PSD.open('output.psd').then(function (psd) { return psd.image.saveAsPng('modified.png'); }).then(function () { console.log('PSD converted to PNG successfully!'); });

// // Log the properties of all layers // function logLayerProperties(layer) { // console.log(layer); // if (layer.children) { // layer.children.forEach(logLayerProperties); // } // } // logLayerProperties(psd); The problem seems related toinvalidateTextLayers: trueorfs.writeFileSync(...)` but i have tried changing both and nothing works right now.

Agamnentzar commented 6 months ago

You have to open the file in actual Photoshop to redraw the text layers, neither ag-psd, nor psd library does text layer rendering for you. Both libraries are just for reading and writing data in PSD files. Being able to redraw changed layers would require replicating entire rendering engine of Photoshop, which is very complicated.

DEV-Devound commented 6 months ago

You have to open the file in actual Photoshop to redraw the text layers, neither ag-psd, nor psd library does text layer rendering for you. Both libraries are just for reading and writing data in PSD files. Being able to redraw changed layers would require replicating entire rendering engine of Photoshop, which is very complicated.

The code was working perfectly fine. Now what im trying to say is that when i opened the file on Photoshop it still hadn't updated to the new text, and the code used to do that

Agamnentzar commented 6 months ago

I don't see how this could have ever worked, unless psd library was re-drawing the text layers, but their documentation says that they just use composite image.

DEV-Devound commented 6 months ago

I don't see how this could have ever worked, unless psd library was re-drawing the text layers, but their documentation says that they just use composite image.

I dont see neither, but apart from me i saw a guy do it too. But forget about exporting the image, focus on the PSD, when I open the new PSD to check if it has updated the text it hasn't updated

Agamnentzar commented 6 months ago

Do you see this popup when you open the files in Photoshop? image

You can also check this file that definitely shows the popup for me: expected.zip

DEV-Devound commented 6 months ago

Do you see this popup when you open the files in Photoshop? image

You can also check this file that definitely shows the popup for me: expected.zip

nope, i dont see that pop up, and thanks for that file ill check it right now. Btw do you have a script that edits the text of a PSD file while also using invalidateTextLayers: true? because maybe i can use it as a template for what im coding and maybe it would work.

Agamnentzar commented 6 months ago

I'm using this in tests:

const buffer = fs.readFileSync('text-replace2.psd');
const psd = readPsd(buffer), {});
psd.children[1].text.text = 'Foo bar';
const output = writePsdBuffer(psd, { invalidateTextLayers: true });
fs.writeFileSync('out.psd', output);
DEV-Devound commented 6 months ago

I'm using this in tests:

const buffer = fs.readFileSync('text-replace2.psd');
const psd = readPsd(buffer), {});
psd.children[1].text.text = 'Foo bar';
const output = writePsdBuffer(psd, { invalidateTextLayers: true });
fs.writeFileSync('out.psd', output);

can you check out if this code works for you? `const fs = require('fs'); const { readPsd, writePsd, updateLayerText, writePsdBuffer } = require('ag-psd'); const { createCanvas } = require('canvas'); const { initializeCanvas } = require('ag-psd');

initializeCanvas(createCanvas); const buffer = fs.readFileSync('input.psd'); const psd = readPsd(buffer); psd.children[1].text.text = 'Foo bar'; const output = writePsdBuffer(psd, { invalidateTextLayers: true }); fs.writeFileSync('out.psd', output); ~ ` because when i open the out.psd it still has the same old text until i use the text tool and click it, thats when it updates

Agamnentzar commented 6 months ago

Did you see the popup for the file I sent? If not you might have dismissed it permanently or maybe your version of photoshop changed the way it works. If you dismissed it you might need to re-enable the popup in photoshop settings, but I don't know how to do that.

DEV-Devound commented 6 months ago

Did you see the popup for the file I sent? If not you might have dismissed it permanently or maybe your version of photoshop changed the way it works. If you dismissed it you might need to re-enable the popup in photoshop settings, but I don't know how to do that.

did my code worked for you?

Agamnentzar commented 6 months ago

Yes, that code works for me

DEV-Devound commented 6 months ago

Yes, that code works for me

and the result of that code is still foo bar?

Agamnentzar commented 6 months ago

The popup shows correctly in photoshop and after confirming I get the new text

DEV-Devound commented 6 months ago

ok, ill try to implement that now with exporting images but im really confused

DEV-Devound commented 6 months ago

ok, ill try to implement that now with exporting images but im really confused, do you know how can this be done? or should i try to do this with Python and then implement it through HTML? because this is a web software

Agamnentzar commented 6 months ago

If you need to update text layer, you need to redraw it yourself, which means you need to re-implement entire text rendering engine of Photoshop, you could just reimplement small part that you need or try to find some other library that implements it.

DEV-Devound commented 6 months ago

If you need to update text layer, you need to redraw it yourself, which means you need to re-implement entire text rendering engine of Photoshop, you could just reimplement small part that you need or try to find some other library that implements it.

and how can i reimplement a small part?

Agamnentzar commented 6 months ago

If you only need to redraw simple text you can probably use canvas api for that, if you need something more complex you'd have to code it yourself.

DEV-Devound commented 6 months ago

If you only need to redraw simple text you can probably use canvas api for that, if you need something more complex you'd have to code it yourself.

how can it be done with canvas api? sorry if im asking to be spoonfed but i usually have problems reading the docs

Agamnentzar commented 6 months ago

You can see canvas api here: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API

And drawing text here: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text

DEV-Devound commented 6 months ago

You can see canvas api here: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API

And drawing text here: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text

well i dont need to draw a text on anything, but to edit the text from a PSD template and then convert it to image, sadly i dont know how i made it work

DEV-Devound commented 6 months ago

Do you see this popup when you open the files in Photoshop? image

You can also check this file that definitely shows the popup for me: expected.zip

that doesnt happens in photopea

tanhh326 commented 6 months ago

You can see canvas api here: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API您可以在此处查看画布 api:https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API And drawing text here: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text并在此处绘制文本:https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text

well i dont need to draw a text on anything, but to edit the text from a PSD template and then convert it to image, sadly i dont know how i made it work好吧,我不需要在任何东西上绘制文本,而是要从 PSD 模板编辑文本,然后将其转换为图像,遗憾的是我不知道如何使其工作

I am also working on this feature, have you resolved it?