Question

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

        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");
        }

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

它必须兼容所有浏览器。

还有其他方法可以达到这个目的吗？

提前致谢。

Answer 1

是的，您可以从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 */
}

DEMO

Change class with jquery

Change class with native javascript

彩色图像使用javascript进行黑白转换

1 个答案: