纯CSS图片滤镜项目CSSgram简介

byzhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8692

本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。

一、CSS滤镜库效果预览

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

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

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

二、CSSgram项目简介

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

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

使用方法

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

1. 引入 css库资源 ：

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

2. 写好HTML结构， <img> 元素外部弄一层父级标签，例如使用语义更好的 <figure> ：

   <figure>
     <img src="../img.png">
   </figure>

3. 在 <figure>

   元素上添加合适的滤镜相关的类名，例如：

   <figure class="aden">
     <img src="../img.png">
   </figure>

   完整的类名列表如下：

   class="_1977"
   class="aden"
   class="amaro"
   class="brannan"
   class="brooklyn"
   class="clarendon"
   class="gingham"
   class="hudson"
   class="inkwell"
   class="kelvin"
   class="lark"
   class="lofi"
   class="mayfair"
   class="moon"
   class="nashville"
   class="perpetua"
   class="reyes"
   class="rise"
   class="slumber"
   class="stinson"
   class="toaster"
   class="valencia"
   class="walden"
   class="willow"
   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' '+d+"

"}).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之后，那些偏科的同学就可以直接规避，我在分数上的竞争力就下来了。

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

不好意思，又唠叨了，发了一点和文章内容无关的小感慨。

就说这么多吧，感谢您的阅读，祝您端午节快乐！

本文为原创文章，欢迎分享，勿全文转载，如果内容你实在喜欢，可以加入收藏夹，永不过期，而且还会及时更新知识点以及修正错误，阅读体验也更好。

本文地址： https://www.zhangxinxu.com/wordpress/?p=8692

（本篇完）