用JS写了一个QQ-AB图合成功能

首先解释下什么是QQ-AB图,AB图指的是一张图片有A , B 两面,小图的时候我们看到的是A面,当我们点开查看大图的时候看到的是B面。这样说可能大家还是不太理解,直接看下面的演示动图吧

图片

怎么样,看完演示动图是不是就完全理解了,看到的小图和点开的大图呈现的内容是不一样的,这是什么原理呢?原因是小图的时候扣扣聊天背景是灰白色的,而点开查看大图时,扣扣背景是黑色的,图片通过与不同背景颜色(白色 / 黑色)的叠加,其所展现的内容也就不一样。

实现这个功能,我们需要两张图片,一张是小图时候看到的图片,一张是点开放大后看到的图片。然后将这两张图片分别做去色处理,让其变为黑白图片。去色处理之后,我们再通过 canvas 画布将两张图片进行合成。

图片

界面布局就是上图看到的样子,之所以想写一个这样的功能,是因为之前经常在扣扣群里看到别人发这种AB图,明明是张普通图,点开一看却内有乾坤,Hia Hia Hia ~~ 觉得蛮有意思的,然后就想着自己写一个,想合成什么图就合成什么图…

图片

完整的代码已上传至 Github (链接:https://github.com/imxiaoer/QQ-ABPics),或者关注公众号回复【AB图】进行下载。

因为是原生 JS 开发,所以代码很简单,拿到代码后直接双击打开 index.html 即可,不涉及到打包配置那些东西,就是个简单的页面。如有疑问请留言 :)

发表评论

登录后才能评论
网站客服
网站客服
申请收录 侵权处理
分享本页
返回顶部