微信小程序实现黑白化

74 阅读 0 评论 49 点赞

我是靠谱客的博主谨慎鸡翅，这篇文章主要介绍微信小程序实现黑白化，现在分享给大家，希望可以做个参考。

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

效果.

1、网页实现方式

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

复制代码

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

第二种网页标签

复制代码

1
2
3

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);

或者

复制代码

1
2
3
4

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

2、微信小程序实现方式

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

filter: grayscale(100%);

3、app实现方式

a.种方案（java）

复制代码

1
2
3
4
5
6
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

复制代码

1
2
3
4
5
6
        val mPaint = Paint()
        val cm = ColorMatrix()
        cm.setSaturation(0F)
        mPaint.colorFilter = ColorMatrixColorFilter(cm)
        xxxid.setLayerType(View.LAYER_TYPE_SOFTWARE, mPaint)