fabric js scale image to fit canvas

如果你需要使用 Fabric.js 来将图像缩放以适合画布,请使用以下代码:

fabric.Image.fromURL('your_image_url', function(img) {
  // 调整图像大小以适合画布
  img.scaleToWidth(canvas.width);
  // 将图像添加到画布中
  canvas.add(img);

在这个示例中,我们首先从 URL 加载图像,然后调用 scaleToWidth() 方法将图像缩放到与画布相同的宽度,这样它就可以完全适合画布了。最后,我们将图像添加到画布中。

如果你希望将图像缩放到与画布高度相同,则可以使用 scaleToHeight() 方法。

另外,如果你需要在画布大小更改时动态缩放图像,请将上述代码放入 canvas.on('resize', function() {...}) 事件处理程序中。这将确保每次画布大小更改时都会自动调整图像大小。

希望这能帮到你!

  •