uni-app 中 filter: grayscale() 在微信小程序无效，因平台禁用 CSS 滤镜；H5 和高版本 App 可用但需兼容写法；跨平台稳定方案是服务端生成灰度图或 Canvas 动态处理。
uni-app 中用 filter: grayscale() 为什么没效果
多数情况是 CSS 滤镜在某些小程序平台（尤其是微信小程序）被禁用或降级处理，filter 属于 Web 标准但非所有小程序渲染层支持。H5 端正常，App 端需确认 WebView 内核版本，微信小程序则完全不支持 filter（包括 grayscale()、blur() 等），运行时会被静默忽略。
验证方式：在微信开发者工具中打开「调试器 → Elements」，选中图片元素，看 computed styles 里 filter 是否被划掉或未生效。
- 微信小程序：必须换方案，CSS 滤镜无效
- H5 端：可用，但注意旧版 Android WebView 可能不支持
grayscale(1)，建议回退到grayscale(100%) - App 端（v3 编译）：依赖系统 WebView，iOS 一般 OK，Android 需 ≥ Android 4.4+，低版本可能渲染异常
微信小程序里实现灰度图的替代方案
不能靠 CSS，得用 Canvas 绘制或后端返回灰度图。前端 Canvas 方案更可控，适合动态处理本地图片或临时灰度需求。
核心思路：用 uni.createCanvasContext 获取图像数据 → 遍历像素 → 按灰度公式 0.299*R + 0.587*G + 0.114*B 计算灰度值 → 写回 canvas → 导出为临时路径。
立即学习“前端免费学习笔记（深入）”；
- 必须先用
uni.getImageInfo获取图片原始尺寸和 base64（或本地路径），再传给 canvas - canvas 宽高需与原图一致，否则拉伸失真；注意宽高比和 DPR，真机上建议乘
uni.getSystemInfoSync().pixelRatio - 微信小程序 canvas 绘图是异步的，
draw后需等setTimeout或监听onReady才能canvasToTempFilePath - 性能敏感：大图（如 >1000px）遍历像素会卡顿，建议压缩后再处理
grayscale() 在 H5 和 App 端的兼容写法
即使支持，也要防兼容性断层。不要只写 filter: grayscale(1)，应补全前缀并设 fallback 值。
img.gray {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
/* 兜底：对不支持 filter 的老浏览器显示浅灰边框示意 */
border: 1px solid #ccc;
}注意：grayscale(1) 和 grayscale(100%) 等价，但部分 Android 4.x WebView 只认百分比写法；grayscale(0.5) 表示 50% 灰度强度，不是“半透明”。
- 避免在
image组件上直接写内联 style，uni-app 的<image></image>是原生组件，H5 下转为<img alt="uni-app实现图片的灰度化处理 uni-app使用CSS滤镜实现" >才支持 filter，App 和小程序下仍受限 - 推荐用
<view></view>包裹，背景图方式应用滤镜（background-image+filter），兼容性略好 - Vue 动态绑定时，用
:style="{ filter: isGray ? 'grayscale(100%)' : 'none' }"，别漏掉none重置
真正跨平台稳定的灰度方案是服务端生成
如果灰度是固定需求（比如头像统一灰度、禁用状态图标），最稳的方式是让后端加参数返回灰度图，例如：https://api.example.com/img/abc.jpg?grayscale=1。CDN 也可配置实时图像处理（如阿里云 OSS 图片样式、腾讯云 CI）。
这样前端完全不用操心平台差异、性能、内存占用，也不用处理 canvas 异步时机、base64 大小限制（微信小程序单次 canvasToTempFile 不超过 10MB）。
- 尤其要注意：canvas 处理后的图片若再上传，可能因压缩二次失真
- 用户相册选图后实时灰度？只能走前端 canvas，但务必加 loading 和失败降级（比如显示原图 + 文字提示“暂不支持灰度”）
- 灰度只是视觉反馈，语义上该配
aria-disabled或disabled属性，不能只靠颜色区分
