JS - 如何将Image对象变成灰度并显示
JS - How to turn Image object into grayscale and display it
基本上,单击按钮时,它会告诉移动设备转到相机。相机一拍下来,就会给我图像数据(这叫数据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()
的方法并使其 return 变成灰度图像。我试过这个:
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 循环代码并对其进行了调整。
这不起作用的原因有多种。开始检查控制台输出以跟踪错误对您来说是一件好事。例如,Firefox "F12" 会告诉您 for(>var ...)
有问题。 ;)
您是否在与我们共享的代码之外的某处声明了 canvas
? dataurl
声明了吗? toDataUrl
的前缀不需要...
这是我在您的 for 循环周围键入的基本 html 文件,它会将 "test.png" 变为灰色。也许您想将其保存在某个地方,将 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>
我知道您正在寻找 converting dataURI to grayscale 但是,如果您想将视频反馈本身转换为灰度或将任何图像转换为灰度,您可以使用此代码。
.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>
您不应取 3 个颜色分量的平均值,因为它们的亮度差异很大(100% 绿色比 100% 蓝色亮很多)。电视系统(PAL 和 NTSC)定义灰度画面的亮度为 29.9% Red + 58.7% Green + 11.4% Blue.
基本上,单击按钮时,它会告诉移动设备转到相机。相机一拍下来,就会给我图像数据(这叫数据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()
的方法并使其 return 变成灰度图像。我试过这个:
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 循环代码并对其进行了调整。
这不起作用的原因有多种。开始检查控制台输出以跟踪错误对您来说是一件好事。例如,Firefox "F12" 会告诉您 for(>var ...)
有问题。 ;)
您是否在与我们共享的代码之外的某处声明了 canvas
? dataurl
声明了吗? toDataUrl
的前缀不需要...
这是我在您的 for 循环周围键入的基本 html 文件,它会将 "test.png" 变为灰色。也许您想将其保存在某个地方,将 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>
我知道您正在寻找 converting dataURI to grayscale 但是,如果您想将视频反馈本身转换为灰度或将任何图像转换为灰度,您可以使用此代码。
.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>
您不应取 3 个颜色分量的平均值,因为它们的亮度差异很大(100% 绿色比 100% 蓝色亮很多)。电视系统(PAL 和 NTSC)定义灰度画面的亮度为 29.9% Red + 58.7% Green + 11.4% Blue.