fabric.js 如何在用作背景并调整为画布大小时保持图像质量答案

【问题标题】：fabric.js how to maintain image quality when used as a background and resized to the size of canvasfabric.js 如何在用作背景并调整为画布大小时保持图像质量
【发布时间】：2016-08-22 13:26:33
【问题描述】：

我有一个尺寸为 1920x1080 的大图像，但我当前的画布只有 800x600 的大小。将图像缩放到背景像素化/降低图像质量。即使在导出时，图像质量仍然很低。如何防止这种情况发生？

var background = 'image.jpg';
    canvas.setBackgroundImage(background, canvas.renderAll.bind(canvas), {
                    width: canvas.width,
                    height: canvas.height,
                    originX: 'left',
                    originY: 'top'
                });

【问题讨论】：

标签： javascript html canvas fabricjs

【解决方案1】：

我不确定 Fabric 是否有办法改善这一点。进行大规模缩放会导致此类质量下降。在我们的应用程序中，我们使用了一个名为 pica 的库，用于以高质量调整图像大小。

pica repo here

pica demo here

您可以在将图像添加到画布之前或什至在画布调整大小时使用此库来缩小图像图像。

【讨论】：

嗨！我的项目将被集成到一个 php 后端，它将图像转换为 pdf。是否也可以将其与 php 集成，或者是否可以使用 toDataURL() 画布函数将调整大小的图像导出到 php？
您可以使用 php 和 imagemagick 在图像到达浏览器之前调整图像大小，或者您可以让织物（在渲染时）放大到全尺寸并以全尺寸导出图像，然后在后端调整图像大小。似乎提前调整图像大小是最好的选择。

【解决方案2】：

或者，您可以使用一种 fabricjs 调整大小过滤器来获得更好的缩小版图像。反正它们不如异食癖好。

您可以轻松实现 PICA 和 fabricjs 调整大小之间的连接，Pica 在输入中获取一个元素并在输出中为您提供一个画布，这或多或少是 fabricjs 过滤器所做的。

【讨论】：

嗨！我尝试使用 Lanczos 3 调整织物的图像大小，但进一步调整大小仍然会降低图像质量。此外，有时它会使浏览器崩溃。