点击上方 “AI算法与图像处理 ”，选择加"星标"或“置顶”
重磅干货，第一时间送达
4月8日零时起，武汉解除了离汉离鄂通道管控措施，有序恢复对外交通。“封城”76天后，武汉与外界的通道重新开启。
昨晚，人民日报公众号推送了一篇文章，通过点击武汉的各个景点图片，可以将图片“点亮”，也就是通过点击将黑白色调的图还原为色彩绚丽的图，文章链接：今天，发条微信一起点亮武汉
点击前后内容如下：
其实，我们只要有电脑就能实现啦，也不用装什么软件和编程环境。
首先，你可以准备几张需要的彩色图片，然后将他们放在一个文件夹中，例如我对应人民日报的武汉景点找了一些高清大图，按顺序命名好，如下图所示，放在了名为img的文件夹中：
之后新建一个html文件，内部写入如下代码：
（以下代码块左右滑动查看）
<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title></title> <style type='text/css'> img{ width: 800px; height: auto; display: block; margin: 0 auto; -webkit-filter: grayscale(1); transition: all 2s; } </style> </head> <body> <img src="img/wuhan_1.jpg" id="btn1" onclick="threeFn(id)"> <img src="img/wuhan_2.jpg" id="btn2" onclick="threeFn(id)"> <img src="img/wuhan_3.jpg" id="btn3" onclick="threeFn(id)"> <img src="img/wuhan_4.jpg" id="btn4" onclick="threeFn(id)"> <img src="img/wuhan_5.jpg" id="btn5" onclick="threeFn(id)"> <img src="img/wuhan_6.jpg" id="btn6" onclick="threeFn(id)"> <img src="img/wuhan_7.jpg" id="btn7" onclick="threeFn(id)"> <img src="img/wuhan_8.jpg" id="btn8" onclick="threeFn(id)"> </body> <script type="text/javascript"> function threeFn(x){ var btn = document.getElementById(x); btn.style.WebkitFilter = "none" } </script> </html> 例如我将该文件保存为“点亮.html”，将该文件与img文件夹放在同一路径下。
然后以浏览器方式打开“点亮.html” 即可看到如下页面：
当你鼠标点击图片时，图片会从黑白慢慢渐变转为彩色，如下图所示：
让我们通过视频来看看效果吧：
代码中首先通过-webkit-filter: grayscale(1);将所有图片样式设置为黑白。使用JavaScript的鼠标点击事件，当鼠标点击图片时，将设置黑白的样式去除，同时指定不是立刻去除，而是通过 transition: all 2s设定转变事件为2秒，所以当我们鼠标点击图片时，会发生颜色的渐变。
原理就是这么简单~快来一起尝试一下吧！
武汉加油！中国加油！
关注公众号，回复“加油”
加群交流
仿真飞机模型空客A320吉祥航空客机礼品儿童玩具摆件带轮带灯航模
大号带轮灯光飞机模型吉祥航空a320客机仿真航模空客收藏摆件纪念
47CM带轮带声控灯空客320飞机模型东航南航春秋吉祥航空客机航模
合成树脂飞机模型金属摆件20cm飞机模型空客A320吉祥航空37cm模型
声光版飞机模型空客A320吉祥航空春秋NEO原型ARJ客机拼装摆件带轮
30CM带轮子带灯仿真飞机模型吉祥航空A320民航客机模型摆件礼品
发表于 2020-4-8 17:57:30
欢迎小伙伴加群交流，目前已有交流群的方向包括：AI学习交流群，目标检测，秋招互助，资料下载等等；加群可扫描并回复感兴趣方向即可（注明：地区+学校/企业+研究方向+昵称）
