I'm having a little trouble with my Javascript and HTML. It should work, with two pictures, but it doesn't. I've looked at the console in Chrome and it said that the "appendChild is null" or something like that.
For my safety, I can't give you the image, but I'm sure your images will work fine too for this small project. This is the code (it is quite big):
var mySrcImg = new Image();
mySrcImg.crossOrigin = "";
mySrcImg.onload = test;
mySrcImg.src = "your image";
function test() {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.fillStyle = "rgb(0,200,0)";
context.fillRect(0, 0, 800, 800);
// Copy the image to the canvas
context.drawImage(mySrcImg, 0, 0);
// Get your image data
var myImageData;
myImageData = context.getImageData(0, 0, canvas.width, canvas.height);
// Loop over each pixel and invert the colours
var pixelComponents = myImageData.data;
var n = pixelComponents.length;
for (var i = 0; i < n; i += 4) {
// One pixel:
var average = (pixelComponents[i] +
pixelComponents[i + 1] + pixelComponents[i + 2]) / 3;
pixelComponents[i]; // red
pixelComponents[i + 1]; // green
pixelComponents[i + 2]; // blue
// i+3 is alpha (the fourth element)
}
// Draw the ImageData object at the given (x,y) coordinates
context.putImageData(myImageData, 0, 0);
document.getElementById("srcImgDiv").appendChild(mySrcImg);
}<h1 id="MyHeader">Image Processing App</h1>
<p><b>Original Image:</b></p>
<div id "='srcImgDiv'></div>
<p><br></p>
<p><b>Converted Image:</b></p>
<canvas id="canvas " width="800 " height="800 "> </canvas>
<p><br></p>