jquery - 如何使用 Fabric js 在 Canvas 上自动缩放长宽比大图像

Question

我已将图像添加到 FabricJS Canvas 中。如果图像太大，则会超出 Canvas 。我希望使图像适合 Canvas 而不丢失图像的纵横比。

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

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

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