javascript - 动态设置图像高度和宽度后，Fabric js 图像质量不佳

Question

我已将图像添加到 Canvas 中，并且我想根据矩形的高度和宽度动态更改图像的高度和宽度。我已经根据矩形的高和宽以及原始图像的高和宽计算了图像的高和宽。

使用下面的代码我改变了图像的高度和宽度，但图像质量变得非常低

var image_height = 200; //For now here image height is dummy
var image_width = 150; //For now here image width is dummy
var obj = canvas.getActiveObject();
obj.setHeight(image_height);
obj.setWidth(image_width);
obj.setCoords();
canvas.renderAll();

Answer 1

前几天我也遇到了同样的问题。我找到的解决方案是不要尝试设置宽度和高度，而是要求您的图像缩放到 Canvas 尺寸。

这是我的做法:

var scaleWidth = canvas.getWidth() / img.width;
var scaleHeight = canvas.getHeight() / img.height;
var scale = Math.min(scaleWidth, scaleHeight);
bgImage = new fabric.Image(img, {
    [...]
    scaleX: scale,
    scaleY: scale,
    [...]
  });
canvas.add(bgImage);
canvas.sendToBack(bgImage); // useful in case you want a background but not **needed**
canvas.renderAll();

在上面的代码中，我计算宽度和高度比率，选择较低的一个，然后使用 scaleX 和 scaleY 属性将其应用到图片上。

如果仍然不适合您，请在评论中告诉我。

编辑:为了更清楚起见，我完成了链接代码。

第二次编辑:似乎存在一种名为scale的方法，可以在您的图像上使用。如果您想保持比例，看起来会更干净(又名 scaleX 和 scaleY 属性将具有相同的值)。