您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > CSS

不借助 Javascript,利用 SVG 快速构建马赛克效果

时间:2022-04-13 09:08:46  来源:  作者:海椰人

核心是利用了 css 中一个很有意思的属性 -- image-rendering,它可以用于设置图像缩放算法。

何为 image-rendering?

CSS 属性 image-rendering 用于设置图像缩放算法。它适用于元素本身,适用于元素其他属性中的图像,也应用于子元素。

语法比较简单:

{
    image-rendering: auto;              // 默认值,使用双线性(bilinear)算法进行重新采样(高质量)
    image-rendering: smooth;         // 使用能最大化图像客观观感的算法来缩放图像。让照片更“平滑”
    image-rendering: crisp-edges;  // 使用可有效保留对比度和图像中的边缘的算法来对图像进行缩放
    image-rendering: pixelated;      // 放大图像时, 使用最近邻居算法,因此,图像看着像是由大块像素组成的
}

其中,image-rendering: pixelated 比较有意思,可以将一张低精度图像马赛克化。

譬如,假设我们有一张 300px x 300px 的图像,我们让他转换成 30px x 30px:

不借助 Javascript,利用 SVG 快速构建马赛克效果

 

我们再把失真后的图片,放大到 300px x 300px:

不借助 Javascript,利用 SVG 快速构建马赛克效果

 

在此基础上,我们给这张图片设置 image-rendering: pixelated,就能得到一张被马赛克化图片:

<img src="pic.jpeg?30x30" />
img {
    width: 300px;
    height: 300px;
    image-rendering: pixelated
}
不借助 Javascript,利用 SVG 快速构建马赛克效果

 

image-rendering: pixelated 实现马赛克效果的局限性

OK,那么为什么需要先缩小再放大,然后才运用 image-rendering: pixelated 呢?我们来做个对比,直接给原图设置 image-rendering: pixelated:

不借助 Javascript,利用 SVG 快速构建马赛克效果

 

直接给原图设置 image-rendering: pixelated 只会让图片变得更加有锯齿感,而不会直接产生马赛克的效果。

这也和 image-rendering: pixelated 的描述吻合,放大图像时, 使用最近邻居算法,因此,图像看着像是由大块像素组成的

我们只有基于放大模糊后的图像,才能利用 image-rendering: pixelated 得到一张被马赛克的图片!

利用 CSS 再图片缩小后再放大?

那么,假设我们只有一张清晰的原图,又想利用 CSS 得到一个马赛克效果,可行么?顺着这个思路,我们可以想到:

能否利用 CSS 将图片缩小后再放大,再运用 image-rendering: pixelated 呢?

不行。WEB 上的图片像极了 Photoshop 里的智能对象 —— 你可以任意修改它的尺寸(例如放大很多倍让其变模糊),但最后再把图片改回原本的大小时,图片会变回原来的样子(没有任何失真)

所以,要想在只有一张原图的情况下,得到一张模糊的图像,就不得不求助于 Canvas,这样一来就稍显麻烦了。我们只是想要个马赛克效果而已。

SVG 滤镜叠加实现马赛克效果

这就可以引出今天的主角了,SVG 滤镜,使用几层 SVG 滤镜的叠加,其实可以非常轻松的实现一个马赛克效果滤镜。

并且,SVG 滤镜可以通过 CSS filter,轻松的引入。

代码其实也非常的简单,SVG 定义一个滤镜,利用多层滤镜的叠加效果实现一个马赛克效果,然后,通过 CSS filter 引入,可以运用在任何元素上:

<img src="任意无需缩放的原图.png" alt="">
<svg>
  <filter id="pixelate" x="0" y="0">
    <feFlood x="4" y="4" height="2" width="2"/>
    <feComposite width="8" height="8"/>
    <feTile result="a"/>
    <feComposite in="SourceGraphic" in2="a" operator="in"/>
    <feMorphology operator="dilate"radius="5"/>
  </filter>
