uni-app 不支持 css -webkit-mask 且无法直接使用 canvas getimagedata，因 webview 兼容性差、小程序不支持及封装限制；可行方案为服务端预生成带羽化边缘的 png 或小程序端用原生 canvas 动态绘制。
uni-app 本身不支持 CSS -webkit-mask，也无法直接使用 Canvas 的 getImageData（因封装限制和跨域/安全策略），所以「纯前端羽化图片边缘」在 uni-app 中不能靠浏览器原生方案实现。
为什么 uni-app 里用不了 CSS mask
uni-app 的 WebView 渲染层（尤其是 iOS WKWebView 和 Android X5 内核）对 -webkit-mask 兼容性极差，mask-image: radial-gradient() 或 mask-border 多数情况下被忽略；H5 端开启「启用同层渲染」后更可能失效；小程序端则完全不支持该 CSS 属性。
- 实测常见 fallback 行为：整个元素变透明、mask 区域全黑、或直接无效果
- 即使加了
-webkit-前缀，iOS 15+ 仍大概率不生效 - uni-app 的
view/image组件不继承标准 DOM 的 mask 行为，无法通过 class 注入
可行替代方案：服务端预处理 + 本地缓存
最稳定的方式是把羽化逻辑前置到服务端——上传原始图后，由后端生成带羽化边缘的 PNG（透明通道渐变），前端只负责加载。
- 推荐用 ImageMagick 或 Sharp（Node.js）做：
convert input.png -alpha on -virtual-pixel transparent -distort Spherical 0.2 -blur 0x8 output.png - 羽化半径建议控制在 4–12px，太大在小图上会糊掉细节
- 返回的 PNG 必须带 alpha 通道，且不要压缩过度（避免 PNG8 导致半透明色阶丢失）
- uni-app 中用
<image></image>加载时，确保mode="aspectFill"或"widthFix"，避免拉伸破坏羽化过渡
小程序端可尝试 canvas 动态绘制（仅微信/支付宝）
微信小程序的 canvas 支持 createCanvasContext 和 drawImage，能手动实现羽化，但 uni-app 的 uni.createCanvasContext 封装较浅，需降级到原生 API。
- 先用
uni.downloadFile把图存为本地临时路径，再用wx.createCanvasContext绘制 - 关键步骤：用
ctx.drawImage绘原始图 →ctx.getImageData获取像素 → 对边缘像素按距离衰减 alpha（例如距矩形边 ctx.putImageData - 注意：必须设置 canvas
willReadFrequently=true，否则getImageData报错 - 性能敏感：200×200 以内图片可接受，超过 400×400 帧率明显下降
真正麻烦的不是怎么写代码，而是「羽化」在不同平台要走三条完全不同的技术路径：H5 端基本放弃、小程序端要绕过 uni 封装、App 端得靠原生插件。如果项目里羽化只是点缀效果，优先选服务端出图——省掉所有兼容性博弈。
