🔥🔥 HOT! 🔥🔥 Template siêu VIP #500K

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

Zalo 0971539681 Tư vấn & Hỗ trợ
Bài viết này giới thiệu một ứng dụng web đơn giản nhưng mạnh mẽ, được xây dựng bằng HTML, CSS, và JavaScript, cho phép người dùng tải lên hình ảnh từ máy tính của họ, chuyển đổi ảnh sang đen trắng, và lưu lại kết quả.

Công cụ chuyển đổi ảnh sang đen trắng Online mà không cần dùng Photoshop

Nội dung bài viết cung cấp mã nguồn chi tiết cùng với hướng dẫn và giải thích cho mỗi phần, từ việc xử lý sự kiện khi người dùng chọn ảnh, đến quá trình chuyển đổi và lưu trữ ảnh. Bài viết nhấn mạnh tính tương tác, tính linh hoạt và hiệu suất của ứng dụng, cũng như cung cấp cơ hội cho độc giả để tìm hiểu và thực hành.

Toàn bộ code bên dưới

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

Dùng Tool tại đây

Bài liên quan ngẫu nhiên

Nhận xét

Contact Me on Zalo