Fabric JS图像遮罩如何处理?

2023-12-14

我正在尝试实现图像蒙版,如下例所示:

示例图片在这里:https://s3-ap-northeast-1.amazonaws.com/utonly/demo/demo.jpg

我尝试了很多方法,花了很多时间,但仍然找不到好的解决方案。 图像必须能够在蒙版内调整大小和旋转,或从另一个视图进行编辑,然后将结果应用回图像。

我在这里找到了类似的例子http://jsfiddle.net/tbqrn/68/,但我不希望图像互相穿过。那可能吗?或者我有机会尝试其他方法来做到这一点吗?

var img01URL = 'http://fabricjs.com/assets/printio.png';
var img02URL = 'http://fabricjs.com/lib/pug.jpg';
var img03URL = 'http://fabricjs.com/assets/ladybug.png';
var img03URL = 'http://fabricjs.com/assets/ladybug.png';

var canvas = new fabric.Canvas('c');

var ctx = canvas.getContext("2d");
    ctx.beginPath();
    ctx.rect(10,10,150,150);
    ctx.rect(170,10,200,200);
    ctx.rect(10,170,150,150);
    ctx.closePath();
    ctx.stroke();
    ctx.clip();

fabric.Image.fromURL(img01URL, function(oImg) {
    oImg.scale(.25);
    oImg.left = 10;
    oImg.top = 10;
    canvas.add(oImg);
    canvas.renderAll();
});

fabric.Image.fromURL(img02URL, function(oImg) {
    oImg.scale(.40);
    oImg.left = 180;
    oImg.top = 0;
    canvas.add(oImg);
    canvas.renderAll();
});

fabric.Image.fromURL(img03URL, function(oImg) {
    oImg.left = 10;
    oImg.top = 170;
    canvas.add(oImg);
    canvas.renderAll();
});

谢谢您的帮助。


为了更好地解释这个答案: 这段代码不在fabricJS中,clipPath不是fabricJS属性(即使我希望它很快)。 此解决方案比使用 ClipTo 函数(在 Fabric 2.0 中已弃用)好一点,因为它允许您使用标准织物形状进行裁剪。 这个想法是将一个标准形状附加到另一个将其定义为clipPath的形状。然后可以固定 ClipPath(就像它附加到画布一样)或随图像移动。 这个想法还需要更好地探索。

有很多方法可以实现这一点。这些不是单一的衬管解决方案,需要定制编码。 这是使用附加到图像的 ClipPath 的解决方案。 需要修改主Image_render method.

var img01URL = 'http://fabricjs.com/assets/printio.png';
var img02URL = 'http://fabricjs.com/lib/pug.jpg';
var img03URL = 'http://fabricjs.com/assets/ladybug.png';
var img03URL = 'http://fabricjs.com/assets/ladybug.png';



    fabric.Image.prototype._render = function(ctx) {
      // custom clip code
      if (this.clipPath) {
        ctx.save();
        if (this.clipPath.fixed) {
          var retina = this.canvas.getRetinaScaling();
          ctx.setTransform(retina, 0, 0, retina, 0, 0);
          // to handle zoom
          ctx.transform.apply(ctx, this.canvas.viewportTransform);
          //
          this.clipPath.transform(ctx);
        }
        this.clipPath._render(ctx);
        ctx.restore();
        ctx.clip();
      }
      
      // end custom clip code
    
    
      var x = -this.width / 2, y = -this.height / 2, elementToDraw;

      if (this.isMoving === false && this.resizeFilter && this._needsResize()) {
        this._lastScaleX = this.scaleX;
        this._lastScaleY = this.scaleY;
        this.applyResizeFilters();
      }
      elementToDraw = this._element;
      elementToDraw && ctx.drawImage(elementToDraw,
                                     0, 0, this.width, this.height,
                                     x, y, this.width, this.height);
      this._stroke(ctx);
      this._renderStroke(ctx);
    };

var canvas = new fabric.Canvas('c');
canvas.setZoom(0.5)
fabric.Image.fromURL(img01URL, function(oImg) {
    oImg.scale(.25);
    oImg.left = 10;
    oImg.top = 10;
    oImg.clipPath = new fabric.Circle({radius: 40, top: 50, left: 50, fixed: true, fill: '', stroke: '' });
    canvas.add(oImg);
    canvas.renderAll();
});

