关键词：
【中文标题】Fabricjs：如何只显示图像的一部分？【英文标题】：Fabricjs: how to display only a part of image? 【发布时间】：2020-05-24 13:20:29 【问题描述】：我想使用fabricjs在画布上显示一部分图像（如html、css中的精灵和背景位置）。 默认情况下，fabricjs 会从图像的左上角显示。但我想显示不是从左上角开始的图像的一部分。
例如：我想在画布上显示这张图片的黑色边框部分。
我在 fabricjs 中看不到任何可以做到这一点的属性或函数。你有什么建议吗？谢谢
【问题讨论】：
【参考方案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" ></canvas>【讨论】：
将图像拖放到画布（FabricJS）
...这意味着您必须先添加要添加到画布的内容并作为画布的一部分，然后才能添加它。图片实际上是网站的一部分，所以它不需要做一些复杂的事情。我在此处找到的此代码仅适用于它是对象而不是实际元素的情况。顺便说一句，... 查看详情
你如何只显示背景的一部分是css？
】你如何只显示背景的一部分是css？【英文标题】：Howdoyouonlydisplaypartofabackgroundiscss?【发布时间】：2020-03-2212:14:57【问题描述】：作为HTML和CSS的新用户，我正在尝试将图像显示为带有文本的横幅，但我所测试和测试的所有内容... 查看详情
从画布中删除图像-fabricjs（javascript）
】从画布中删除图像-fabricjs（javascript）【英文标题】：removeimagefromcanvas-fabricjs(javascript)【发布时间】：2015-07-2917:49:39【问题描述】：我正在开发Web应用程序，其中大部分部分已被Angularjs覆盖。我被困在一个点上。我使用fabric.js... 查看详情
Fabricjs：显示横幅的预览
】Fabricjs：显示横幅的预览【英文标题】：Fabricjs:Showpreviewofthebanner【发布时间】：2018-12-0315:27:18【问题描述】：我正在使用fabricjs1.5，但我被困在一件事上。我想通过单击按钮向用户显示画布的预览，但我想不出一个合适的解决... 查看详情
fabricjs：缩放后如何显示对象大小
】fabricjs：缩放后如何显示对象大小【英文标题】：fabricjs:howtoshowobjectsizeafterscaling【发布时间】：2015-08-2312:28:55【问题描述】：我正在使用名为“WoocommerceProductDesigner”的wordpress插件，其中包含一个1.4.9版中名为fabicjs的JavaScript库... 查看详情
FabricJS 缩放图像以适应宽度/大小
】FabricJS缩放图像以适应宽度/大小【英文标题】：FabricJSscaleimagetofitwidth/size【发布时间】：2018-08-1802:58:31【问题描述】：如何正确缩放图像以适合容器大小？我想要一个由两个图像组成的网格，每个图像都适合提供的大小。https:... 查看详情
使用 FabricJs 的裁剪功能
】使用FabricJs的裁剪功能【英文标题】：CropFunctionalityusingFabricJs【发布时间】：2013-09-1423:41:15【问题描述】：如何在使用fabric.js加载到画布上的图像上实现裁剪工具？我在画布上加载了一个图像。现在我想实现裁剪工具，允许用... 查看详情
如何使用 PIL 放大图像的某个部分？
】如何使用PIL放大图像的某个部分？【英文标题】：HowtozoominonacertainpartofanimageusingPIL?【发布时间】：2019-01-1518:11:25【问题描述】：我使用了一个名为人脸识别的模块在任何照片上创建嘴唇的轮廓，并且想修改图片以只看到嘴唇... 查看详情
如何单击图像的某些部分
】如何单击图像的某些部分【英文标题】：Howtoclicksomepartsofanimage【发布时间】：2012-10-0217:44:37【问题描述】：我只需要使用以下图片制作索引页面。当用户点击标志之间的水时，他可以继续到下一页。如果用户在任何其他位置... 查看详情
使用 FabricJS 裁剪图像
】使用FabricJS裁剪图像【英文标题】：CropanimageusingFabricJS【发布时间】：2016-05-2513:13:39【问题描述】：我想使用(javascript)FabricJS+HTML5画布裁剪图像。画布的背景图像是一个织物图像对象。作物面积是一个FabricJS矩形。我也附上了一... 查看详情
如何在 CSS 的其余部分同时显示在 CSS 中加载的背景图像
】如何在CSS的其余部分同时显示在CSS中加载的背景图像【英文标题】：HowtoshowabackgroundimageloadedinCSSatthesametimeastherestoftheCSS【发布时间】：2022-01-0107:10:41【问题描述】：我创建了一个小型spring-boot应用程序，它只实现了一个登录表... 查看详情
关闭 fabricjs 图像对象的缓存
】关闭fabricjs图像对象的缓存【英文标题】：TurnOffCachingforfabricjsimageobject【发布时间】：2015-11-1216:40:24【问题描述】：我正在尝试使用以下函数使用fabricjs加载图像：fabric.Image.fromURL()我想关闭缓存，因为当图像更新时，fabricjs图... 查看详情
如何使用fabric js仅通过覆盖矩形打孔？
】如何使用fabricjs仅通过覆盖矩形打孔？【英文标题】：howtomakeaholethroughonlyoverlayRectangleusingfabricjs?【发布时间】：2020-03-0117:43:32【问题描述】：我正在使用Fabricjs版本1.7.22开发图像裁剪器。通常，每个裁剪器都会在图像上显示黑... 查看详情
如何裁剪仅在透明区域显示的图像？
】如何裁剪仅在透明区域显示的图像？【英文标题】：HowtoCropimagethatdisplayingonlyintransparentarea?【发布时间】：2012-06-2105:16:39【问题描述】：在图像中，您可以显示一个已修复的框架。我想裁剪部分图像，只显示在框架的透明区域... 查看详情
如何使用 Firebase 中的 Glide 仅加载部分图像？
...009:57:24【问题描述】：我有imageview，它应该只显示图像的一部分（适合屏幕的一部分）。用户单击后，它将打开整个图像。但我不知道如何仅将部分图像加载到imageview中。问题是Glide总是将图像放入imageview中。Glid 查看详情
如何使图像大小适合 JFrame 大小？
...JFrame。我在JPanel上加载了一张图片，但它只显示了图片的一部分：这是我所做的代码的一部分：JPanelpanelImg=newJPanel()publicvoidpaintComponent(Graphicsg)Imageimg 查看详情
如何显示图像的唯一部分
】如何显示图像的唯一部分【英文标题】：Howtoshowtheonlypartoftheimage【发布时间】：2018-05-0121:55:40【问题描述】：更新由于问题复杂且不清楚，我正在重写我的问题以使其更简单。给定图像（整个图像的图像uri；示例中的600x600图... 查看详情
如何使用 webview 只显示网页的一部分
】如何使用webview只显示网页的一部分【英文标题】：howtoshowonlyapartofwebpagebyusingwebview【发布时间】：2018-07-3016:59:21【问题描述】：我想用WKWebView显示冰岛的路况网页。我使用以下代码，但它会显示整个网页。@IBOutletweakvarwebView:WKW... 查看详情