用CSS来找出两张图的差异

本文源自对Image diffing using CSS的理解。

现在有以下两张图片,找出它们之间的差异。

图1

图2

方法是,将两张图片重叠,高亮出不同的部分。用CSS 主要有两种方法。

方法一:在位于上面的图上设置如下样式

-webkit-filter: invert(100%) opacity(50%);
        filter: invert(100%) opacity(50%);

作用后的效果如下图

用filter的效果

其中,灰色的部分为相同的部分,并且灰色的部分的颜色值为rgb(127.5, 127.5, 127.5)

原理如下。 假设:图1上某点的颜色值为rgb(cr1, cg1, cb1),图2上相同位置的点的颜色值为rgb(cr2, cg2, cb2),图1为在上面的图片。

当图1作用filter: invert(100%)时,该点的颜色值为 rgb(255 - cr1 + cr2, 255 - cg1 + cg2, 255 - cb1 + cb2)

当作用opacity(50%)时,该点的颜色值为rgb((255 - cr1 + cr2)/2, (255 - cg1 + cg2)/2, (255 - cb1 + cb2)/2)

由此可知,如果图1上某点的颜色和对应的图2上某点的颜色值一样的话,该点的颜色值为rgb(255/2, 255/2, 255/2),即 rgb(127.5, 127.5, 127.5)

方法2:在位于上面的图上设置如下样式

        mix-blend-mode: difference;

作用后的效果如下图

用mix-blend-mode.png的效果

其中,黑色的部分为相同的部分。

原理可见这里的描述

应用

有了这个技巧,我们在做页面时,方便的找出做的页面与设计稿不一样的地方。毕竟,人眼并不擅长找两个图片中的细微的不同

开个脑洞,现在,我们需要某个页面是否在两个不同浏览器上的UI 像素级完全的一致。 那么我们可以这样实现

  1. 用无头浏览器分别在不同的浏览器的UI进行截图
  2. 创建一个页面,该页面放的是,两张重叠的截图,并设置filter: invert(100%) opacity(50%);。然后再进行截图。
  3. 读取截图,若截图的每个像素点颜色均为rgb(127.5, 127.5, 127.5),则说明该页面在两个浏览器上UI像素级一致。

PhantomCSS可以做类似的事。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏陈泽钦的专栏

页面性能优化的利器 — Timeline

网页中的重绘过程是影响整体性能下降的关键点之一,因而网站开发者应该更多地去避免在站点中进行不必要以及不适时的重绘步骤,本文主要讲述如何借助Inspector中的...

2.1K1
来自专栏企鹅号快讯

漂亮loading加载动画,这些方法可知道?

这些好看的loading效果,你还只会用第三方库吗?CSS3教你实现前言 loading效果在实际开发中是很常见的,尤其是在Ajax请求的时候,可以给用户一个很...

2846
来自专栏前端小叙

CSS3与动画有关的属性transition、animation、transform对比

最近应公司需求,需要用css3做动画,终于把以前一直傻傻分不清楚的三个属性理解了。 索性在这里进行一个简单的对比,加深自己的记忆。 浏览器兼容性 CSS3 tr...

3136
来自专栏娱乐心理测试

小程序上传多张图片

以前写过小程序网络和本地图片到相册的方法:https://www.jianshu.com/p/5479041607fa,写过上传一张或多张图片到阿里云OSSht...

1.2K5
来自专栏一“技”之长

AppleWatch开发入门二——界面布局 原

        在iphone开发中,最基本的布局方式是通过frame,将控件的位置和大小固定在屏幕上,后来,由于手机屏幕的尺寸有了略微变化,有了autores...

952
来自专栏大数据钻研

认识html元素

前端现在越来越火,可以用去年热门的词语来形容——“风口上的猪”。希望这个系列的文集能够给“毫无任何基础,但是想转到前端的人”一点帮助。 认识一个html文档的基...

2774
来自专栏deepcc

jquery nicescroll 配置参数

3858
来自专栏前端布道

不同场景下使用CSS隐藏元素

使用 CSS 让元素不可见的方法很多,剪裁、定位到屏幕外、明度变化等都是可以的。虽然它们都是肉眼不可见,但背后却在多个维度上都有差别。

1162
来自专栏前端知识分享

第124天:移动web端-Bootstrap轮播图插件使用

> 对于Bootstrap的JS插件,我们只需要将文档实例中的代码粘到我们自己的代码中 > 然后作出相应的样式调整

2514
来自专栏偏前端工程师的驿站

JS魔法堂:通过marquee标签实现信息滚动效果

一、前言                                      有限的空间展现无限的内容,这是滚动最常用到的地方。根据信息滚动效果我们可以有...

2307

扫码关注云+社区