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

标签 javascript html css slider

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

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

更改 slider 值时,图像必须从彩色变为黑白,反之亦然。

它必须兼容所有浏览器。

还有其他方法可以实现吗?

提前致谢。

最佳答案

是的,您可以从 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 - 使用javascript将彩色图像转换为黑白图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24811695/

相关文章:

javascript - 如何在 Extjs 商店阅读器中读取这个 json 字符串?

javascript - 使用js动态更改css类

ajax - HTML5 历史 : Problems with back button after full page load

css - 如何使 Bootstrap 列的高度相同?

twitter-bootstrap - 网页在手机屏幕上显示白色右边距。如何去除这个白边?

javascript - 部分中的 Angular 路由定义而不是 app.js

javascript - 如何使用 Firestore 在快照上按值排序

html - Bootstrap 行流体显示 : table with vertical-align?

javascript - 如果不先使用 Chrome 开发工具检查元素,则无法在 Google Chrome 控制台中选择 DOM 元素

javascript - 在元素悬停时显示 div,以便 div 内的元素应该是可点击的