Write the code in Javascript to Invert image color.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Color Inverter</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 50px;
}
#output-container {
margin-top: 20px;
}
</style>
</head>
<body>
<h1>Image Color Inverter</h1>
<input type="file" id="imageInput" accept="image/*">
<button onclick="invertColors()">Invert Colors</button>
<div id="output-container">
<h2>Output Image</h2>
<img id="outputImage" alt="Output Image">
</div>
<script>
function invertColors() {
var input = document.getElementById('imageInput');
var outputImage = document.getElementById('outputImage');
var outputContainer = document.getElementById('output-container');
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
var img = new Image();
img.src = e.target.result;
img.onload = function() {
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
var data = imageData.data;
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);
outputImage.src = canvas.toDataURL('image/png');
outputContainer.style.display = 'block';
};
};
reader.readAsDataURL(input.files[0]);
}
}
</script>
</body>
</html>