javascript - 使图像黑白 Javascript

Question

我正在制作一个应用程序，它将用户上传的图像转换为黑白图像，然后返回 base64图片字符串

喜欢:

<input type="file" onchange="handleFiles(this.file)" />

函数处理文件(f){ var o=[];

for(var i =0;i<f.length;i++)
{
    var reader = new FileReader();
    reader.onload = (function(theFile) {
    return function(e) {
        gCtx.clearRect(0, 0, gCanvas.width, gCanvas.height);
        //i want e.target.result to have base64 of black and white image not colorful image.
        //My processing with e.target.result image
    };
    })(f[i]);
    reader.readAsDataURL(f[i]); 
}

e.target.result包含彩色图像 base 64 字符串我要e.target.result拥有黑白 base 64 字符串

Answer 1

只需 4 行代码和少量努力，您就可以得到结果!
只需使用 Canvas 的新混合模式，这将为您进行数学计算，并且比您自己处理 r、g、b 字节更快。
另一个好处是您的图像不会有任何 CORS 安全问题。

这是一个 fiddle ，它与 base64 src 的工作方式完全相同:

http://jsfiddle.net/gamealchemist/7woa7oyp/

想法是用白色填充 Canvas ，然后使用 luminosity 模式绘制图像，保持当前饱和度 (0) 和色调(不相关，因为白色饱和度为 0)< br/>==>> 你最终只有图像的亮度，没有饱和度 == 图像的黑白版本。

ctx.save();
ctx.fillStyle = '#FFF';
ctx.fillRect(0, 0, cv.width, cv.height);
ctx.globalCompositeOperation = 'luminosity';
ctx.drawImage(coloredImage, 0, 0);
ctx.restore();

(混合模式规范:http://dev.w3.org/fxtf/compositing-1/)