纯CSS图片滤镜项目CSSgram简介 « 张鑫旭-鑫空间-鑫生活

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8692
本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。

一、CSS滤镜库效果预览

以下效果均是使用纯CSS实现的。

CSS滤镜效果截图

您可以狠狠地点击的这里：CSSgram滤镜与混合模式图像处理demo

您也可以选择本机图片感受下不同的滤镜处理效果：

使用本地图片预览示意

二、CSSgram项目简介

项目地址：https://github.com/una/CSSgram

CSSgram项目是借助CSS filter滤镜和mix-blend-mode混合模式实现Instagram这个产品中的26种滤镜效果。

使用方法

滤镜效果的实现非常简单，如下3步：

引入css库资源：

<link rel="stylesheet" href="/path/css/cssgram.min.css">

写好HTML结构，<img>元素外部弄一层父级标签，例如使用语义更好的<figure>：
```
<figure>
  <img src="../img.png">
</figure>
```
在<figure>元素上添加合适的滤镜相关的类名，例如：
```
<figure class="aden">
  <img src="../img.png">
</figure>
```
完整的类名列表如下：
- 1977: class="_1977"
- Aden: class="aden"
- Amaro: class="amaro"
- Brannan: class="brannan"
- Brooklyn: class="brooklyn"
- Clarendon: class="clarendon"
- Gingham: class="gingham"
- Hudson: class="hudson"
- Inkwell: class="inkwell"
- Kelvin: class="kelvin"
- Lark: class="lark"
- Lo-fi: class="lofi"
- Mayfair: class="mayfair"
- Moon: class="moon"
- Nashville: class="nashville"
- Perpetua: class="perpetua"
- Reyes: class="reyes"
- Rise: class="rise"
- Slumber: class="slumber"
- Stinson: class="stinson"
- Toaster: class="toaster"
- Valencia: class="valencia"
- Walden: class="walden"
- Willow: class="willow"
- X-Pro-2: class="xpro2"

兼容性

CSS滤镜和混合模式的兼容性其实还是很不错的，除了IE浏览器不支持其他浏览器都可以放心使用。


43+ ✔	38+ ✔	Nope ✘	13 ✔	32+ ✔	8+ ✔

三、滤镜处理图片的合成与存储

虽然视觉上滤镜效果已经有了，但是如果用户希望保存图片到本地，或者直接合成后的图片生成，则还需要做额外的处理，因为此时右键保存的图片还是原始图片。

通常有两种实现方法：

一种是后端截图，还有一种是前端截图。

后端截图是自己搭建一个服务，把对应的HTML和css传过去，然后返回截图，支持PNG透明。

前端截图可以使用一些截图框架，如html2canvas，或者直接自己手动处理，使用SVG foreignObject元素。

具体实现可以参见这篇文章：“CSS滤镜和混合模式处理的图片如何上传下载？”。

demo页面链接地址：CSS滤镜图片前端合成demo

使用demo页面提供的cssRenderImage2PureImage(dom, callback)方法可以轻松实现想要的效果，同时支持retina屏幕下的效果合成。

四、CSSgram也可以用在视频上

CSSgram这种一个类名改变图像呈现效果的库不仅可以作用在图片元素上，对于HTML5 video视频同样受用。

<figure class="aden">
  <video src="../zxx.video"></video>
</figure>

例如，我们打开B站任意视频页面，打开控制台，粘贴并执行下面的JS代码：

(function(){var
c=["_1977","aden","brannan","brooklyn","clarendon","earlybird","gingham","hudson","inkwell","kelvin","lark","lofi","maven","mayfair","moon","nashville","perpetua","reyes","rise","slumber","stinson","toaster",
"valencia","walden","willow","xpro2"];document.head.insertAdjacentHTML("beforeend",'');var
b=document.createElement("select");b.style.padding="5px";b.innerHTML=c.map(function(d){return'"}).join("");var a=document.createElement("label");a.style.margin="0 5px 0 20px";a.innerHTML="后期效果：";toolbar_module.appendChild(a);toolbar_module.appendChild(b);b.addEventListener("change",function()
{document.querySelector(".bilibili-player-video").className="bilibili-player-video "+this.value})})();

这个时候，视频下方位置会出现一个选择“后期效果”的下拉框：

后期效果下拉框

例如我们选择aden等滤镜效果，可以看到如下所示的录屏效果：

//zxx: B站肯定会改版的，上面代码随时可能失效，大家领会其精神即可……

这就为我们视频做，后期提供了更多的思路，我们不需要在视频剪辑软件里面专门做这样的事情，只需要视频发布后一段简单的css代码就可以实现我们想要的后期效果，成本低，效果好，且非常灵活，值得尝试。

五、结束语

又是一年高考时，我考试的问题在于太过于放松，以至于影响专注度，这对于数学这种需要沉浸式思考的学科而言是极为不利的，我们学校就是考点，然后考数学的时候，学校做了件我认为很傻×的事情。

考数学（其他学科都没有）前，学校为了缓解考生的压力，用广播不停循环播放“阳光总在风雨后”这首歌。妈呀，我本来就一点压力都没有过于放松了，结果这一放，导致自己更放松，然后脑中这首歌一直在不断自动循环播放，进入考场的时候还在放，做题目的时候还在放，脑中全是这首歌，我就知道我高考完了，一道很靠前的大题居然一个字都没动，等一出考场，脑中的歌没了，我立马就知道那道题怎么解了，很简单的一道题目。

最终我的高考成绩要比平时平均水平要差一些，整个高三所有的考试无论大考小考模拟考，我从来都是全班第一名，但是就是最重要的高考是班级第二名，年级六七名的样子。高考这天学校放歌这件很傻×的行为影响了我数学的考试状态，我记得就考了110多分，比平时平均分数少了20多分。

高考不利的还不止这个，高一的时候考试是考8门的，政治，历史，地理都是独立科目，后来我们那一届高考改革3+2，2就是自己选择2门科目。这个改革对我来说是非常不利的，高一时候考8门，我期中考期末考全部都是全校第一，要比第二名分数总分高20多分。因为我的强项就是全部都很强，没有偏科，尤其政治，历史，地理这样的科目优势明显。但是3+2之后，那些偏科的同学就可以直接规避，我在分数上的竞争力就下来了。

但是人生毕竟是一个长跑，高考虽然重要，但并不代表以后你的成就和高度，最终你的社会上所取得的成绩还是靠你的综合实力的，因此虽然那些偏科的同学因为政策考了跟我一样的分数，但是回到社会这个大染缸里，最终出类拔萃的还是我，哈哈哈。