JS-如何将图像对象转换为灰度并显示它 [英] JS - How to turn Image object into grayscale and display it
问题描述
基本上，当单击一个按钮时，它将告诉移动设备转到相机.相机拍照后，会给我图像数据(称为数据URL?).这是我要处理的代码:
Basically, when a button is clicked, it'll tell the mobile device to go to the camera. Once the camera takes a picture, it'll give me the image data (is it called the data URL?). This is my code to handle it:
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()的方法，并使其返回已变为灰度的图像.我试过了:
I want to call a method called grayscale() and make it return the image that's been turned into grayscale. I tried this:
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循环代码并对其进行了调整.
But for some reason it doesn't work. It just doesn't display the grayscale image. I got the for loop code online and tweaked it.
推荐答案
有几个原因导致此方法不起作用.开始检查控制台输出以跟踪错误对您来说是一件好事.例如，Firefox"F12"会告诉您 for(> var ...)是个问题.;)
There are several reasons this does not work. It would be a good thing for you to start checking console output to track bugs. Firefox "F12" for example, would tell you that for(>var ...) is a problem. ;)
您是否在与我们共享的代码之外的某个地方声明了 canvas ?是否声明了 dataurl ?不需要 toDataUrl 的前缀...
Did you declare canvas somewhere, outside the code you shared with us? Is dataurl declared? The prefixing of toDataUrl is not needed...
这是我在for循环中输入的基本html文件，它确实将"test.png"变成了灰色.也许您想将其保存在某个地方，将png放在同一文件夹中，然后逐步开始编辑内容，而不是复制代码.如果您感到挑战，请尝试使其通过 http://jslint.com/！(我猜你必须用while循环替换for循环).:)
Here's a basic html file I typed around your for-loop, that does turn "test.png" to grey. Maybe you want to save it somewhere, put a png into the same folder, and start editing stuff step by step, instead of copying code. If you feel up for a challenge try making it pass http://jslint.com/! (You'd have to replace the for loop with while loops, I guess). :)
<!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>
这篇关于JS-如何将图像对象转换为灰度并显示它的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
