小程序中自动去除图片灰色背景如何实现

像下图这样是如何实现的？微信小程序用户上传图片后，可以像下图这样编辑图片。请附上详细解决方法或代码，谢谢！

img

用rgb的话，把rgb都设置为(r + g + b) / 3

解决方法

在CSS中，可以利用滤镜filter属性，通过设置filter属性为brightness(%)和contrast(%)来让图片变暗或者变亮。

filter: brightness(50%);
/* 设置图片的亮度，使其看起来更亮或更暗。如果值是0%，图像会全黑；值是100%，则图像无变化；
值是100%以上，则图像更亮*/

参考：


CSS 随意更改img或者background的图片颜色_有玉微凉，是为樱琅的博客-CSDN博客_css修改img图片颜色 随意更改众所周知，作为icon或者iconfont的图标，如果需要改变颜色，直接在hover里面写入color，换个颜色就行。但是img的这种标签或者作为一个容器的background-image，他的图片颜色如何更改呢这里是示例代码 <img class="img" :src="XXXX.svg`" />.img{ width: 16px; height: 16px; transform: translateY(-60px); filter: drop-sha https://blog.csdn.net/Sakura1998gis/article/details/115326162

如有问题及时沟通

灰度图和调整对比度
Css

img.desaturate { -webkit-filter: grayscale(100%); filter: grayscale(100%); -webkit-filter:contrast(2);filter:contrast(2);}

图片

<img src="1.png" alt="..." style="width: 512px; height: 512px;" class="desaturate">

css3

 .grayscale{
          -webkit-filter:grayscale(1);
          -webkit-filter:contrast(2);
      }

图片

<img src="1.png" alt="..." style="width: 512px; height: 512px;" class="grayscale">