图像适合 canvas fabricjs

Question

我正在使用 Fabricjs 使用当前代码上传图像

图像仅显示完整图像的 1/4。 在此 tscode 中的 canvas 中未显示完整图像，我正在手动设置图像的宽度和高度。

这是我的 Ts 代码

  addImage(canvasInst, imageUrl) {
fabric.Image.fromURL(imageUrl, img => {
  var oImg = img.set({
    left: 0,
    top: 0
  });
  var canvasWidth = canvasInst.width / canvasInst.getZoom();
  oImg.scaleToWidth(canvasWidth);
  canvasInst.add(oImg).renderAll();
  canvasInst.toDataURL({ format: "png", quality: 0.8 });
});

}

但我正在尝试其他方式 scaletowidth 但这在这里不起作用

这是堆栈闪电战

例子

Answer 1

FabricJS 使用属性scaleX和scaleY来确定图像的大小，而width和height属性用于指定应该使用多少原始图像尺寸（缩小这些值将裁剪图像，而不是缩放图像）。

在您链接的示例中，您在 canvas 上运行scaleToWidth() 。 您需要在图像上运行它。

fabric.Image.fromURL(imageUrl, img => {
  var oImg = img.set({
    left: 0,
    top: 0
  });
  var canvasWidth = canvasInst.width / canvasInst.getZoom();
  oImg.scaleToWidth(canvasWidth);
  canvasInst.add(oImg).renderAll();
});