不借助 Javascript,利用 SVG 快速构建马赛克效果
之前在公众号转发了好友 Vajoy
的一篇文章 -- 巧用 CSS 把图片马赛克风格化。
核心是利用了 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
:
我们再把失真后的图片,放大到 300px x 300px
:
在此基础上,我们给这张图片设置 image-rendering: pixelated
,就能得到一张被马赛克化图片:
<img src="pic.jpeg?30x30" />
img {
width: 300px;
height: 300px;
image-rendering: pixelated
}
image-rendering: pixelated 实现马赛克效果的局限性
OK,那么为什么需要先缩小再放大,然后才运用 image-rendering: pixelated
呢?我们来做个对比,直接给原图设置 image-rendering: pixelated
:
直接给原图设置 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);
}
这样,我们就得到了一个马赛克效果:
如果你只是想使用这个效果,你甚至不需要去理解整个 SVG <filter>
到底做了什么事情,当然,如果你是一个一问到底的人,那么需要有一定的 SVG 基础,建议可以看看我的这几篇关于 SVG 滤镜的介绍:
CSS/SVG 实现马赛克的局限性
当然,CSS/SVG 滤镜实现马赛克的局限性在于,如果你是不想给用户看到原图的,那么在客户端直接使用这个方式相当于直接把原图的暴露了。
因为 CSS/SVG 滤镜的方式是在前端进行图片马赛克化的,而且需要原图。
当然,利用上述的两个实现图片马赛克技巧,我们还是可以用于制作一些简单的交互效果的,像是这样:
上述的 DEMO 和 SVG 滤镜的全部代码,你都可以在这两个 DEMO 中找到:
最后
好了,本文到此结束,希望对你有帮助
更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ,持续更新,欢迎点个 star 订阅收藏。
如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。
不借助 Javascript,利用 SVG 快速构建马赛克效果的更多相关文章
- 利用Nodejs快速构建应用原型
利用Nodejs快速构建应用原型 开发一个应用往往需要快速的构建原型,然后在此基础上设计和改进,前端可能立马能看到效果,但是后端业务逻辑不会那么快,这个时候其实我们需要额只是一些模拟数据,所以不需要真 ...
- 9. 利用Docker快速构建MGR | 深入浅出MGR
目录 1.安装Docker 2.拉取GreatSQL镜像,并创建容器 2.1 拉取镜像 2.2 创建新容器 2.3 容器管理 3.构建MGR集群 3.1 创建专用子网 3.2 创建3个新容器 3.3 ...
- 如何利用docker快速构建MySQL主从复制环境
在学习MySQL的过程中,常常会测试各种参数的作用.这时候,就需要快速构建出MySQL实例,甚至主从. 考虑如下场景: 譬如我想测试mysqldump在指定--single-transaction参数 ...
- 8. 利用Ansible快速构建MGR | 深入浅出MGR
GreatSQL社区原创内容未经授权不得随意使用,转载请联系小编并注明来源. 目录 1. 安装ansbile 2. 配置ansible 3. 建立ssh信任 4. 测试ansible 5. 使用ans ...
- vue2.x利用脚手架快速构建项目并引入bootstrap、jquery
要使用vue-cli脚手架搭建项目,首先需要安装node.js Node.js官网:https://nodejs.org/en/download/ 选择你对应的系统即可下载,下载完成后傻瓜式安装即可. ...
- JavaScript 利用 async await 实现 sleep 效果
const sleep = (timeountMS) => new Promise((resolve) => { setTimeout(resolve, timeountMS); }); ...
- 利用京东云Serverless服务快速构建5G时代的IoT应用
10月31日,在2019年中国国际信息通信展览会上,工信部宣布:5G商用正式启动.5G商用时代来了! 5G的商用,使得数据传输速度.响应速度.连接数据.数据传输量.传输可靠性等方面都有了显著的提升,这 ...
- JavaScript对SVG进行操作的相关技术
原文地址:http://www.ibm.com/developerworks/cn/xml/x-svgscript/ 本文主要介绍在 SVG 中通过编程实现动态操作 SVG 图像的知识. SVG ...
- 快速构建Windows 8风格应用13-SearchContract构建
原文:快速构建Windows 8风格应用13-SearchContract构建 本篇博文主要介绍如何在应用中构建SearchContract,相应的原理已经在博文<快速构建Windows 8风格 ...
随机推荐
- Windows XP系统搜索故障及处理办法点点通
故障1:单击资源管理器工具栏上的"搜索"按钮或者按F3,系统无任何响应. 解决方法:首先进入C:\Windows\inf文件夹(该文件夹属性为隐藏),右键单击srchasst.in ...
- nexus3上传第三方jar包
1.新建第三方仓库,名字叫3rd_part 2.添加到maven-public组中 3.修改maven的setting.xml 4.执行命令 mvn deploy:deploy-file -Dgrou ...
- Linux 环境下安装 Nexus 私服存储库
镜像下载.域名解析.时间同步请点击阿里云开源镜像站 一.nexus私服存储库简介 Nexus 是一个强大的maven仓库管理器,它极大地简化了本地内部仓库的维护和外部仓库的访问.,还可以用来创建yum ...
- isro
靶机准备 将下载的压缩文件解压,打开vmx文件即可 将网络模式设置为NAT 扫描获得ip:192.168.164.185 kali:192.168.164.137 netdiscover -r 192 ...
- async-validator 源码学习笔记(五):Schema
系列文章: 1.async-validator 源码学习(一):文档翻译 2.async-validator 源码学习笔记(二):目录结构 3.async-validator 源码学习笔记(三):ru ...
- BUU findkey
定位关键函数 跟入flag找到问题位置 两行一样的代码,nop掉第二行,按p生成函数 代码审计 int __userpurge sub_4018C4@<eax>(int a1@<eb ...
- Kafka 消费者是否可以消费指定分区消息?
Kafa consumer消费消息时,向broker发出fetch请求去消费特定分区的消息,consumer指定消息在日志中的偏移量(offset),就可以消费从这个位置开始的消息,customer拥 ...
- 爬虫-数据解析-xpath
xpath 解析 模块安装 : pip install lxml xpath的解析原理 实例化一个etree类型的对象,且将页面源码数据加载到该对象中 需要调用该对象的xpath方法结合着不同形式的x ...
- 数字电路的多路复用(MUX)
学习文章:https://mp.weixin.qq.com/s/1pfLfvkAPyhEMLvfnyDy0g 最基本--2选1的MUX结构: 可以看作是:assign Y=S?B:A; 下面使用MUX ...
- 11_滞后补偿器_Lag Compensator_Matlab_Simulink
下图中左边没有补偿器的稳态误差,右边是有只猴补偿器的稳态误差,H(s)为滞后补偿器的原因是H(s)bode图的相位图是负的 其中黄线是没有滞后补偿器的,蓝线是滞后补偿器中p = 1 ,q = 9的曲线 ...