微信小程序实现黑白化

像在清明节，经常来看到有很多网站或者App还有小程序，界面显示黑白化，那么原理是怎么实现的呢，对于不同平台可能会有区别，但是原理都差不多，几行代码就可实现，原理都是给页面加上一层灰色滤镜。

效果.

1、网页实现方式

第一种：修改CSS文件
我们可以在网页的CSS文件中添加以下的CSS代码，来实现网页黑白色，也就是网站变灰

filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(100%);

第二种网页标签


filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: url("data:image/svg+xml;utf8,#grayscale"); filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(1);

或者


filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);

2、微信小程序实现方式

如果是使用微信小程序原生开发，直接在css 加上以下样式即可实现。

filter: grayscale(100%);

3、app实现方式

a.种方案（java）

Paint mPaint = new Paint();
ColorMatrix cm = new ColorMatrix();
cm.setSaturation(0);
mPaint.setColorFilter(new ColorMatrixColorFilter(cm));
getWindow().getDecorView().setLayerType(View.LAYER_TYPE_HARDWARE, mPaint);

b.kotlin

        val mPaint = Paint()val cm = ColorMatrix()cm.setSaturation(0F)mPaint.colorFilter = ColorMatrixColorFilter(cm)xxxid.setLayerType(View.LAYER_TYPE_SOFTWARE, mPaint)

微信小程序实现黑白化相关推荐

Uniapp 视频播放器运行到微信小程序后黑屏解决
之前,开发用uniapp开发h5时视频播放器是没问题的,但运行到小程序端以后就发现终端没报错播放器却黑屏了,通过不断翻阅资料后终于解决,原来在微信小程序端只支持三种格式的视频数据路径,如下: 网络路 ...
微信小程序万里目_4款万里挑一的微信小程序，每一个都是黑科技！
阅读本文前,请您先点击上面的"电子荟",再点击"关注",这样您就可以继续免费收到文章了.每天都有分享,完全是免费订阅,请放心关注. 4款万里挑一的微信小程序,每 ...
电脑版微信聊天记录和小程序视频播放黑屏，但有声音，qq和其浏览器视频播放正常。如何解决？
问题描述: 电脑版微信聊天记录和小程序视频播放黑屏,但有声音,而且截屏时会先显现出画面: qq和其浏览器视频播放正常. 原因:显卡驱动出错解决办法:更新显卡驱动或者卸载重新安装显卡驱动注意:我遇到 ...
7个黑科技十足的微信小程序，每一个都能让你念念不舍！
微信上最为出名的想必就最为小程序了!基本上与现有的软件也就相差毫几,有些人为了免下软件几乎都用上了,那为什么有那么多人都钟爱于小程序呢?其关键原因就是方便,只要用微信一个软件,就可以随意使用任何小程序 ...
微信小程序iOS视频播放开始黑屏问题
在微信小程序播放视频时遇到个奇怪的问题 iOS开始播放视频时会有几秒黑屏卡顿,然后才会流畅播放而安卓手机就不会有黑屏,点击播放直接就可以播放视频了后来发现我是加了一个 :custom-cache= ...
@所有人，官网下载的微信小程序开发工具安装后黑屏咋办？
@所有人,官网下载的微信小程序开发工具安装后黑屏咋办? 一直这样,重复安装也是这样欢迎使用Markdown编辑器你好! 这是你第一次使用 Markdown编辑器所展示的欢迎页.如果你想学习如何使 ...
微信小程序视频组件ios端出现视屏区域黑屏
微信小程序中自定义组件video在ios端会出现从展示页面切到另一个页面上再回到展示页面时会黑屏的情况. 解决思路:在app.js中获取手机类型并定义isApple的全局变量 -> 在vi ...
黑科技：轻松实现JS与微信小程序中的多线程
前言众所周知,js是单线程的去跑代码,如果使用一个较长时间的循环来执行代码,浏览器就会卡死,直到js执行完毕,用户体验极差:因此对于较长时间的代码块,最好使用多线程去执行,关于这一点网上说可以用De ...
微信小程序图片全屏预览组件，并解决svg真机显示黑屏问题
自己码了个微信小程序图片全屏预览组件,并解决了svg真机显示黑屏问题(即png等格式可以正常显示,但就svg无法显示). /*** 微信小程序图片预览组件* 1.支持预览svg.png.jpeg.jp ...

微信小程序实现黑白化

微信小程序实现黑白化相关推荐

最新文章

热门文章