Invert image color code in Javascript – JS

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>

<!DOCTYPE html>

<head>

<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>

<button onclick="invertColors()">Invert Colors</button>

<h2>Output Image</h2>

</div>

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>

Invert image color code in Javascript – JS
By: Prof. Dr. Fazal Rehman Shamil | Last updated: February 3, 2024

Related Posts: