使用javascript将彩色图像转换为黑白

这是我用于颜色到灰度图像转换的代码

        function grayScaleEffect() {
            var imageData = contextSrc.getImageData(0, 0, width, height);
            var data = imageData.data;

            var p1 = 0.99;
            var p2 = 0.99;
            var p3 = 0.99;
            var er = 0; // extra red
            var eg = 0; // extra green
            var eb = 0; // extra blue
            for (var i = 0, n = data.length; i < n; i += 4) {
                var grayscale = data[i] * p1 + data[i + 1] * p2 + data[i + 2] * p3;
                data[i] = grayscale + er; // red
                data[i + 1] = grayscale + eg; // green
                data[i + 2] = grayscale + eb; // blue
            }
            context.putImageData(imageData, 0, 0);
            base64 = canvas.toDataURL("image/png");
        }

函数灰度效果（）{
var imageData=contextSrc.getImageData（0，0，宽度，高度）；
var数据=imageData.data；
var p1=0.99；
var p2=0.99；
var p3=0.99；
var er=0；//额外红色
var eg=0；//额外的绿色
var eb=0；//额外蓝色
对于（变量i=0，n=data.length；i

更改滑块值时，图像必须从颜色更改为黑色和白色，反之亦然

它必须兼容所有浏览器

我还有别的方法可以做到这一点吗

---

提前感谢。

是的，您可以从css中添加此效果，如果您想删除它，请使用javascript将css类删除到图像中

.black_and_white { 
            filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><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\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
            filter: gray; /* IE6-9 */
            -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

。黑色和白色{
过滤器：url（“数据：图像/svg+xml；utf8，#灰度”）；/*Firefox 10+，Android上的Firefox*/
过滤器：灰色；/*IE6-9*/
-webkit过滤器：灰度（100%）；/*Chrome 19+、Safari 6+、Safari 6+iOS*/
}

---

我想我可以更改chrome和safari的值。如何在IE中实现？只有删除img的类。看看这个例子：如果你更喜欢原生javascript，看看这个例子：不在ie中工作。更详细的是，我不想一次点击就这么做。颜色应该随着滑块值的改变而改变。我使用过这个css过滤器，它来自IE，在IE中工作。如何为你的任务实现它是另一回事。