Android 上的 CSS3 灰度滤镜答案

【问题标题】：CSS3 Grayscale filter on AndroidAndroid 上的 CSS3 灰度滤镜
【发布时间】：2013-12-31 07:14:19
【问题描述】：

我无法在 android 默认浏览器上为 img 应用灰度。

这是我的 CSS：

#solutions .grayscale {
    filter: url("data:image/svg+xml;utf8,&lt;svg xmlns=\'http://www.w3.org/2000/svg\'&gt;&lt;filter id=\'grayscale\'&gt;&lt;feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/&gt;&lt;/filter&gt;&lt;/svg&gt;#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
}

Android 是 2.3.5

关于将灰度应用于适用于 Android 手机的 img 的方法有什么想法吗？

【问题讨论】：

标签： android html css cross-browser

【解决方案1】：

AOSP 浏览器和任何 4.3 以上的 WebView 都不能使用 CSS 滤镜效果（请参阅here）。您也不能使用 SVG 过滤器，因为它也不支持。

您可以做的是使用 Javascript 图像处理库，例如 CamanJS

【讨论】：