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

Question

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

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

Answer 1

我不确定面料是否有办法改善这一点。进行大规模缩放可以降低这些质量。在我们的应用程序中，我们使用一个名为pica的库，用于高质量地调整图像大小。

pica repo here

pica demo here

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

Answer 2

或者，您可以使用fabricjs resize过滤器之一来获得更好的缩小版图像。 无论如何，它们并不像异食癖一样好。

你可以轻松地在PICA和fabricjs resize之间实现连接，Pica在输入中获取一个元素，并在输出中为你提供一个或多或少与fabricjs过滤器相关的画布。