Fabric.js高级点的教程3--添加遮罩和裁剪的方法

最新推荐文章于 2024-08-16 09:28:45 发布
最新推荐文章于 2024-08-16 09:28:45 发布
阅读量5.9k 收藏 15
点赞数 6
文章标签： javascript ViewUI
原文链接：https://my.oschina.net/xmqywx/blog/2246082
版权
本文详细介绍了如何使用Fabric.js在画布上实现自定义裁剪和遮罩功能，通过创建遮罩形状和添加图片图层来完成裁剪效果，解决了现有裁剪插件的局限性，提供了完整的思路和关键代码示例。
摘要由CSDN通过智能技术生成

为什么80%的码农都做不了架构师？>>> hot3.png

写这篇文章的时候我就要说一下了，这个遮罩和裁剪耗费了我真的是九牛二虎之力

裁剪的插件很多，无论你用原生JS,JQuery, Vue还是React.总能找到一款裁剪插件。今天我要说的是自己写一个截图功能，直接就在操作的画布中操作需要裁剪的图片，而不是跳一个新页面裁剪后再挪过来。Fabricjs 提供了很多方式的裁剪，最常见的是Object属性的上的clipTo，然而有弊端.

比如google一下比较好的一个demo： http://jsfiddle.net/hellomaya/kNEaX/1/

  1. 发现没有，裁剪后的选框依然和原图片一样大，无论用啥操作都没法使其变小(或许有办法我没试出来)

  1. 看源码，会发现他的clipTo一方面不完善，一方面只能是矩形的裁剪。没法实现遮罩。比如如下图：

这个时候发现官方demo有个其他方式的遮罩。 http://fabricjs.com/patterns fabric.Pattern 这个捏，文档写的倒是挺含含糊糊，网上的例子也是很少，不过功能是很强大，无论字体，形状，图片都统统可以给你遮罩上去。但是离我们最后要实现的功能还是有点距离

