javascript - 图像适合画布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 但这在这里不起作用

这是堆栈闪电战

例子

标签： javascriptangularfabricjs

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