如何使用fabric js在画布上自动缩放具有纵横比的大图像

【问题标题】：How to auto scale big image with aspect ratio on canvas using fabric js如何使用fabric js在画布上自动缩放具有纵横比的大图像
【发布时间】：2019-03-27 12:08:43
【问题描述】：

我已将图像添加到 FabricJS 画布。如果图像太大，那么它会移到画布之外。我想在画布中调整图像而不丢失图像的纵横比。

fabric.Image.fromURL(image_url, function(img) {
  var oImg = img.set({ left: 0, top: 0 }).scale(1);
  fabricCanvas.add(oImg).setActiveObject(oImg);        
}, {
  crossOrigin: "anonymous"
});

【问题讨论】：

标签： jquery html canvas fabricjs

【解决方案1】：

在画布中缩放图像我假设 cw 为画布宽度， ch 为画布高度，您可以根据需要缩放图像，

fabric.Image.fromURL(imgURL, function(img) {
  var oImg = img.set({ left: 0, top: 0 }).scale(1);
  oImg.scaleToWidth(cw/2);
  oImg.scaleToHeight(ch/2);
  canvas.add(oImg).setActiveObject(oImg);        
}, {
  crossOrigin: "anonymous"
});

【讨论】：