Fabricjs：如何只显示图像的一部分？

【问题标题】：Fabricjs: how to display only a part of image?Fabricjs：如何只显示图像的一部分？
【发布时间】：2020-05-24 13:20:29
【问题描述】：

我想使用fabricjs在画布上显示一部分图像（如html、css中的精灵和背景位置）。默认情况下，fabricjs 会从图像的左上角显示。但我想显示不是从左上角开始的图像的一部分。

例如：我想在画布上显示这张图片的黑色边框部分。

我在 fabricjs 中看不到任何可以做到这一点的属性或函数。你有什么建议吗？谢谢

【问题讨论】：

标签： html image canvas fabricjs crop

【解决方案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>

【讨论】：