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

Posted 2023-03-25

【中文标题】Fabric Js - 是不是可以将图像对象自动缩放到画布上？

【英文标题】：Fabric Js - Is it possible to auto scale a image object to the canvas?Fabric Js - 是否可以将图像对象自动缩放到画布上？

【发布时间】：2016-05-28 01:02:41

【问题描述】：

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

        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

ta

【参考方案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>