Chuyển đổi ảnh sang Trắng đen với HTML, CSS, và JavaScript

<style>
/*<![CDATA[*/
#imageInput{margin-bottom:10px}
#imageContainers{display:none;flex:0 0 auto;justify-content:space-around;margin-top:20px}
#imageContainers canvas{border:1px solid #ccc;max-width:45%;height:auto}
#imageContainers button{padding:10px;background-color:#4CAF50;color:white;border:none;border-radius:4px;cursor:pointer}
#imageContainers button:hover{background-color:#45a049}
/*]]>*/
</style>
 <input type="file" id="imageInput" accept="image/*" />
 <div id="imageContainers">
   <canvas id="originalCanvas"></canvas>
   <canvas id="convertedCanvas"></canvas>
   <button onclick="convertAndSave()">Lưu ảnh</button>
 </div>
 <script>
   //<![CDATA[
   document.getElementById('imageInput').addEventListener('change', handleImageSelect);

   function handleImageSelect(event) {
     const input = event.target;
     const imageContainers = document.getElementById('imageContainers');
     if (input.files && input.files[0]) {
       const reader = new FileReader();
       reader.onload = function(e) {
         const image = new Image();
         image.onload = function() {
           displayOriginalImage(image);
           convertToBlackAndWhite(image);
         };
         image.src = e.target.result;
       };
       reader.readAsDataURL(input.files[0]);
       // Show imageContainers
       imageContainers.style.display = 'flex';
     } else {
       // Hide imageContainers if no image selected
       imageContainers.style.display = 'none';
     }
   }

   function displayOriginalImage(image) {
     const originalCanvas = document.getElementById('originalCanvas');
     const context = originalCanvas.getContext('2d');
     // Set canvas dimensions to match the image
     originalCanvas.width = image.width;
     originalCanvas.height = image.height;
     // Draw the original image on the canvas
     context.drawImage(image, 0, 0, originalCanvas.width, originalCanvas.height);
   }

   function convertToBlackAndWhite(image) {
     const convertedCanvas = document.getElementById('convertedCanvas');
     const context = convertedCanvas.getContext('2d');
     // Set canvas dimensions to match the image
     convertedCanvas.width = image.width;
     convertedCanvas.height = image.height;
     // Draw the image on the canvas
     context.drawImage(image, 0, 0, convertedCanvas.width, convertedCanvas.height);
     // Get the image data
     const imageData = context.getImageData(0, 0, convertedCanvas.width, convertedCanvas.height);
     const data = imageData.data;
     // Convert the image to black and white
     for (let i = 0; i < data.length; i += 4) {
       const brightness = (data[i] + data[i + 1] + data[i + 2]) / 3;
       data[i] = brightness;
       data[i + 1] = brightness;
       data[i + 2] = brightness;
     }
     // Put the updated image data back on the canvas
     context.putImageData(imageData, 0, 0);
   }

   function convertAndSave() {
     const convertedCanvas = document.getElementById('convertedCanvas');
     const dataUrl = convertedCanvas.toDataURL(); // Get the data URL of the converted canvas
     // Create a temporary link element
     const a = document.createElement('a');
     a.href = dataUrl;
     a.download = 'black_and_white_image.png'; // Set the filename for download
     document.body.appendChild(a);
     a.click(); // Simulate a click on the link to trigger download
     document.body.removeChild(a); // Remove the link element
   }
   //]]>
 </script>