uni-app的canvas不支持getcontext('2d')，需用uni.createcanvascontext异步api绘图，无像素操作能力；滤镜应优先走服务端处理，前端仅负责上传与渲染。
uni-app里canvas不能直接用getContext？
uni-app的canvas组件和原生Web Canvas不是一回事——它不支持getContext('2d')，调用会报错getContext is not a function。这是因为uni-app底层把canvas封装成了uni.createCanvasContext这种异步API，且只暴露绘图指令，不提供像素级操作能力。
这意味着你没法像在H5里那样：ctx.getImageData() → 修改像素 → ctx.putImageData()。想做滤镜，得换路子。
- 真机调试时，
uni.createCanvasContext返回的上下文只能执行drawImage、fillRect等绘图命令，没有getImageData - H5平台虽可用Web Canvas，但App和小程序端行为不一致，混写容易出兼容问题
- 如果硬要在多端跑滤镜，必须统一走「服务端处理」或「前端WebGL/Worker解码+离屏canvas」，但后者复杂度高、内存吃紧
用uni.canvasToTempFilePath配合后端做简单滤镜
最稳妥的轻量方案：前端只负责上传图片，由后端返回带滤镜效果的URL。uni-app本身不处理像素，但能高效发起请求并渲染结果。
典型流程是：uni.chooseImage → 选图 → uni.uploadFile传base64或临时路径 → 后端用OpenCV/PIL加滤镜 → 返回新图片URL → uni.downloadFile或直接<image></image>显示。
- 后端接口可接收
filter=sepia、filter=grayscale等参数，控制滤镜类型 - 避免前端解析图片二进制，省去
ArrayBuffer转换、decode等易出错步骤 - 注意iOS真机上传时
tempFilePath可能被清理，建议上传前先uni.getFileInfo校验
小程序平台（微信/支付宝）可用canvas的toDataURL做有限滤镜
微信小程序基础库2.18.0+、支付宝小程序支持canvas.toDataURL（需配置type: 'image/jpeg'），配合uni.getImageInfo拿到原始像素数据后，在Worker里用JS做简单计算——但仅限小程序，App和H5不可用。
例如灰度化：遍历每个像素的r,g,b，按0.299*r + 0.587*g + 0.114*b算灰度值，再填回Uint8ClampedArray。这需要把图片先转成ArrayBuffer，再用createImageBitmap或OffscreenCanvas（仅部分平台支持）。
- 微信开发者工具里可用，但真机性能差，1MB图片处理常卡顿甚至内存溢出
- 必须用
Worker隔离主线程，否则UI直接冻结 - 不能依赖
canvas.getContext('2d').getImageData，要走getImageInfo+createImageBitmap+OffscreenCanvas链路，代码冗长
别踩坑：uni.canvasToTempFilePath的时机和尺寸陷阱
这个API必须在canvas内容绘制完成后的下一个tick调用，否则生成空白图。而且它默认按设备像素比缩放，导致不同手机导出尺寸不一致。
- 务必在
context.draw(true, () => { uni.canvasToTempFilePath(...) })回调里触发，true表示清空画布缓存 - 显式传入
width和height参数，比如{ width: 750, height: 750, canvasId: 'myCanvas' }，避免iOS下自动放大两倍 - 安卓某些厂商（如华为）对
fileType敏感，指定fileType: 'png'比'jpg'更稳定 - 导出路径是临时文件，不能直接存为持久路径，要用
uni.saveFile或立即上传
