Issue with directly converting Json to Image

[SkullKrusher7]

I am having issues when trying to convert json stored in my db directly into image.

This is the output I expect

This is what I get

On my canvas I have an object that is partly outside of the canvas, and I think it looks great, but as soon as I run toDataURL() on the canvas in order to export it as a PNG it includes the entire object in the resulting image. I am wondering if there is a way to "cut off" all objects that are outside or partly outside of the canvas.

[asturur]

You have to size the canvas correctly and use the viewport to just output a part of the design in the canvas.
How do you obtain image 1? the top one?

[SkullKrusher7]

You have to size the canvas correctly and use the viewport to just output a part of the design in the canvas. How do you obtain image 1? the top one?

I got that image when I have loaded it on my editor. And then exporting it. 2nd image is from when I am bulk generating images from a json file and have to create the preview of the json before sending the user to the editor.

I tried writing the code with claude , it is not wroking.

const generatePreview = async (templateData: TemplateObject, width: number, height: number): Promise => {
// Initialize canvas
const canvas = new fabric.StaticCanvas(null);
canvas.setDimensions({ width, height });

// Add all objects to canvas
if (templateData.objects && Array.isArray(templateData.objects)) {
    for (const obj of templateData.objects) {
        try {
            await new Promise<void>((resolve) => {
                fabric.util.enlivenObjects([obj], (objects) => {
                    if (objects[0] && canvas) {
                        canvas.add(objects[0]);
                    }
                    resolve();
                }, 'fabric');
            });
        } catch (error) {
            console.error('Error adding object to canvas:', error);
        }
    }
}

// Calculate bounds of all objects
const bounds = canvas.getObjects().reduce((acc, obj) => {
    const objBounds = obj.getBoundingRect(true);
    return {
        left: Math.min(acc.left, objBounds.left),
        top: Math.min(acc.top, objBounds.top),
        right: Math.max(acc.right, objBounds.left + objBounds.width),
        bottom: Math.max(acc.bottom, objBounds.top + objBounds.height)
    };
}, { left: Infinity, top: Infinity, right: -Infinity, bottom: -Infinity });

// Render canvas
canvas.renderAll();

// Get cropped data URL using Fabric's built-in cropping
const dataUrl = canvas.toDataURL({
    format: 'png',
    quality: 1,
    left: bounds.left,
    top: bounds.top,
    width: bounds.right - bounds.left,
    height: bounds.bottom - bounds.top
});

// Clean up
canvas.dispose();

return dataUrl;

};

And I also tried it with correcting the viewport didn't worked.