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

【问题标题】：fabric.js the easiest way to scale whole imagefabric.js 缩放整个图像的最简单方法
【发布时间】：2018-01-15 21:01:55
【问题描述】：

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

问题是：

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

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

它填满了整个画布。

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

【问题讨论】：

【解决方案1】：

尽量保持图像比例为 1。检测图像应该缩放多少，然后缩放整个画布：

canvas.setZoom(0.2)

当你在节点环境中时，一旦你加载图像回来，将画布尺寸设置为图像尺寸。

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

你应该得到一个和图片一样大的画布并保存所有比例。

【讨论】：