Insights Blog
-- Browse All Articles --
Physics Articles
Physics Tutorials
Physics Guides
Physics FAQ
Math Articles
Math Tutorials
Math Guides
Math FAQ
Education Articles
Education Guides
Bio/Chem Articles
Technology Guides
Computer Science Tutorials
Forums
Chemistry
Biology and Medical
Earth Sciences
Computer Science
Computing and Technology
DIY Projects
Trending
Featured Threads
Log in
Register
What's new
Search
Search
Search titles only
By:
Chemistry
Biology and Medical
Earth Sciences
Computer Science
Computing and Technology
DIY Projects
Menu
Log in
Register
Navigation
More options
Contact us
Close Menu
JavaScript is disabled. For a better experience, please enable JavaScript in your browser before proceeding.
You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an
alternative browser
.
Forums
Other Sciences
Computing and Technology
Html5 <canvas> element related apps not working
Reply to thread
Message
[QUOTE="YoungPhysicist, post: 6120470, member: 649826"] 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. [URL]https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas[/URL] The problem is that although there demonstrations work on their webpage, it just don't work when I copied the code from [LIST] [*]The website using the "view source code" in IE and Edge [*]Their link to CodePen [/LIST] 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): [code=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> [/code] Which is exactly what they posted on codepen. [/QUOTE]
Insert quotes…
Post reply
Forums
Other Sciences
Computing and Technology
Html5 <canvas> element related apps not working
Back
Top