我正在制作一款应用,可将用户上传的图片转换为黑白图像,然后返回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字符串
答案 0 :(得分: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编码灰度图像数据网址。
// 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;
答案 1 :(得分:0)
如果要在客户端处理它,你应该将你的图像加载到html5 canvas元素并进行操作。
有些图书馆像this那样做 或者看看this tutorial
答案 2 :(得分:0)
您可以使用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();