Фабри cjs: как отобразить только часть изображения?

Question

Я хочу отобразить часть изображения на холсте, используя fabri cjs (например, sprite и background-position в html, css). По умолчанию с fabri cjs, он отображается сверху, слева от изображения. Но я хочу, чтобы часть изображения отображалась не сверху, а слева.

Например: я хочу отобразить часть черного рисунка на этом холсте.

Я не вижу никаких свойств или функций в fabri cjs, которые могли бы сделать это. У вас есть предложение? Спасибо

Answer 1

Вы пробовали cropX / cropY ? Объедините их с установкой ширины и высоты:

const canvas = new fabric.Canvas('c')
const url = 'https://i.stack.imgur.com/qVhbV.jpg'
const imgEl = document.createElement('img')
imgEl.src = url
imgEl.onload = () => {
  const img = new fabric.Image(imgEl)
  img.set({
    cropX: 70,
    cropY: 140,
    width: 200,
    height: 150,
  })
  canvas.add(img)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"></script>
<canvas id="c" width="300" height="200"></canvas>