javascript - 使用 FabricJS 裁剪图像

标签 javascript html canvas crop fabricjs

我想使用 (javascript)FabricJS + HTML5 Canvas 裁剪图像。

  • Canvas 的背景图像是一个 Fabric 图像对象。
  • 裁剪面积 是一个 FabricJS 矩形。

我也附上了一张图片。 (你可以看到我想完成什么) 是否可以以某种方式调整 FabricJS Canvas 的大小以仅保留矩形(绿色虚线矩形)选择的区域。我想我有所有必要的坐标,如您在附件中所见。

任何人有任何想法/(算法,伪代码)我如何使用 javascript(FabricJS) 解决它?

enter image description here

最佳答案

代码已在您问题的评论中提供。

但简而言之,您需要做的事情如下所列:

  1. 在你的图像上画一个矩形(objectBeingCropped)
  2. 使用函数 objectBeingCropped.toDataURL() 以 blob/url 格式将裁剪区域(图像上的矩形区域)导出到另一个图像对象的 src
  3. 现在使用 fabric.Image()
  4. 在 Canvas 上绘制新图像,您将 src 作为 blob

关于javascript - 使用 FabricJS 裁剪图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35395610/

相关文章:

javascript - 我想使用 onesignal Pushnotifiaction 将 IntelXDK 项目放入 Android Studio

javascript - 使敌人被子弹击中而死亡

html - 如何获取 svg 在文档中的位置?

javascript - 在javascript中识别firefox浏览器的选定选项卡URL

android - 我们如何将 Canvas 上的绘图与 Android 中的预定义图像进行比较?

javascript - 使用 HTML 和 JS 的 iPhone 游戏中的性能问题,带有 appMobi

python - 使用 tkinter 调整大小的可滚动 Canvas

javascript - rails 中的图像保护

javascript - 如何每 5 秒检查一次 Div 是否可见,如果可见,显示另一个 div?

html - 在导航链接下划线,附加到 div 底部并限制宽度