HTML5手机本地图片上传与滤镜处理效果

手机上搞个图像滤镜效果，其实不难。HTML5 的 File API加上Canvas，组合起来就能搞定本地上传、预览、一整套流程。用让用户选图，再用FileReader读数据，贴到 Canvas 上，接下来你就能随便折腾像素点了，滤镜、调色、灰度都好整。像这种灰度滤镜：直接把 RGB 值按比例算成一个灰度值，覆盖回去就行，代码也挺简单。

你甚至可以玩点复杂的，比如模糊、色彩平衡，只要你愿意动手改imageData里的数据就行。别忘了用canvas.toDataURL()把结果导出来，能显示也能上传。

哦对了，浏览器兼容性也要注意点，大多数手机浏览器支持没问题，但太老的就别指望了。如果你要兼容广泛，得加点降级方案，比如用 Flash（虽然现在也快没人用了）。

如果你想偷个懒，也可以看看一些现成的插件，比如uploadifyH5这种，能省不少事。

，想在手机上搞图片上传和滤镜预览，这套思路挺成熟的，代码量也控制得住。你可以从这几个资源入手试试手感：HTML5 手机移动端图片上传滤镜特效、uploadifyH5 上传插件都还不错。