如何使用Fabric JS在画布上以宽高比自动缩放大图像

Question

我已将图像添加到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"
});

Answer 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"
});