Измените размер холста, чтобы соответствовать размеру и масштабу изображения с FabricJs - PullRequest
Новая
       29

Измените размер холста, чтобы соответствовать размеру и масштабу изображения с FabricJs

0 голосов
/ 18 января 2019

После некоторых исследований я увидел только примеры подгонки изображения к холсту. Можно ли сделать это иначе и сделать источник изображения для холста, чтобы при загрузке изображения Canvas представлял собой загруженное изображение, размер которого изменялся до масштаба и размеров изображения?

Мне нужно нарисовать прямоугольники над изображением. Положение и размер прямоугольника важны для меня по отношению к изображению.

Я использую FabricJS.

1 Ответ

0 голосов
/ 18 января 2019

Это легко сделать, используя 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>
...