图像适合画布fabricjs

Question

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

图像仅显示完整图像的 1/4。它没有在这个 tscode 的画布中显示完整的图像，我正在手动设置图像的宽度和高度。

这是我的 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 但这在这里不起作用

这里是stackblitz

例子

Answer 1

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

在您的链接示例中，您在画布上运行 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();
});