调整大小 canvas 以适合图像大小并使用 FabricJs 进行缩放

Question

经过一些研究，我只看到了将图像拟合到 canvas 的例子。是否可以另辟蹊径，为 canvas 创建一个图像源，所以当我加载图像时，Canvas 基本上是加载图像并调整为图像比例和尺寸？

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

我正在使用 FabricJS。

Answer 1

只要您知道图像的尺寸，使用 canvas.setWidth() and 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>

调整大小 canvas 以适合图像大小并使用 FabricJs 进行缩放

Resize canvas to fit the image size and scale with FabricJs

canvas

html5-canvas

fabricjs