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

【问题标题】：Fabric Js - Is it possible to auto scale a image object to the canvas?Fabric Js - 是否可以将图像对象自动缩放到画布上？
【发布时间】：2025-11-30 20:15:02
【问题描述】：

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

        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

【问题讨论】：

标签： javascript angularjs fabricjs

【解决方案1】：

fabricjs 放了一个非常简单的方法来做到这一点。这些方法是scaleToWidth 和scaleToHeight，它们接近于“应用适合指定尺寸的图像的比例因子”

所以你可以这样做

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

如果您必须缩放最大、最小或两者，这取决于您是否要保留纵横比。

【讨论】：

很遗憾，我需要保留纵横比，能否再解释一下我如何做到这一点？
这并没有解决我遇到的其他一些问题，但已引导我走向正确的方向，所以感谢您的帮助。
它对您将图像缩放到画布大小有帮助吗？它应该做到的。
确实是这样，但我必须检查一下高度是否仍然大于画布 wqhich 解决了我所有的问题

【解决方案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>

【讨论】：