</svg>
img {
    width: 300px;
    height: 300px;
    filter: url(#pixelate);
}

这样,我们就得到了一个马赛克效果:

不借助 Javascript,利用 SVG 快速构建马赛克效果

 

如果你只是想使用这个效果,你甚至不需要去理解整个 SVG <filter> 到底做了什么事情,当然,如果你是一个一问到底的人,那么需要有一定的 SVG 基础,建议可以看看我的这几篇关于 SVG 滤镜的介绍:

  • 有意思!强大的 SVG 滤镜
  • 有意思!不规则边框的生成方案
  • 震惊!巧用 SVG 滤镜还能制作表情包?

CSS/SVG 实现马赛克的局限性

当然,CSS/SVG 滤镜实现马赛克的局限性在于,如果你是不想给用户看到原图的,那么在客户端直接使用这个方式相当于直接把原图的暴露了。

因为 CSS/SVG 滤镜的方式是在前端进行图片马赛克化的,而且需要原图。

当然,利用上述的两个实现图片马赛克技巧,我们还是可以用于制作一些简单的交互效果的,像是这样:

不借助 Javascript,利用 SVG 快速构建马赛克效果

 

文章来自
https://www.cnblogs.com/coco1s/p/16134088.html



Tags:马赛克   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,不构成投资建议。投资者据此操作,风险自担。如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除。
▌相关推荐
photoshop去除马赛克的方法
大家知道photoshop如何去除马赛克吗?下文小编就带来了photoshop去除马赛克的方法,希望对大家能够有所帮助,一起跟着小编来学习一下吧!photoshop如何去除马赛克?1.首先打开phot...【详细内容】
2023-11-08  Search: 马赛克  点击:(235)  评论:(0)  加入收藏
从马赛克到高清图,AI生图能力变强了,如何取得美感与失真的平衡
编辑:rome rome让图像看起来更好的 AI 工具,往往会导致图像失真,而让图像看起来更真实时,往往会缺少美感,这一问题该如何权衡?在悬疑和科幻作品中,我们经常能看到这样的场景:计算机...【详细内容】
2023-10-10  Search: 马赛克  点击:(283)  评论:(0)  加入收藏
微信可以去除马赛克了,看完涨知识了
今天小俊给大家分享一下微信去除马赛克的方法,学会之后,可以说非常方便实用!我们在使用微信的时候啊,经常会给好友发送一些图片之类的,可是出于安全考虑,我们通常会把图片上面的一...【详细内容】
2023-09-22  Search: 马赛克  点击:(92)  评论:(0)  加入收藏
马赛克效果怎么做?视频编辑技巧轻松get
马赛克是一种保护隐私的有效方法,它可以将视频中的敏感内容模糊或隐藏起来。在现代社会中,隐私保护成为一个重要的话题。人们越来越意识到他们需要保护自己的隐私,尤其是在互联...【详细内容】
2023-09-08  Search: 马赛克  点击:(322)  评论:(0)  加入收藏
带你认识Python图像量化处理及局部马赛克特效
本文分享自华为云社区《[Python图像处理] 二十.图像量化处理和采样处理及局部马赛克特效》,作者: eastmount。本文主要讲述如何进行图像量化处理和采样处理及局部马赛克特效。...【详细内容】
2022-09-14  Search: 马赛克  点击:(532)  评论:(0)  加入收藏
不借助 Javascript,利用 SVG 快速构建马赛克效果
核心是利用了 CSS 中一个很有意思的属性 -- image-rendering,它可以用于设置图像缩放算法。何为 image-rendering?CSS 属性 image-rendering 用于设置图像缩放算法。它适用于...【详细内容】
2022-04-13  Search: 马赛克  点击:(335)  评论:(0)  加入收藏
你会消除图片里的马赛克?我来告诉你
如果你的朋友给你发了一个截图,里面还有马赛克。你知道如何才能看到马赛克底下的内容吗? 是不是很好奇?按照下面的方法一定能清楚截图力马赛克下的内容。你可以在编辑图片的时...【详细内容】
2022-03-04  Search: 马赛克  点击:(1604)  评论:(0)  加入收藏
马赛克神秘外衣被脱下,AI解码让文字打码也不保
继修复打码的图片之后,打码的文字恐怕也不再安全了。就目前来说,给信息打上马赛克已经不再安全了,你所想保护的信息,极有可能在AI的操作下“春光乍泄”。这不是耸人听闻,最近一个...【详细内容】
2021-02-24  Search: 马赛克  点击:(555)  评论:(0)  加入收藏
真的可以一键消除马赛克?宅男狂喜,但不是真的
AI说白了就是一种通过机器代替人力的技术,离我们最近并且常用到的应该是美图这类软件吧。众所周知,在美颜相机、美图秀秀等软件诞生之前,照片的美化需要专业美工设计师通过PS进...【详细内容】
2020-10-10  Search: 马赛克  点击:(394)  评论:(0)  加入收藏
一秒消除马赛克,有码变无码!Python加PULSE无敌
前提美国如火如荼进行的BLM(黑命贵)运动。已经从民间上升到了政界,渗透进商业界,如今已经深入到了AI界。最近,图灵奖得主、人工智能标杆人物Yann LeCun,因为一则言论被群攻,迫不得...【详细内容】
2020-09-11  Search: 马赛克  点击:(491)  评论:(0)  加入收藏
▌简易百科推荐
12 个超级实用的 CSS 技巧
user-selectuser-select 属性可以用来控制用户是否能够选择文本。<div> <p>You can&#39;t select this text.</p></div><p>You can select this text.</p>CSS:div { width...【详细内容】
2023-12-19  前端充电宝  微信公众号  Tags:CSS   点击:(134)  评论:(0)  加入收藏
原生CSS嵌套使用,你学明白了吗?
如果你是一个前端开发人员,那么你应该使用过CSS预处理器以及预处理器中的嵌套特性。它一直是一个受欢迎的功能,我一直都在使用CSS预处理器。今年所有的主流浏览器都支持原生CS...【详细内容】
2023-12-06  南城大前端  微信公众号  Tags:CSS   点击:(185)  评论:(0)  加入收藏
CSS_Flex 那些鲜为人知的内幕
前言Flex想必大家都很熟悉,也是大家平时在进行页面布局的首选方案。(反正我是!)。不知道大家平时在遇到Flex布局属性问题时,是如何查阅并解决的。反正,我每次记不住哪些属性或...【详细内容】
2023-12-06  前端柒八九  微信公众号  Tags:CSS   点击:(141)  评论:(0)  加入收藏
CSS:这几个伪类,你用了吗
## :root 伪类:root 伪类是匹配文档的根元素,很多时候,根元素也就是 html 元素,用 root 伪类来匹配根元素,目的就是解决根元素不是 html 的场景,比如根元素是 svg 的时候。 root...【详细内容】
2023-11-30  读心悦  微信公众号  Tags:CSS   点击:(171)  评论:(0)  加入收藏
让你开发更舒适的 Tailwind 技巧
免费体验 Gpt4 plus 与 AI作图神器,我们出的钱 体验地址:体验使用 Tailwind CSS,我避免了在 React 项目中复制大量 CSS 文件的麻烦,使网页开发变得更加迅速高效。虽然 Tailwind...【详细内容】
2023-11-28  大迁世界  微信公众号  Tags:Tailwind   点击:(180)  评论:(0)  加入收藏
Display和Visibility的区别,你了解了吗?
采用CSS实现元素隐藏的方法有很多种,比如定位到屏幕之外、透明度变换等。而常见的两种方式是将元素设置为display:none或者visibility:hidden。元素样式设置为display:none当...【详细内容】
2023-11-27  读心悦  微信公众号  Tags:Display   点击:(175)  评论:(0)  加入收藏
新 CSS Math方法:Rem() 和 Mod()
CSS 添加了许多新的数学函数来补充旧有的函数(如 calc() 和最近的 clamp() )。这些函数最终都表示一个数值,但其工作原理的细微差别并不总是一开始就很清楚。本文介绍每个函数...【详细内容】
2023-11-23  大迁世界  微信公众号  Tags:CSS   点击:(256)  评论:(0)  加入收藏
CSS 新功能:让编码更高效
CSS 是一种不断发展的语言。每一次迭代,它都会变得越来越好。因此,了解最新的 CSS 功能非常重要,这样你才能在项目中使用它们,减少对第三方库的依赖。本文将介绍一些即将推出的...【详细内容】
2023-11-16  大迁世界  微信公众号  Tags:CSS   点击:(167)  评论:(0)  加入收藏
使用 CSS Grid 的响应式网页设计:消除媒体查询过载
前言你是否厌倦了在实现响应式网站时需要管理多个媒体查询?说再见复杂的代码,拥抱更简单的解决方案吧:CSS Grid。在这篇文章中,我们将踏上一场激动人心的 CSS Grid 之旅,发现它如...【详细内容】
2023-11-10  前端YUE  微信公众号  Tags:CSS   点击:(280)  评论:(0)  加入收藏
2024年了,别只使用React,需要学习一下Vue,不然没出路了
最近,我的朋友因为不熟悉 Vue.js 而未能通过面试。她平时工作中大部分时间都在使用React,所以也懒得去了解其他前端框架。世界上所有的前端框架我们都应该熟悉吗?不,这是极其不...【详细内容】
2023-11-08  web前端开发  微信公众号  Tags:Vue   点击:(299)  评论:(0)  加入收藏
站内最新
站内热门
站内头条