图片适合 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 但这在这里不起作用

这里是stackblitz

示例

Answer 1

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

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

图片适合 canvas fabricjs

image fit into canvas fabricjs

javascript

fabricjs

angular