使用scaleToHeight时会裁剪FabricJs图像

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

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