使用scaleToHeight

Question

我正在尝试缩放图像，以使其在使用scaleToHeight方法裁剪图像时适合可用的画布。例如：

FabricJS画布为1024x768，图像分辨率为4149x2761。我一生无法弄清楚为什么要裁剪图像。这是代码：

    _currentImage = new Image();
    _currentImage.src = "images/7.jpg";

    _currentImage.onload = function () {
        var img = new fabric.Image(_currentImage, {
            selectable: false,
            top: 0,
            left: 0

        });
        //img.scaleToWidth(1024);
        img.scaleToHeight(768);



        //img.width = _fabricCanvas.width;
        _fabricCanvas.add(img);
    };

如果仅缩放到画布宽度，则不会裁剪图像，但是显然无法正确填充画布。

Answer 1

这完全正常，因为您需要一个比例因子以保持图像的原始比例。如果目标容器与图像的比例不同，则将裁剪容器中的图像。

在这段简短的代码段中您可以看到，图像和画布的比例不同：

console.log("canvas ratio:" + 1024/768 + " image ratio: " + 4149/2761);

使用：

 img.scaleX = canvasWidth / img.width
 img.scaleY = canvasHeight / img.height

或

  img.set({
    scaleX: canvasWidth / img.width,
    scaleY: canvasHeight / img.height
  })

警告，您将失去图像的原始比例。