Agamnentzar / ag-psd

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

TypeError: (0 , exports.createCanvas) is not a function #170

Closed Grahaam closed 4 months ago

Grahaam commented 4 months ago

I'm using ag-psd to create a PNG from a psd Buffer. I don't understand why but the code i'm using works once then I get and error saying that createCanvas in psdReadder is not a function

Error getting template preview: TypeError: (0 , exports.createCanvas) is not a function at createImageData (C:\Users\tib-t\Desktop\COURS\PTRANS\sun_ptrans\node_modules\ag-psd\dist\helpers.js:328:47) at createImageDataBitDepth (C:\Users\tib-t\Desktop\COURS\PTRANS\sun_ptrans\node_modules\ag-psd\dist\psdReader.js:614:46) at readLayerChannelImageData (C:\Users\tib-t\Desktop\COURS\PTRANS\sun_ptrans\node_modules\ag-psd\dist\psdReader.js:468:25) at readLayerInfo (C:\Users\tib-t\Desktop\COURS\PTRANS\sun_ptrans\node_modules\ag-psd\dist\psdReader.js:326:13) at C:\Users\tib-t\Desktop\COURS\PTRANS\sun_ptrans\node_modules\ag-psd\dist\psdReader.js:271:13 at readSection (C:\Users\tib-t\Desktop\COURS\PTRANS\sun_ptrans\node_modules\ag-psd\dist\psdReader.js:918:18) at C:\Users\tib-t\Desktop\COURS\PTRANS\sun_ptrans\node_modules\ag-psd\dist\psdReader.js:270:9 at readSection (C:\Users\tib-t\Desktop\COURS\PTRANS\sun_ptrans\node_modules\ag-psd\dist\psdReader.js:918:18) at readPsd (C:\Users\tib-t\Desktop\COURS\PTRANS\sun_ptrans\node_modules\ag-psd\dist\psdReader.js:269:5) at readPsd (C:\Users\tib-t\Desktop\COURS\PTRANS\sun_ptrans\node_modules\ag-psd\dist\index.js:31:36) Here is my code

` const { createCanvas, Image } = require("canvas"); const { initializeCanvas } = require("ag-psd"); initializeCanvas({ createCanvas, Image });

app.post("/previewUrl", multer.single("file"), async (req, res) => {

try {
    const templateFile = req.file;

    const templatePath = templateFile.originalname;

    const psd = readPsd(templateFile.buffer);

    if (psd.children) {
        let canvas = createCanvas(psd.width, psd.height);
        const ctx = canvas.getContext("2d");

        for (const layer of psd.children) {
            if (layer.canvas) {
                ctx.drawImage(layer.canvas, layer.left, layer.top);
            }
        }
        const pngBuffer = canvas.toBuffer();
        const filename =
            "./public/img/preview/" +
            path.basename(templatePath, path.extname(templatePath)) +
            "_prev.png";
        fs.writeFile(filename, pngBuffer, (err) => {
            if (err) {
                console.error("Error writing file:", err);
                res.status(500).send(
                    "An error occurred: " + err.toString()
                );
            } else {
                const preview_url = filename.replace("/public", "");
                res.send(preview_url);
            }
        });
    } else {
        throw new Error("No image data found in the PSD file");
    }
} catch (error) {
    console.error("Error getting template preview:", error);
    res.status(500).send("An error occurred: " + error.toString());
}

}); `

I'm using the lastest releases

Agamnentzar commented 4 months ago

you're calling initializeCanvas incorrectly, you can just call require('ag-psd/initializeCanvas') instead, or use this code:

function createCanvasFromData(data) {
    const canvas = createCanvas(100, 100);

    try {
        const context = canvas.getContext('2d')!;
        const imageData = decodeJpeg(data, (w, h) => context.createImageData(w, h));
        canvas.width = imageData.width;
        canvas.height = imageData.height;
        context.putImageData(imageData, 0, 0);
    } catch (e) {
        console.error('JPEG decompression error', e.message);
    }

    return canvas;
}

initializeCanvas(createCanvas, createCanvasFromData);
Grahaam commented 4 months ago

Thanks for your quick anwser ! when i do that i get : initializeCanvas(createCanvas, createCanvasFromData); ^ ReferenceError: initializeCanvas is not defined

I was already using require('ag-psd/initializeCanvas') but it did'nt seem to work, i'm also requireing readPsd with ag-psd alone

Seems like the module isn't recognized with require('ag-psd/initializeCanvas'). eveything is undefined when i use it

Agamnentzar commented 4 months ago

require('ag-psd/initializeCanvas') should be enough, if you're using some weird bundling that is removing it, you can also try this:

const { initialize } = require('ag-psd/initializeCanvas');
initialize();
Grahaam commented 4 months ago

The function you gave in the first place somehow works now! Thanks, don't know and don't undertsand why but if it works it works.

I might be because I'm working with nodejs

I also get TypeError: initialize is not a function wether importing from 'ag-psd/initializeCanvas' or 'ag-psd'. I have installed using npm installag-psd@20.0.0 So i really don't get why i have those issues

Grahaam commented 4 months ago

The issue was the use of the module request, it broke it in some way. I'm using axios instead and it's working as intended now!