制作图像黑白Javascript

Question

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

像：

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

函数handleFiles（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包含colordful image base 64 string 我希望e.target.result有黑色和白色的基础64字符串

Answer 1

这是使用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编码灰度图像数据网址。

＆＃13;

＆＃13;

// 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();
});

＆＃13;

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

＆＃13;

<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">

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果要在客户端处理它，你应该将你的图像加载到html5 canvas元素并进行操作。

有些图书馆像this那样做 或者看看this tutorial

Answer 3

您可以使用4行代码轻松获得结果！ 只需使用画布的新混合模式，即可为您进行数学运算，并且比自己处理r，g，b字节更快。
另一个好处是你的图像不会出现任何CORS安全问题。

这是一个小提琴，它与base64 src完全相同：

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

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

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