FabricJs 图像在使用 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

这是完全正常的，因为您要求使用比例因子来保持图像的原始比例。如果目标容器与图片的比例不同，则容器中的图片将被裁剪。

正如你在这个简短的 sn-p 图像和画布比例中看到的那样：

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
  })

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