Изображение FabricJs обрезается при использовании scaleToHeight - PullRequest
Новая
       18

Изображение FabricJs обрезается при использовании scaleToHeight

0 голосов
/ 05 сентября 2018

Я пытаюсь масштабировать изображение так, чтобы оно вписывалось в доступное полотно при использовании метода scaleToHeight, когда изображение обрезается. Так, например:

Cropped image example

Размер полотна 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);
    };

Если масштабировать только до ширины холста, изображение не обрезается, но, очевидно, не удается правильно заполнить холст.

1 Ответ

0 голосов
/ 05 сентября 2018

это совершенно нормально, так как вы просите масштабный коэффициент, чтобы сохранить исходное соотношение вашего изображения. Если целевой контейнер не имеет того же отношения, что и изображение, изображение в контейнере будет обрезано.

как вы можете видеть на этом коротком фрагменте, соотношение изображения и холста не одинаково: 

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

Предупреждение вы потеряете исходное соотношение вашего изображения.

...