製作黑白圖像的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圖像基地64串 我想e.target.result有黑色和白色的底座64串

Answer 1

如果你要處理它在客戶端，你應該載入圖片轉換爲html5 canvas元素並對其進行操作。

有一些圖書館做這樣this 或者看看this tutorial

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; 

下面是示例代碼和Demo。在這個例子中，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

你可以有你的結果中包含4行代碼和小的努力！
只需使用畫布的新混合模式，即可爲您做數學運算，並且比自己處理r，g，b字節更快。
另一個好處是你不會對你的圖像有任何CORS安全問題。

這裏有一個小提琴，它的工作相當有一個base64 SRC相同：

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

的想法是，以填補在白色畫布上，然後使用luminosity模式時，圖像將被繪製保管當前飽和度（0）和色調（因爲白色的飽和度爲0，所以不相關）
== >>最終只有圖像的亮度，沒有飽和== B & 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/）