一、CSS滤镜库效果预览
以下效果均是使用纯CSS实现的。
您也可以选择本机图片感受下不同的滤镜处理效果:
二、CSSgram项目简介
CSSgram项目是借助CSS filter滤镜和mix-blend-mode混合模式实现Instagram这个产品中的26种滤镜效果。
使用方法
滤镜效果的实现非常简单,如下3步:
引入css库资源:
写好HTML结构,元素外部弄一层父级标签,例如使用语义更好的
在
完整的类名列表如下:
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元素。
使用demo页面提供的cssRenderImage2PureImage(dom, callback)方法可以轻松实现想要的效果,同时支持retina屏幕下的效果合成。
四、CSSgram也可以用在视频上
CSSgram这种一个类名改变图像呈现效果的库不仅可以作用在图片元素上,对于HTML5 video视频同样受用。
例如,我们打开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
(本篇完)