使图像黑白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 有黑白基 64 字符串

Answer 1

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

这是一个小提琴，它与 base64 src 的工作原理完全相同：

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

这个想法是用白色填充画布，然后使用luminosity 模式，将绘制图像保持当前饱和度（0）和色调（不相关，因为白色的饱和度为 0）
==>> 你最终只得到图像的亮度，没有饱和度 == 图像的黑白版本。

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/）

Answer 2

这是一种使用context.getImageData 获取彩色像素数组并将每个像素转换为灰度的方法，方法是使每个像素的红色、绿色和蓝色值等于该像素的平均值。

// make the r,g,b components of this pixel == the average of r,g,b   
var average=(red+green+blue)/3;
red=average;
green=average;
blue=average;

这是示例代码和演示。在此示例中，canvas.toDataURL() 获取您需要的 base64 编码灰度图像数据 url。

// load an image file from the user
function handleFiles(files) {

  for (var i = 0; i < files.length; i++) {
    var file = files[i];
    var imageType = /image.*/;

    if (!file.type.match(imageType)) {
      continue;
    }

    var img = document.createElement("img");
    img.classList.add("obj");
    img.file = file;

    var reader=new FileReader();
    reader.onload=(function(aImg){
      return function(e) {
        aImg.onload=function(){
          // draw color image on new canvas
          var canvas=document.createElement("canvas");
          var ctx=canvas.getContext("2d");
          canvas.width=img.width;
          canvas.height=aImg.height;
          ctx.drawImage(aImg,0,0);

          // convert color to grayscale
          var imageData=ctx.getImageData(0,0,canvas.width,canvas.height);
          var data=imageData.data;
          for(var i=0;i<data.length;i+=4){
            // make the r,g,b components of this pixel == the average of r,g,b
            data[i+0]=data[i+1]=data[i+2]=(data[i]+data[i+1]+data[i+2])/3;
          }
          ctx.putImageData(imageData,0,0);

          // create grayscale img from canvas
          var grayImg=new Image();
          grayImg.onload=function(){
            document.body.appendChild(aImg);
            document.body.appendChild(grayImg);
          }
          grayImg.src=canvas.toDataURL();

        }
        // e.target.result is a dataURL for the image
        aImg.src = e.target.result;
      }; 
    })(img);
    reader.readAsDataURL(file);

  } // end for

} // end handleFiles


//
$("#fileElem").change(function(e){
  handleFiles(this.files);
});
//
$("#startInput").click(function(e){
  document.getElementById("fileElem").click();
});

body{ background-color: ivory; padding:10px; }
img{border:1px solid red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id="startInput">Click to select an image file</button><br>   
<input type="file" id="fileElem" multiple accept="image/*" style="display:none">

Answer 3

如果您要在客户端处理它，您应该将图像加载到 html5 画布元素中并对其进行操作。

有一些图书馆像this 或者看看this tutorial