最低0.47元/天 解锁文章
weixin_34219944
关注
html5对画布进行裁剪,html5-canvas – Fabric.js画布上的多个裁剪区域
weixin_35974217的博客
06-22 701
这可以通过使用clipTo属性的Fabric来实现,但是必须在clipTo函数中反转转换(缩放和旋转).当您在Fabric中使用clipTo属性时,缩放和旋转将在剪辑后应用,这意味着剪切与图像进行缩放和旋转.您必须通过在clipTo属性函数中应用转换的准确相反来对抗.我的解决方案涉及到一个Fabric.Rect作为剪辑区域的“占位符”(这具有优点,因为您可以使用Fabric来移动对象,从而将剪辑区...
实用前端标注图片剪裁工具-AILabel.js
wang_xuan_1992的博客
11-03 3799
AILabel类库是一款集打点、线段、多段线、矩形、多边形、圆圈、涂抹等多标注形式于一体，附加文本（Text）、标记（Marker）、缩略图（EagleMap）、Scale（比例尺）等控件以及Util等辅助工具的在线Web端标注工具库。目前已被广泛应用于多标注项目中 文档目录 源代码：https://github.com/dingyang9642/AILabel API文档：http://ailabel.com.cn/public/ailabel/api/index.html Demo文档：http://a
Fabric.js 图像编辑器使用教程
最新发布
gitblog_00487的博客
08-16 965
Fabric.js 图像编辑器使用教程 fabricjs-image-editor-originjavascript image editor based on fabric.js项目地址:https://gitcode.com/gh_mirrors/fa/fabricjs-image-editor-origin 项目介绍 Fabric.js 图像编辑器是一个基于 Fabric.js 库的 Ja...
Fabric.js高级点的教程4--内嵌工作台画布
weixin_34067049的博客
05-08 2381
为什么80%的码农都做不了架构师？>>> ...
fabric.js和高级画板
weixin_34037515的博客
04-04 2511
本文介绍fabric.js框架使用，以及使用fabricjs打造一个高级画板程序. 高级画板功能介绍 全局绘制颜色选择 护眼模式、网格模式切换 自由绘制 画箭头 画直线 画虚线 画圆/椭圆/矩形/直角三角形/普通三角形/等边三角形 文字输入 图片展示及相关移动、缩放等操作 删除功能 （文末附：画板GitHub地址&fabric.js使用秘籍） 功能截图如下...
Fabric.js高级点的教程2--添加表格的方法
weixin_34248118的博客
10-15 1289
为什么80%的码农都做不了架构师？>>> ...
Fabric.js 使用纯色遮挡画布（前景色）
weixin_39415598的博客
09-10 1176
theme: smartblue 我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第8篇文章，点击查看活动详情 本文简介 点赞 + 关注 + 收藏 = 学会了 如果要覆盖 canvas 里的所有内容你会用什么方法？ 清空画布内容？ 直接移除 canvas 元素？ 创建一个新元素放在 canvas 的上一层？ 如果你的项目使用到 fabric.js ，可以直接使用 fa...
Flash CS3 之动画教程-78.遮罩动画.rar
07-16
众所周知，世界上97%的台式机上都安装有Flash Player，利用包含Flash创作工具、渲染引擎和已建立的超过200万的设计者和开发者群体的Flash平台生态系统，我们可以制作出各式各样的Flash动画。Adobe推出了flash最新...
19款 jquery-css3 js遮罩弹出层（浮动窗口）特效.rar
07-10
本源码收集了19款基于jquery-css3实现的js遮罩弹窗效果,弹出层，就是大家熟悉的浮动窗口，由html5 CSS3 JS jQuery联合实现的可自定义的弹出窗口，实例效果丰富，调用简单，初学者也可看懂。一个HTML5页面演示了19种...
Flash CS3 之动画教程-77.遮罩概念.rar
07-16
众所周知，世界上97%的台式机上都安装有Flash Player，利用包含Flash创作工具、渲染引擎和已建立的超过200万的设计者和开发者群体的Flash平台生态系统，我们可以制作出各式各样的Flash动画。Adobe推出了flash最新...
整全完美的 fabric.js ，支持手机及图片滤镜，无报错
08-30
官网自定下载，有很多问题，git下载的，又不支持手机触屏事件。这个是个人整合的相关完美无报错版本---version: '2.0.0-beta6'
superheroes:使用fabric.js的简单图片编辑器
04-30
超级英雄 使用fabric.js的简单图片编辑器
通过css使用background-color为背景图添加遮罩效果的两种方法
01-19
一个div同时设置background-color和background-image的话，color是处于img层下方的，无法实现遮罩效果，所以需要再创建一个div作为其子div,然后设置子div的背景颜色，介绍两种方法： 第一种，代码如下： css:   ....
【实战篇】使用fabric.js 快速开发一个图片编辑器
程序员成长指北
10-18 2498
大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群本文由作者@愚坤（秦少卫）投稿授权分享，项目源码已开源，感兴趣的可以点击源码地址学习下最近自己开发了一个图片编辑器，把源码也放在了GitHub上，顺便也总结下使用fabric.js开发一个编辑器需要用到哪些知识点。预览地址：https://nihaojob.github.io/vue-fabric...
Canvas Fabric.js库 中文文档API 教程(一)
weixin_44642182的博客
04-25 5755
出处：https://github.com/kangax/fabric.js/ Fabric.js介绍 第一部分 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kBogTRm8-1587816937914)(https://github.com/kangax/fabric.js/raw/master/lib/screenshot.png)] 今天我开始像您介绍F...
Fabric.js
热门推荐
qq_40407998的博客
09-15 2万+
Fabric.js是什么 Fabric.js 是一个简化HTML5 Canvas开发的Javascript库，Fabric.js提供了HTML5 Canvas本身缺失的对象模型、交互层、SVG解析器以及其他一整套工具。它是一个完全开源的项目，在MIT下获得授权，多年来一直在维护，近期要发布4.0版本，支持自定义controls。 Fabric.js能做什么 在Canvas画布上创建、填充图形（包括图片、文字、规则图形和复杂路径组成图形）。 给图形填充渐变颜色。 组合图形（包括组合图形、图形文字、图片等）。
Introduction to Fabric.js/ Part 8 - Clipping with clipPaths(介绍Fabric.js第八部分-剪裁)
百念成诗
03-31 2209
Introduction to Fabric.js/ Part 8 - Clipping with clipPaths ClipPaths basics The new clipPath property(新的clipPath属性) 在2.4.0中，我们为所有对象引入了clipPath属性。 ClipPath将替换clipTo:funcion(){}，以实现相同的灵活性，但具有更好的兼容性。 ClipPath需要对象缓存。 How to use it(如何使用) 将您自己的clipPath创建为普通的Fab
fabric.js 组件 图片上传裁剪并进行自定义区域标记
jinse29的博客
01-19 1686
利用fabric组件，实现图片上传、图片”裁剪“、自定义的区域标记一系列操作先放一张效果图吧👇。
element-ui局部添加遮罩
09-01
要在 Element-UI 中局部添加遮罩，你可以使用 `el-loading` 组件来实现。 首先，在需要添加遮罩的组件中，导入 `Loading` 组件： ``` import { Loading } from 'element-ui'; ``` 然后，在该组件的 `data` 属性中添加一个变量来控制遮罩的显示与隐藏： ``` data() { return { loadingInstance: null }; } ``` 接下来，在需要显示遮罩的地方，使用 `this.loadingInstance = Loading.service();` 来创建一个遮罩实例： ``` methods: { showLoading() { this.loadingInstance = Loading.service(); } } ``` 在需要隐藏遮罩的地方，使用 `this.loadingInstance.close();` 来关闭遮罩实例： ``` methods: { hideLoading() { this.loadingInstance.close(); } } ``` 最后，在组件的模板中，可以通过调用这两个方法来控制遮罩的显示与隐藏： ``` <template> <div> <el-button @click="showLoading">显示遮罩</el-button> <el-button @click="hideLoading">隐藏遮罩</el-button> </div> </template> ``` 这样就可以在 Element-UI 的组件中局部添加遮罩了。记得根据实际需要进行调整和适配。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值