这是我用于将彩色图像转换为灰度图像的代码。
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 */
}
关于javascript - 使用javascript将彩色图像转换为黑白图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24811695/