fabric.Image.fromURL(img02URL, function(oImg) {
    oImg.scale(.40);
    oImg.left = 180;
    oImg.top = 0;
    oImg.clipPath = new fabric.Path('M85.6,606.2c-13.2,54.5-3.9,95.7,23.3,130.7c27.2,35-3.1,55.2-25.7,66.1C60.7,814,52.2,821,50.6,836.5c-1.6,15.6,19.5,76.3,29.6,86.4c10.1,10.1,32.7,31.9,47.5,54.5c14.8,22.6,34.2,7.8,34.2,7.8c14,10.9,28,0,28,0c24.9,11.7,39.7-4.7,39.7-4.7c12.4-14.8-14-30.3-14-30.3c-16.3-28.8-28.8-5.4-33.5-11.7s-8.6-7-33.5-35.8c-24.9-28.8,39.7-19.5,62.2-24.9c22.6-5.4,65.4-34.2,65.4-34.2c0,34.2,11.7,28.8,28.8,46.7c17.1,17.9,24.9,29.6,47.5,38.9c22.6,9.3,33.5,7.8,53.7,21c20.2,13.2,62.2,10.9,62.2,10.9c18.7,6.2,36.6,0,36.6,0c45.1,0,26.5-15.6,10.1-36.6c-16.3-21-49-3.1-63.8-13.2c-14.8-10.1-51.4-25.7-70-36.6c-18.7-10.9,0-30.3,0-48.2c0-17.9,14-31.9,14-31.9h72.4c0,0,56-3.9,70.8,26.5c14.8,30.3,37.3,36.6,38.1,52.9c0.8,16.3-13.2,17.9-13.2,17.9c-31.1-8.6-31.9,41.2-31.9,41.2c38.1,50.6,112-21,112-21c85.6-7.8,79.4-133.8,79.4-133.8c17.1-12.4,44.4-45.1,62.2-74.7c17.9-29.6,68.5-52.1,113.6-30.3c45.1,21.8,52.9-14.8,52.9-14.8c15.6,2.3,20.2-17.9,20.2-17.9c20.2-22.6-15.6-28-16.3-84c-0.8-56-47.5-66.1-45.1-82.5c2.3-16.3,49.8-68.5,38.1-63.8c-10.2,4.1-53,25.3-63.7,30.7c-0.4-1.4-1.1-3.4-2.5-6.6c-6.2-14-74.7,30.3-74.7,30.3s-108.5,64.2-129.6,68.9c-21,4.7-18.7-9.3-44.3-7c-25.7,2.3-38.5,4.7-154.1-44.4c-115.6-49-326,29.8-326,29.8s-168.1-267.9-28-383.4C265.8,13,78.4-83.3,32.9,168.8C-12.6,420.9,98.9,551.7,85.6,606.2z',{top: 0, left: 180, fixed: true, fill: '', stroke: '', scaleX: 0.2, scaleY: 0.2 });
    canvas.add(oImg);
    canvas.renderAll();
});
#c {
    border:1px solid #ccc;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.16/fabric.min.js"></script>
