- #1
- 350
- 203
Recently I want to make a image adder in html, which is just a app that add the rgb value of each pixel in simple bmp files together.It can be used to grayscales and other things.
I found this website that teches how to do that with the <canvas> element in html5.
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas
The problem is that although there demonstrations work on their webpage, it just don't work when I copied the code from
And NONE OF THE ABOVE works. Not even the CodePen page simulation could work. The only place that their code seems to work is in their page. How is that? Did I miss anything?My code(hippo grayscale and invert):
Which is exactly what they posted on codepen.
I found this website that teches how to do that with the <canvas> element in html5.
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas
The problem is that although there demonstrations work on their webpage, it just don't work when I copied the code from
- The website using the "view source code" in IE and Edge
- Their link to CodePen
And NONE OF THE ABOVE works. Not even the CodePen page simulation could work. The only place that their code seems to work is in their page. How is that? Did I miss anything?My code(hippo grayscale and invert):
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="https://developer.mozilla.org/static/build/styles/samples.37902ba3b7fe.css" rel="stylesheet" type="text/css" />
<title>Pixel manipulation with canvas - Grayscaling_and_inverting_colors - code sample</title>
</head>
<body>
<canvas id="canvas" width="300" height="227"></canvas>
<div>
<input id="grayscalebtn" value="Grayscale" type="button">
<input id="invertbtn" value="Invert" type="button">
</div>
<script>
var img = new Image();
img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
img.onload = function() {
draw(this);
};
function draw(img) {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
img.style.display = 'none';
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
var data = imageData.data;
var invert = function() {
for (var i = 0; i < data.length; i += 4) {
data[i] = 255 - data[i]; // red
data[i + 1] = 255 - data[i + 1]; // green
data[i + 2] = 255 - data[i + 2]; // blue
}
ctx.putImageData(imageData, 0, 0);
};
var grayscale = function() {
for (var i = 0; i < data.length; i += 4) {
var avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
data[i] = avg; // red
data[i + 1] = avg; // green
data[i + 2] = avg; // blue
}
ctx.putImageData(imageData, 0, 0);
};
var invertbtn = document.getElementById('invertbtn');
invertbtn.addEventListener('click', invert);
var grayscalebtn = document.getElementById('grayscalebtn');
grayscalebtn.addEventListener('click', grayscale);
}
</script>
</body>
</html>