Fabric.js group.toDataURL() 正在导出像素化图像

问题描述

所以我使用 Fabric.js 将一堆图像并排加载到画布上。用户然后可以选择要下载的图像之一。它们还具有编辑功能，因此可以使用画布在图像上添加文本和形状。

当用户导出图像时，他们希望看到他们添加的任何文本或形状都包含在导出中。

现在我有以下函数来传递所选图像并在画布上抓取其区域以在 toDataURL() 函数中使用。我猜这会导致图像超级模糊，因为在快照中整个区域。

有谁知道我可以选择导出所选对象区域中的对象的方法吗？

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);
};

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

fabricjs fabricjs2