文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

小智周末学习发现了 10 个好用JavaScript图像处理库

nodeca.github.io/pica/demo/ Github: https://github.com/nodeca/pica pica 可在浏览器上实现高质量而且高性能的图片大小调整JS库，目标是在浏览器中以最快的速度进行高品质图像缩放...Fabric.js还可以将 SVG 图像转换为 JavaScript数据，该数据可用于将其放入元素。 5. Blurify blurify.js是一款小巧实用的js图片模糊效果插件。...使用该js插件可以将任意图片进行模糊处理。...使用基本图像功能（如边缘，拐角和形状）的能力是图像处理的基础。 该插件有助于检测和分析对象的角点，从而确定场景中主要对象的位置。 由于这些原因，可以自动裁剪出对象。 10....benhowdle89.github.io/grade/ Github: https://github.com/benhowdle89/grade grade.js是一款可以根据图片的两种主要颜色生成背景渐变的

2.4K10

神奇的CSS，几行代码就可以让照片变老照片的效果

这会将一些区域混合成类似的灰色调，使图片失去一些细节。 blur(1px)：对图像应用高斯模糊。足以组合颜色区域并使图片失去更多细节。 contrast(1.2)：锐化图片。...旧照片看起来更集中在中心，但随后它们会退化，失去颜色并且边缘变得有点模糊。我们可以通过在 CSS 中应用遮罩来实现。不幸的是，并非所有浏览器都支持遮罩……对我们来说幸运的是，供应商前缀是！...使用 -webkit-mask: radial-gradient(#000, #0009)，我们告诉浏览器使图像的边缘半透明（通过在中心使用一个完全可见的椭圆，向外渐变），所以图片会褪色并与背景融为一体...我们将使用 ::before 伪元素来模糊图像的边缘。旧照片中常见的东西。为此，我们将再次使用遮罩。另一个从中心到边缘的径向渐变，但这次将是相反的方向：在中心隐藏，在末端可见。...因为中心是用蒙版裁剪的，所以滤镜不会应用于图像的中心，只会根据蒙版应用于可见区域和可见度。例如，如果我们应用 blur() 背景滤镜，则完全可见的边缘会比仅部分可见的中间部分更加模糊。

3.1K30
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    Fabric.js 让用户手动加粗文本

    效果如图所示： 要实现2种操作 全文加粗 只加粗选中的文字 如果你还不清楚 Fabric.js 有什么用，我强烈推荐你阅读 《Fabric.js 从入门到目中无人》 。...《Fabric.js 基础画笔的用法 BaseBrush》 画笔的基础用法 《Fabric.js 自由绘制圆形》 将“框选”动作改造成自由绘制圆形 《Fabric.js 3个api设置画布宽高》 宽高设置并不是在初始化是才能进行的...3中方法 《Fabric.js 摆正元素的4种方法（带过渡动画）》 一键摆正被你旋转过的元素 《Fabric.js 将本地图像上传到画布背景》 除了在初始化时设置画布背景外，我还做了本地上传背景的功能，...让画布在运行时也能修改背景图 《在 Vue3中使用Fabric.js实现渐变(Gradient)效果，包括径向渐变radial》 官方入门教程也只有线性渐变，以至于某些文章说 Fabric.js 只支持线性渐变...但其实径向渐变也完全支持 《Fabric.js 从入门到目中无人》 Fabric.js 入门指南，学完能应付简单业务 《Fabric.js 右键菜单》 Fabric.js 暂时还没右键事件，如果你想实现右键菜单的功能

    3.5K30

    Fabric.js 元素选中状态的事件与样式

    上面这段代码是 Fabric.js 的基础。如果不太了解或者忘记语法了，可以查看 《Fabric.js 从入门到膨胀》。...在 Fabric.js 中，给元素设置了内边距，会影响控制角和辅助边到元素边缘的距离。 padding 接受一个数值，不需要传入单位。...背景色 这里所说的背景色和 css 里面的背景色不是同一回事。 本文要介绍 Fabric.js 的背景色有2种。一种是元素自身的背景色，另一种是选中后的背景色。...填充色：fill 背景色：backgroundColor 选中后的背景色：selectionBackgroundColor 填充色是基础，忘了的话可以查看 《Fabric.js 从入门到膨胀》 ，本文不再讲解...《Fabric.js 限制边框宽度缩放》 《Fabric.js 监听元素相交(重叠)》 《Fabric.js 橡皮擦的用法（包含恢复功能）》 《Fabric.js 喷雾笔刷 从入门到放肆》 《Fabric.js

    7.2K20

    Fabric.js 橡皮擦的用法（包含恢复功能）

    如果你还不清楚什么是 Fabric.js ，我墙裂建议你点赞 《Fabric.js 从入门到目中无人》。 同时最好了解基础画笔的用法 《Fabric.js 基础画笔的用法 BaseBrush》。...__canvas = new fabric.Canvas('c') // 在画布中添加图形（本例添加2个正方形） canvas.add( // 第一个正方形（宝蓝色） new...《Fabric.js 更换图片的3种方法（包括更换分组内的图片，以及存在缓存的情况）》 如果你的项目需要动态更换画布上的图片，那我也给你总结了3中方法 《Fabric.js 摆正元素的4种方法（带过渡动画...）》 一键摆正被你旋转过的元素 《Fabric.js 将本地图像上传到画布背景》 除了在初始化时设置画布背景外，我还做了本地上传背景的功能，让画布在运行时也能修改背景图 《在 Vue3中使用Fabric.js...但其实径向渐变也完全支持 《Fabric.js 从入门到目中无人》 Fabric.js 入门指南，学完能应付简单业务 《Fabric.js 右键菜单》 Fabric.js 暂时还没右键事件，如果你想实现右键菜单的功能

    2.7K30

    关于前端的photoshop初探的学习笔记

    通过对ps中的精确到像素点的寻找，可以修复某些因为马赛克等原因而产生的问题，比如将一种颜色去给另外一个点涂上颜色。。...磁性套索工具 当前图像，频率设置低一些，20即可。对比度90.宽度15像素 磁性套索工具，选择出来。 对边度，是选择区边缘是模糊还是清晰，清晰的话就设的高一些。模糊就低一些。...调整边缘 选择区根据形状修改选区。 半径 半径越大，离原选区边缘距离越大的地方就会被选中 alt减选。。注意各个工具之间的配合。。 抠图 背景 ps默认的背景。...边缘清晰。按住shift键进行直线连接。前景色背景色 。自动抹除。落笔的地方不是前景色自动抹除选项打钩后。 颜色替换工具 切片参考线 视图下 ，基于参考线的切分。 工具栏中找颜色替换工具。...混合器画笔工具 颜料钢里面的涂抹的效果。参数选项。混合器画笔预设。载入画笔 。在燃料刚中占上颜料。预设其他的选项。 仿制图章工具 修复画笔类似。将人从某处除掉。可以看到要修复的图像。

    2.3K60

    ps日式风景画

    日式风景画 首先 打开素材，把背景图 复制2个图层之后呢， 回到【图层1副本】，来到滤镜-其他-高反差保留（半径值0.3）然后呢 图像-调整-阀值127 。...再次来到【图层1】去更改 滤镜-风格化-查找边缘，之后关闭图层1副本。在图层1更改 图像-调整-阀值128 打开图层1副本。查看效果。 选中图层1和图层1副本 将他们图层混合模式改为 正片叠底。...之后，复制一个背景 副本。在这个背景图层 去调整阀值30；在复制一个背景。作为背景2副本 阀值20； 这一步的背景副本建议，一个一个添加编辑。...使用50% 灰色填充这个图层；；我们再来更改 滤镜-杂色-添加杂色（数量10%）；滤镜-模糊-动感模糊 （角度40 距离166）；图层混合模式 滤色 不透明度49左右；色阶0.7； 新建一个背景，用画笔擦拭污点...擦拭玩之后，我们来把宣纸移动过来 按住shift alt 中心点 放大；图层混合模式 正片叠底；ctrl m打开曲线 调整颜色； 移动 对话框 过来，右键单击 删格化图层；双击这个图层-描边5px -颜色叠加

    42120

    【实战篇】使用fabric.js 快速开发一个图片编辑器

    我的方法是在入口文件中初始化实例，然后与mixins结合，在mixins中定义了选择类型（多选、单选、未选中）、选中元素类型、选中id等属性，以及选中、取消选中的事件，子组件通过引入mixins来开发对应功能...主要包括设置画布大小、设置背景颜色、设置背景图片，也可以设置背景重复方向。...activeObject){ activeObject[name]() this.canvas.c.renderAll() } } 多元素对齐有上下左右对齐、水平、垂直对齐，主要是通过获得最边缘元素的坐标...item.setCoords(); this.canvas.c.renderAll(); }); } } 平均分配会复杂一些，需要计算出边缘与元素间距...最后希望大家能够通过这个项目学习到fabric.js的基础用法，感兴趣的话可以一起维护这款小编辑器，欢迎star。

    3.6K20

    2d游戏shader(效果)

    Blur 效果: 模糊 原理: 采样附近上下左右四个相邻像素的颜色，与当前像素颜色按比例混合（简单滤波） 原图（左）                               模糊效果图...（右） BlurBox 效果: box模糊 原理: 采样周边8个相邻像素的颜色，与当前像素颜色按平均比例混合（Box滤波器） BlurGauss 效果: 高斯模糊 原理: 采样周边8个相邻像素的颜色，与当前像素颜色按比例混合...这个漂亮的实现来自风宇冲的blog http://blog.sina.com.cn/lsy835375 Emboss 效果: 浮雕 原理: 图像的前景前向凸出背景。...原图（左）、浮雕效果（右） Pencil 效果: 铅笔画描边 原理: 如果在图像的边缘处，灰度值肯定经过一个跳跃，我们可以计算出这个跳跃，并对这个值进行一些处理，来得到边缘浓黑的描边效果，就像铅笔画一样...数字图像处理 随便一本高校用的教材即可。 其它一些参考已经在具体效果的原理中列出。如有遗漏请指出，谢谢。

    1.4K10

    网页视频会议背景实时替换。Google Meet背后的技术揭秘

    一种新的浏览器内 ML 解决方案，用于模糊和替换 Google Meet 中的背景。效果出色毫无 PS 痕迹，且在低端设备上实现了实时性能和低功耗。...中: 可分离滤波器去除了背景模糊中的晕轮效应。右: 光线包装应用在背景替换。...模糊着色器根据分割 mask 的值按比例调整每个像素的模糊强度，以模拟背景虚化（bokeh）效果，类似于光学中的模糊圈（CoC）。像素由它们的 CoC 半径加权，这样前景像素就不会渗入背景。...我们用可分离滤波器实现加权模糊，而不是用流行的高斯金字塔，因为它消除了人周围的晕轮效应 artifact。为了提高效率，模糊是在低分辨率下执行的，并与原始分辨率输入帧进行混合。 ? 背景模糊的例子。...对于背景替换，我们采用了一种称为光线包装（light wrapping）的合成技术，用于混合分割的人像和定制的背景图像。光线包装有助于柔化分割边缘，允许背景光线溢出到前景元素上，使合成更加身临其境。

    1.8K31

    Fabric.js 使用图片遮盖画布（前景图）

    本文简介 点赞 + 关注 + 收藏 = 学会了 在 《Fabric.js 使用纯色遮挡画布（前景色）》 中讲到使用纯色的方式遮盖画布。...let rect = new fabric.Rect({ width: 80, height: 80, }) canvas.add(rect) 这个例子中，...overlayImage 和 overlayColor 一样，都可以将画布上的所有元素覆盖掉，比如背景图、背景色、图形等元素。...覆盖图像不受视口变换的影响 由于图片是有尺寸的，如果你的场景中，画布可以缩放或者被拖拽，就会出现下图的效果。 覆盖的图片被缩小或者移动后，就露出了背景色（红色）。...锁定背景图，不受缩放和拖拽的影响》 里讲到的有点像，对吧~ 所以当看到 fabric.js 的相关属性和方法名称里出现 Vpt ，大概率就和 视口 有关。

    1.9K20

    photoshop学习笔记

    窗口——工作区——复位基本功能：让软件界面恢复到默认的标准状态 所有的控制面板都在窗口菜单中，可以对其进行隐藏和显示 按下TAB键可以隐藏或显示工具箱，属性栏，控制面板 按下SHIFT+TAB键，可以只隐藏控制面板...前景色填充：ALT+DELETE(删除) 背景色填充：CTRL+DELETE(删除) 按D键，恢复到默认的黑白色 按X键，前背景色的切换 （三）移动工具V 功能：移动对象 复制：按下ALT键用移动工具进行拖拽...特点：边缘呈直 线的，不太准确。 磁性套索：点一个起点，把鼠标顺着抠选对象边缘滑动，会自动捕捉。特点：通过抠选对象颜色与背景颜色 的差异来选择，很准确。...画笔面板F5 画笔笔尖形状：画笔样式，大小，间距 形状动态：大小抖动，角度抖动 散布：散布，数量 颜色动态：前景到背景抖动，色相抖动 传递：不透明度的抖动 画笔描边路径： 用画笔样式描边路径得到非常绚丽的效果...常用快捷键： F5画笔面板，F6颜色面板，f7，图层面板，F8信息面板 （二）具体的混合模式： 溶解：让图像中出现杂色（背景的颜色），条件：降低不透明度 正片叠底：去亮留暗（去白留黑） 特点：去除亮色

    3.2K20

    图片处理不用愁，给你十个小帮手

    8 位/通道的 RGB 图像中的每个通道有 256 个可能的值，这意味着该图像有 1600 万个以上可能的颜色值。...RGB 彩色图像可由三种矩阵表示：一种代表像素中红色的强度，一种代表绿色，另一种代表蓝色。...dx：源图像数据在目标画布中的位置偏移量（x 轴方向的偏移量）。 dy：源图像数据在目标画布中的位置偏移量（y 轴方向的偏移量）。 dirtyX（可选）：在源图像数据中，矩形区域左上角的位置。...默认是整个图像数据的左上角（x 坐标）。 dirtyY（可选）：在源图像数据中，矩形区域左上角的位置。默认是整个图像数据的左上角（y 坐标）。...dirtyWidth（可选）：在源图像数据中，矩形区域的宽度。默认是图像数据的宽度。 dirtyHeight（可选）：在源图像数据中，矩形区域的高度。默认是图像数据的高度。

    5.1K50

    由Photoshop高反差保留算法原理联想到的一些图像增强算法。

    它的主要作用就是加强图像中高反差部分。还以人物照片为例子，一般为了使人物皮肤美观，通常需要执行模糊，执行模糊后人物的线条也被模糊了。...在执行模糊之前复制图像两个副本，其中一个执行模糊，另一个执行高反差保留，把高反差保留后的图层放置在模糊图层的上方，然后执行柔光混合模式，这样人物的线条就更清楚些。   ...，执行后，图像中较为平坦的地方变化不大，而边缘部分被模糊了，如果用原图 - 高斯模糊则得到的则是强化的边缘值，高反差保留在PS的英文版中对应的单词是HighPass，即高通，也就是这个意思。      ...， 则即减少了噪音，又保持了边缘等细节（边缘和噪音都属于高频部分的），能有效的增强图像的信息。　　      ...因此，如果用这样的方式来得到一副图像： 　　　　　　增强图像 = 模糊图像 + Amount *(原始图像 - 高斯模糊图像)       其中Amount控制增强的程度，则能起到一定的增强作用。

    1.7K60

    【图形学】形态抗锯齿MLAA详解与Python实现

    抗锯齿技术处理的目标是图像中边缘部分的锯齿状走样....MLAA首先需要查找出图像中的边缘信息. 在MLAA中, 图像边缘信息的查找相对单个通道进行的, 因此对于彩色图像来说, 需要通过某个方法将其转为单通道形式....遍历图像中每个像素, 将当前像素与左边和上边相邻的像素做差对比, 当差别大于某个阈值th时认为此像素覆盖边缘....混合公式结果如下, 可以看到边缘原先十分锐利的像素得到了有效的模糊, 且模糊后的图像整体形状没有太大的改变. 后面是实际使用时的代码, 为了处理图像边缘时算法也能正常工作而做出了一些优化....需要注意到MLAA仅仅是形态抗锯齿系列算法的开创者, 其仍然存在非常多的缺点: 例如剧烈变换的场景下容易产生鬼影现象, 对走样边缘的判断只有一个像素也不够准确, 抗锯齿后文字容易模糊等.

    5.7K71

    Web ML+ WebAssembly 支持实现 Google Meet 背景模糊功能

    从 mmhmm、腾讯会议、Zoom 到 Google Meet，背景模糊和特效已经成为视频会议或直播的一项标配。...我们最近宣布的在Google Meet中模糊和替换背景的方法，就是为了实现这一目标而迈出的一小步。 我们利用机器学习（ML）来更好地突出参与者，从而忽略他们周围的背景环境。...然后通过WebGL2使用蒙版来渲染视频，实现背景的模糊或替换。 在当前版本中，模型推理在客户端的CPU上执行，以实现低功耗和最大的设备覆盖范围。...为了提高效率，模糊以低分辨率执行，并以原始分辨率与输入帧混合 对于背景替换，我们采用了一种称为灯光包裹（Light wrapping）的合成技术，用于混合分割的人物和定制的背景图像。...光线包裹允许背景光溢出到前景元素上，从而使合成更具沉浸感，这有助于柔化分割边缘。

    1.2K20

    matting笔记_一周小结

    文章针对这些问题，设计了一个输入为图像和 trimap 的，end-to-end的蒙板学习方法。同时，通过合成得到一个抠图大数据集，将单一背景下的目标进行提取，合成到复杂的新背景下。...总结 为了将其推广到自然图像中，文章指出抠图算法除了使用颜色作为主要提示外，需要利用更多的结构和语义特征。这篇文章证明了神经网络能够捕获高级特征并用来改进matting效果。...看到这篇文章的demo，真的很惊艳，效果很好，头发边缘清晰，即使视频中的人物甩头也没有影响合成效果。而且文章开源了代码，给出了完整的训练和测试代码。还有很多细节的地方，后续再细看，跑一下代码。 4....文章认为，在这一过程中，一个分类问题没有得到充分解决。如果仔细观看三元图，未知区域的像素将会分入三个集合：不透明前景，不透明背景以及半透明区域。前两类称之为不透明像素，后一类称之为混合像素。...分辨率低，容易失真，使用了高分辨率背景图片和前景图片 语义模糊，使用YOLOv3检测，背景图片是否有多余的目标。

    1.2K30

    Web ML+ WebAssembly 支持实现 Google Meet 背景模糊功能

    正文字数：2584 阅读时长：4分钟 从 mmhmm、腾讯会议、Zoom 到 Google Meet，背景模糊和特效已经成为视频会议或直播的一项标配。...中：可分离滤镜移除背景模糊中的光晕瑕疵。右：替换背景中的灯光包裹包装（light wrapping）。...我们为加权模糊实现了可分离的过滤器，而不是流行的高斯金字塔，因为它去除了人周围的光晕伪影。为了提高效率，模糊以低分辨率执行，并以原始分辨率与输入帧混合 ?...背景模糊示例 对于背景替换，我们采用了一种称为灯光包裹（Light wrapping）的合成技术，用于混合分割的人物和定制的背景图像。...光线包裹允许背景光溢出到前景元素上，从而使合成更具沉浸感，这有助于柔化分割边缘。当前景和替换的背景之间，存在较大的对比度时，它还有助于最大限度地减少光晕伪影 ?

    74530

    OpenCV图像锐化---USM锐化和Laplace锐化

    前言 图像锐化 (image sharpening) 是补偿图像的轮廓，增强图像的边缘及灰度跳变的部分，使图像变得清晰，分为空间域处理和频域处理两类。...图像锐化是为了突出图像上地物的边缘、轮廓，或某些线性目标要素的特征。这种滤波方法提高了地物边缘与周围像元之间的反差，因此也被称为边缘增强。...锐化介绍 微卡智享 USM锐化 USM 锐化增强算法（Unsharpen Mask），是图像卷积处理实现锐化常用的算法，这种锐化的方法就是对原图像先做一个高斯模糊，然后用原来的图像减去一个系数乘以高斯模糊之后的图像...USM锐化公式： （源图像– w*高斯模糊）/（1-w） w表示权重（0.1～0.9），默认为0.6 # 实现方式 1 高斯模糊GaussianBlur 2 图像加权混合addWeighted...25); cv::addWeighted(src, 1.5, blur_usm, -0.5, 0, dst_usm); imshow("dst_usm", dst_usm); 其中高斯模糊中的

    10.3K30
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券