fabricjs - Fabric.js group.toDataURL() is exporting a pixelated image

Question

So I'm using Fabric.js to load in a bunch of images onto a canvas side by side. A user can then select one of the images to download. They also have edit capabilities so can add text and shapes ontop of the image using canvas.

When a user exports and image they expect to see any text or shapes they have added to be included in the export.

right now I have the following function to pass in the selected image and grab its area on the canvas to use in the toDataURL() function. This results in a super blurry image i guess because in snapshots the area wholelistically.

Anyone know a way that i could select the objects in the area of the selecte dobjects for export?

const onDownload = ({ activeObject, projectName, canvas }) => {
    console.log(activeObject);

    const activeObjs = canvas.getObjects();
    const group = new fabric.Group(activeObjs);
    canvas.add(group);

    const left = Math.abs(group.aCoords.tl.x - activeObject.aCoords.tl.x);
    const top = Math.abs(group.aCoords.tl.y - activeObject.aCoords.tl.y);

    const url = group.toDataURL({
        type: 'png',
        top: top,
        left: left,
        width: activeObject.width,
        height: activeObject.height,
    });

    group.destroy();
    canvas.remove(group);
    canvas.renderAll();

    var link = document.createElement('a');
    link.href = url;
    link.download = `${projectName}.png`;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
};

question from:https://stackoverflow.com/questions/66048685/fabric-js-group-todataurl-is-exporting-a-pixelated-image

Answer 1

Waitting for answers