<canvas id="c" width="400" height="400"></canvas>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Fabric JS图像遮罩如何处理? 的相关文章

  • 有没有好的、轻量级的、具有良好 UI 的网络日期/时间选择器?

    几个愿望 如果它是基于 jQuery 的 那就最好了 如果它专注于简单的用户界面而不是养眼的东西 更好的 如果它既是日期又是时间选择器 好的 我应该提到的是 我已经查看了使用 Google 可以找到的大多数可用选项 问题不在于官方 jQue
  • 如何通过两个输入文本字段组合表中的搜索?

    我的桌子看起来像这样 table tr td Apple td td Green td tr tr td Grapes td td Green td tr tr td Orange td td Orange td tr table 搜索的j
  • 添加/更改 URL 参数并重定向到新 URL

    If the view allURL 中不存在参数 我需要将其与值一起添加到 URL 的末尾 如果它确实存在 那么我需要能够仅更改该值而不创建新的 URL 因为它之前可能有也可能没有其他参数 我找到了这个功能 但我无法让它工作 https
  • Jquery 选择器中的冒号

    我最近将 jquery 从 1 4 更新到 2 1 并开始出现错误 在我的代码中 我有一部分通过 id 选择元素 jQuery id name 这会产生一个错误 但是之前没有错误 1 4 如果我转义冒号 错误就会消失 他们在最新版本中添加了
  • 如何在 html5 中加载部分 html? [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 询问我们的问题推荐或查找工具 库或最喜欢的场外资源与 Stack Overflow 无关 因为它们往往会吸引固执己见的答案和垃圾邮件 反而
  • 是否有跨浏览器的 jQuery contentEditable 库? [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我正在寻找一个 jQuery 插件 库 它可以使 contentEditable 属性在所有主要浏览器中正常工作 我什至可以不用 IE6
  • Bootstrap 5 个带有下一个/上一个按钮的选项卡

    如何向 Bootstrap 5 选项卡添加上一个 下一个按钮 我尝试过使用以前版本的推荐方法 但结构必须不同 我在 jQuery 中缺少什么 btnNext click function nav tabs gt active next li
  • 删除多个类 (jQuery)

    有没有更好的方法来重写这个 element removeClass class1 removeClass class2 我无法使用removeClass 因为它会删除我不想要的所有课程 element removeClass class1
  • 将两个相似的 jQuery 脚本组合成一个 if/then 脚本

    我正在尝试根据回答的问题中的代码组合两个 jQuery 循环here https stackoverflow com questions 25175757 use jquery to move wordpress post attachme
  • 重置 JQuery 表单验证

    我在类别表单填写上使用了 Jquery 表单验证 该表单由模式弹出 当用户将表单设为空白并点击 保存 时 触发 JQuery 验证错误 Now if user close this modal Not page refresh and op
  • Html2canvas 忽略图像的对象拟合

    我一直在尝试利用 html2canvas 来截取元素的屏幕截图 我注意到 div 元素内使用 object fit 属性的图像在 html2canvas 屏幕截图后被拉伸 有没有为此散步 这是我的代码
  • 如何使用 Bootstrap 选项卡?

    我试图了解如何做到这一点 http getbootstrap com javascript tabs http getbootstrap com javascript tabs 我认为文档不够详细 因为我无法理解它是如何工作的 div cl
  • jquery validate - 如果隐藏字段有值则有效

    我需要根据隐藏字段的值验证字段 我尝试了这个自定义规则 jQuery validator addMethod cityselected function if featureID val return false else return t
  • jQuery 输入焦点不起作用

    我正在尝试在表中创建数据的内联编辑 为此 我将单元格中的文本更改为输入 document ready function td edit on click function this html
  • 找出 Jquery ajax 请求被重定向到的位置

    所以 我收到了这个ajax请求 请参阅 金发女郎 大约6英尺高 看起来像这样 ajax url http example com makeThing dataType html type POST data something someot
  • 处理重叠 SVG 图层中的鼠标事件

    我正在使用 d3 js 构建地图可视化 我正在为美国各州和县绘制填充多边形 县的 SVG 图层位于州图层下方 状态已填充 但填充不透明度设置为 0 我认为 需要填充来捕获点击事件 我想捕获州级的点击事件 但我想捕获县级的鼠标悬停事件 但是
  • JQuery、ASCX 和 webmethods 似乎不起作用

    我有一个级联下拉列表 其中 3 个 类型 类别和子类别 首先类型负载 然后选择类型 类别负载以及选择类别 子类别负载 我还有 2 个按钮 添加类别 和 添加子类别 单击这些按钮后 我调用 JQuery 模态表单来添加它们 我在代码后面使用
  • 仅在文件下载完成后设置 cookie。

    我有一个场景 我想告诉用户下载完成并提示关闭按钮 为此 我使用 jquery 插件来连续监视 cookie 以了解下载何时完成 我的问题是我想设置这个cookie fileDownload true and path 下载完成后立即进行 为
  • 我想在数据表中使用 Div 结构而不是 Table。是否可以?

    我想用数据表 https datatables net 用div结构代替表格 目的是满足设计要求 有什么可能的方法或替代方案吗 不 您将无法执行此操作 Datatables 的核心仅适用于表格元素和子 thead tbody tfooter
  • Highcharts 异步服务器加载多个系列

    我正在尝试按照其示例使用 Highcharts 的延迟加载 http www highcharts com stock demo lazy loading http www highcharts com stock demo lazy lo

随机推荐

  • 在 Git 中获取从 master 到分支的更改

    在我的存储库中 我有一个名为aq我正在努力 然后我提交了新的工作和错误master 将这些提交纳入其中的最佳方法是什么aq分支 创建另一个新分支master并将其与aq 查看aq分支 并从master git checkout aq git
  • 传递给 C++ 函数的数组给出不同的长度

    我想说首先 我对导致这个问题的 幕后 发生的事情感兴趣 就像我对代码的盲目修复一样感兴趣 也许 C 标准或我不熟悉的东西决定了导致它的原因 无论如何 我试图传递 3 个数组 A B C到一个函数中 它将合并A and B 将结果存储在C 函
  • 雪花:选择带双引号的“COLUMN”

    我有一位客户 他们的 Snowflake 实例要求列名称带有双引号 示例 从 lk category 中选择 类别名称 有谁知道如何关闭此功能 雪花文档确实解释了一些关于标识符的内容 关键是带引号的标识符必须严格按照它们的定义来引用 因此
  • NetLogo:有没有办法自定义导出图生成的 CSV 文件以仅包含某些列?

    这可能看起来非常基本 但是使用 NetLogo 的导出绘图功能 我得到的是这样的 x y color pen down x y color pen down x y color pen down x y color pen down 有没有
  • Spring Boot在验证@PathVariable参数时如何返回自定义错误消息

    是否可以向路径变量添加一些自定义验证消息 我有一些 GET GetMapping v2 tw id public TwDto getTw Authentication auth PathVariable Long id 的情况下 v2 tw
  • 这两个 LINQ 查询可以互换使用吗?

    a 以下两个查询会产生相同的结果吗 var query1 collection 1 SelectMany c 1 gt c 1 collection 2 SelectMany c 2 gt c 2 collection 3 Select c
  • MySql分页结果,查找特定结果的“页面”

    我有一个使用 MySql 数据库的应用程序 它显示分页的记录列表 用户可以向其中添加新记录 我知道如何使用 LIMIT 等获取分页结果 但问题是添加新记录时如何转到特定页面 如果页面大小为 20 并且用户正在查看第一页 并且他们添加了第 2
  • FFT 卷积 - 3x3 内核

    我编写了一些例程来使用 3x3 内核锐化灰度图像 1 1 1 1 9 1 1 1 1 以下代码在非 FFT 空域 卷积中运行良好 但在基于 FFT 频域 卷积中不起作用 输出图像似乎模糊 我有几个问题 1 该例程无法生成所需的结果 它还会冻
  • 是否有一个库可以将方法反编译为表达式树,并支持 CLR 4.0?

    前面的问题询问是否可以将编译的委托转换为表达式树 例如 将 net Func 转换为 net Expression gt 当时理智的答案是 这是可能的 但非常困难 而且没有标准库解决方案 使用反光镜 但幸运的是 有一些非常疯狂 非常伟大的人
  • json schema 中的关键字之间的逻辑关系是什么?

    根据规范 http json schema org schema 模式关键字之间不存在互斥 例如 我可以创建以下架构 properties foo type string items type integer type number 该模式
  • 是否可以链接到 bigquery 控制台中的作业?

    如果我在响应中使用 REST API 即 bigquery googleapis com 执行 BigQuery 作业 我会得到一个如下所示的 selfLink https bigquery googleapis com bigquery
  • 如何获取 UPSERT 操作的 INSERTED 和 UPDATED 行?

    我有一个像这样的 UPSERT 操作 INSERT INTO people SELECT FROM people update ON CONFLICT name surname DO UPDATE SET age EXCLUDED age
  • 并行运行异步方法

    我有一个异步方法 GetExpensiveThing 它执行一些昂贵的 I O 工作 这就是我的使用方式 Serial execution public async Task
  • 如何确保用鼠标调整 TrackBar 控件时设置的值是 SmallChange 的倍数而不是中间值?

    我使用 Net 轨迹栏控件 我的轨迹栏点是 0 5 10 15 问题是 当用户滚动轨迹栏时 他们很容易在点之间滚动 但我不想让该用户只将滚动条放在我的显示点中 就像他们只设置了 0 5 10 等 而不是他们设置了 6 7 8 9 我将 Sm
  • 从流程标准输出获取值

    我试图获取输出以显示我的计算机上当前打开的文档 但无论如何它都会返回 NULL StringCollection values new StringCollection var proc new Process StartInfo new
  • 如何将操作从 Ember 组件发送到包装它的视图?

    我知道sendAction会将操作从组件发送到与放置该组件的模板关联的控制器 但在我的情况下 该组件并未直接放置在路由模板内 相反 我的组件位于视图模板内 该组件有一个与之关联的控制器 App ComponentAController Em
  • 如何使用 VBA 从 Internet Explorer 下载文件

    我正在尝试从 Internet Explorer 11 下载 Excel 工作簿 当我单击链接时 会出现以下弹出消息 我尝试过使用 sendkeys s 但没有成功 如果不使用 IE 我无法使用该代码从 Internet 下载文件 因为该
  • 使用 Devise 和 Rails 4 时访问自定义参数

    我正在使用 teamtreehouse 教程学习 Rails 本教程使用 3 1 但我正在尝试学习 4 0 结果我遇到了困难 大概是因为 Rails 4 强制使用强参数 我有两个模型 一个用户模型和一个状态模型 我已经使用设计为用户创建身份
  • css3 border-image的透明png问题

    我在用着border image具有透明部分的 PNG 图像 问题是 div 有background color设置黑色 当我申请时border radius 图案的透明部分显示 div 的黑色 而不是包含 div 的元素的背景 如何得到b
  • Fabric JS图像遮罩如何处理?

    我正在尝试实现图像蒙版 如下例所示 示例图片在这里 https s3 ap northeast 1 amazonaws com utonly demo demo jpg 我尝试了很多方法 花了很多时间 但仍然找不到好的解决方案 图像必须能够