Question

经过一些研究，我只看到了使图像适合画布的示例。是否可以另辟other径为画布创建图像源，所以当我加载图像时，Canvas基本上就是加载的图像，并调整为图像的比例和尺寸？

我需要在图像上绘制矩形。矩形的位置和大小对我来说对图像很重要。

我正在使用FabricJS。

Answer 1

一旦知道图像的尺寸，就可以使用canvas.setWidth()和canvas.setHeight()轻松做到这一点。

const canvas = new fabric.Canvas("c")
const url = "https://via.placeholder.com/200x100"
const imgEl = document.createElement("img")
imgEl.src = url
imgEl.onload = () => {
  const img = new fabric.Image(imgEl)
  img.set({
    left: 50,
    top: 50,
    scaleX: 2,
    scaleY: 1.5
  })
  canvas.add(img)
  canvas.requestRenderAll()
  document.querySelector('#b').onclick = () => {
    canvas.setWidth(img.getScaledWidth())
    canvas.setHeight(img.getScaledHeight())
    img.set({
      left: 0,
      top: 0
    })
    img.setCoords()
    canvas.requestRenderAll()
  }
}

#c {
  border: 1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.5/fabric.js"></script>
<button id="b">fit canvas to image</button>
<canvas id="c" width="500" height="400"></canvas>

使用FabricJs调整画布大小以适合图像大小和比例

1 个答案: