javascript - Fabric.js 缩放整个图像的最简单方法

Question

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

问题是:

结果图像必须很大，例如 3000x3000px，现在我用<canvas width="600" height="600"></canvas>用户将背景图像(3000x3000)上传到 Canvas 中，然后我以这种方式缩放它:

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

它填满了整个 Canvas 。

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

Answer 1

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

canvas.setZoom(0.2)

当您处于 Node 环境中时，一旦加载回图像，请将 Canvas 尺寸设置为图像尺寸。

Zoom 不会导出为 json，因此您不必更改任何内容。

您应该获得与图像一样大的 Canvas 并保存所有比例。