fabric.js是缩放整个图像的最简单方法

Question

我在客户端使用fabric.js允许用户在浏览器中创建图像，然后fabric.js将图像序列化为json并发送到节点服务器。然后后端将JSON字符串反序列化为一个对象，并将该图像作为文件保存在本地。

问题是：

结果图像必须很大，例如3000x3000像素， 现在我使用<canvas width="600" height="600"></canvas> 用户将背景图像（3000x3000）上传到画布，然后我按照这种方式缩放：

fabric.Image.fromURL(data, function (img) {
            img.scale(0.2);             
            canvas.add(img).renderAll();            
        });

它填满了画布。

然后用户在画布上添加文本，例如偏移x，y：100,200并单击提交按钮。服务器必须将600x600图像缩小为3Kx3K，同时取消缩放文本并重新计算偏移量。是否有最简单的方法来进行缩放操作？

Answer 1

尝试将图像保持在比例尺1。 检测图像应缩放多少，然后缩放整个画布：

canvas.setZoom(0.2)

当您在节点环境中时，只要将图像加载回来，就将画布尺寸设置为图像尺寸。

缩放不会导出到json，因此您无需更改任何内容。

您应该获得与图像一样大的画布以及保存的所有比例。