基本上,当点击一个按钮时,它会告诉移动设备转到相机。一旦相机拍照,它会给我图像数据(它被称为数据URL吗?)。这是我处理它的代码:
var imagesrc = "data:image/jpeg;base64," + imageData;
var myimage = new Image(500, 500);
myimage.src = imagesrc; <---- to populate the object with the colored image
myimage.src = grayscale(myimage); <---- here I set it to the grayscale image
我想调用一个名为grayscale()
的方法,并使其返回已变为灰度的图像。我试过这个:
function grayscale(image){
var canvasContext = canvas.getContext('2d');
var imgW = image.width;
var imgH = image.height;
canvas.width = imgW;
canvas.height = imgH;
canvasContext.drawImage(image, 0, 0);
var imgPixels = canvasContext.getImageData(0, 0, imgW, imgH);
for(>var y = 0; y < imgPixels.height; y++){
for(>var x = 0; x < imgPixels.width; x++){
var i = (y * 4) * imgPixels.width + x * 4;
var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
imgPixels.data[i] = avg;
imgPixels.data[i + 1] = avg;
imgPixels.data[i + 2] = avg;
}
}
canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
dataurl = canvas.toDataURL();
var newimg = "data:image/jpeg;base64," + dataurl;
return newimg;
}
但由于某种原因,它不起作用。它只是不显示灰度图像。我在线获得了for循环代码并进行了调整。
答案 0 :(得分:3)
这有几个原因无效。开始检查控制台输出以跟踪错误将是一件好事。 Firefox&#34; F12&#34;例如,会告诉您for(>var ...)
是个问题。 ;)
您是否在与我们分享的代码之外的某处声明了canvas
? dataurl
是否已宣布?不需要toDataUrl
的前缀......
这是我在你的for循环中输入的一个基本的html文件,它确实转向&#34; test.png&#34;灰色也许你想将它保存在某个地方,将png放入同一个文件夹,然后开始逐步编辑,而不是复制代码。如果您想要挑战,请尝试通过http://jslint.com/! (我猜你必须用while循环替换for循环)。 :)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas/ImgData Test</title>
</head>
<body>
<canvas id="output"></canvas>
<script>
var cnv = document.getElementById('output');
var cnx = cnv.getContext('2d');
function grey(input) {
cnx.drawImage(myimage, 0 , 0);
var width = input.width;
var height = input.height;
var imgPixels = cnx.getImageData(0, 0, width, height);
for(var y = 0; y < height; y++){
for(var x = 0; x < width; x++){
var i = (y * 4) * width + x * 4;
var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
imgPixels.data[i] = avg;
imgPixels.data[i + 1] = avg;
imgPixels.data[i + 2] = avg;
}
}
cnx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
}
var myimage = new Image();
myimage.onload = function() {
grey(myimage);
}
myimage.src = "test.png";
</script>
</body>
</html>
答案 1 :(得分:1)
您不应该取这三种颜色分量的平均值,因为它们的亮度差异很大(100%的绿色比100%的蓝色要明亮得多)。电视系统(PAL和NTSC)将灰度图像的亮度定义为29.9%红色+ 58.7%绿色+ 11.4%蓝色。
答案 2 :(得分:0)
我知道您正在寻找将dataURI转换为灰度,但是,如果要将视频反馈本身转换为灰度或将任何图像转换为灰度,可以使用此代码。
.gray {
filter: grayscale();
}
<!--hey use this style to show in gray scale. can even use to convert image to grayscale-->
<video id="camera-stream" class="gray" ></video>