Fabric Js - 是否可以自动将图像对象缩放到画布大小？

Question

我们目前通过以下代码上传图片：

        reader.onload = function (event) {
            fabric.Image.fromURL(event.target.result, function (img) {
                whiteboardService.uploadImageToCanvas(img);
            });
        }

并且...

    service.uploadImageToCanvas = function (image) {
        service.canvas.add(image);

        image.id = service.getUniqueId();
        service.objectMap[image.id] = image;

        var data = {
            image: image,
            id: image.id
        };

        signalService.sendMessage(service.recipient, data);
    };

如果图像太大，超过了我们固定的画布宽度和高度，那么是否可能自动缩小该图像以适应画布的固定宽度和高度？

我应该指出，我也在使用Angular.js。

- Max Lynn

Answer 1

fabricjs提供了非常简单的方法来实现这一点。这些方法是scaleToWidth和scaleToHeight，它们接近于“应用缩放因子以适应指定尺寸的图像”。

因此，您可以执行以下操作：

image.scaleToWidth(service.canvas.getWidth());
service.canvas.add(image);

这取决于您是否想保留宽高比，如果您需要为最大、最小或两者同时进行缩放。

- AndreaBogazzi

---

很遗憾我需要保留宽高比，能否详细解释一下如何实现这一点？ - Max Lynn

这并没有解决我还遇到的一些问题，但是它让我朝正确的方向前进了，所以感谢你的帮助。 - Max Lynn

它是否帮助您将图像缩放到画布的大小？它应该已经完成了。 - AndreaBogazzi

它确实起作用了，但之后我不得不进行检查，以确定高度是否仍然大于画布，这解决了我的所有问题。 - Max Lynn

Answer 2

受 @AndreaBogazzi 的启发，我编写了以下代码来完全适应画布的图片。

var canvas = new fabric.Canvas('canvas');
fabric.Image.fromURL('https://d32ogoqmya1dw8.cloudfront.net/images/NAGTWorkshops/structure/SGT2012/activities/noaa_global_topographic_map.jpg', function(oImg) {
  let imgWidth = oImg.width;
  let imgHeight = oImg.height;
  let canvasWidth = canvas.getWidth();
  let canvasHeight = canvas.getHeight();

  let imgRatio = imgWidth / imgHeight;
  let canvasRatio = canvasWidth / canvasHeight;
  if(imgRatio <= canvasRatio){
    if(imgHeight> canvasHeight){
      oImg.scaleToHeight(canvasHeight);
    }
  }else{
    if(imgWidth> canvasWidth){
      oImg.scaleToWidth(canvasWidth);
    }
  }

  canvas.clear();
  canvas.add(oImg);
  canvas.centerObject(oImg);
});

.image-preview{
    border: solid 1px #979797;
    width: 200px;
    height: 200px;
}

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.3.1/fabric.min.js"></script>
<div class="image-preview">
  <canvas id="canvas" width='200' height='200'></canvas>
  
  <hr/>
  <p>Origin Image</p>
  <img src="https://d32ogoqmya1dw8.cloudfront.net/images/NAGTWorkshops/structure/SGT2012/activities/noaa_global_topographic_map.jpg" />
</div>

- Evan Hu