纯CSS图片滤镜项目CSSgram简介

这篇文章发布于 2019年06月7日,星期五,17:51,归类于 CSS相关。 阅读 20156 次, 今日 1 次 10 条评论

 

CSSGram项目封面图

一、CSS滤镜库效果预览

以下效果均是使用纯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>

    完整的类名列表如下:

    • 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浏览器不支持其他浏览器都可以放心使用。

Chrome logo Firefox logo Internet Explorer logo Edge logo Opera logo Safari logo
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之后,那些偏科的同学就可以直接规避,我在分数上的竞争力就下来了。

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

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

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

(本篇完)

分享到:


发表评论(目前10 条评论)

  1. 十斤老玉米说道:

    我高考数学才考75/150文科……张大大把你数学分给我,咱俩能当校友……

  2. 在下佩服说道:

    好像男主,我的强项就是全部都很强,别说了,你就是男主

  3. 神秘人士说道:

    说不定那些不如你的同学会混的比你好,社会不是学校,不会让一家独大的

  4. dl凉说道:

    nice

  5. mark说道:

    mark

  6. jo粉说道:

    鑫哥也喜欢jojo, 厉害了

  7. bilibili说道:

    以后可以手动给jojo加上奇妙变色

  8. monkey说道:

    敬佩你的执着,专注

  9. 逍遥说道:

    其实,旭哥做哪一行都不会太差。