Chuyển Ảnh JPG/PNG sang WebP bằng HTML/CSS, JavaScript

Để chuyển đổi nhiều ảnh cùng một lúc và giữ nguyên tên ảnh chỉ thay đổi đuôi thành .webp, bạn có thể điều chỉnh mã JavaScript để hỗ trợ chọn nhiều file ảnh, sau đó xử lý từng ảnh một.

Nội dung chính

Mã HTML, CSS và JavaScript để chuyển đổi nhiều ảnh sang WebP

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chuyển đổi nhiều ảnh sang WebP</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 50px;
        }
        #output {
            margin-top: 20px;
        }
        .image-container {
            margin-bottom: 20px;
        }
        .image-container img {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <h1>Chuyển đổi nhiều ảnh JPG/PNG sang WebP</h1>
    <input type="file" id="imageInput" accept="image/jpeg, image/png" multiple>
    <button id="convertBtn">Chuyển đổi sang WebP</button>
    <div id="output"></div>

    <script>
        const imageInput = document.getElementById('imageInput');
        const convertBtn = document.getElementById('convertBtn');
        const outputDiv = document.getElementById('output');
        
        let selectedFiles = [];

        // Lắng nghe sự kiện khi người dùng chọn nhiều ảnh
        imageInput.addEventListener('change', function(event) {
            selectedFiles = event.target.files;
        });

        // Hàm chuyển đổi ảnh sang WebP
        convertBtn.addEventListener('click', function() {
            if (selectedFiles.length === 0) {
                alert("Vui lòng chọn ít nhất một ảnh.");
                return;
            }

            outputDiv.innerHTML = ''; // Xóa nội dung cũ nếu có

            Array.from(selectedFiles).forEach(file => {
                const reader = new FileReader();
                reader.readAsDataURL(file);
                
                reader.onload = function(event) {
                    const img = new Image();
                    img.src = event.target.result;

                    img.onload = function() {
                        // Tạo canvas để vẽ ảnh
                        const canvas = document.createElement('canvas');
                        canvas.width = img.width;
                        canvas.height = img.height;

                        const ctx = canvas.getContext('2d');
                        ctx.drawImage(img, 0, 0);

                        // Chuyển đổi sang WebP
                        const webpImage = canvas.toDataURL('image/webp', 0.8); // Chuyển đổi với chất lượng 80%

                        // Tạo phần tử chứa ảnh và link tải về
                        const imageContainer = document.createElement('div');
                        imageContainer.className = 'image-container';
                        imageContainer.innerHTML = `
                            <h2>${file.name.replace(/\.[^/.]+$/, "")}.webp</h2>
                            <img src="${webpImage}" alt="Converted Image">
                            <a href="${webpImage}" download="${file.name.replace(/\.[^/.]+$/, "")}.webp">Tải ảnh WebP về</a>
                        `;

                        outputDiv.appendChild(imageContainer);
                    };
                };
            });
        });
    </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Chuyển đổi nhiều ảnh sang WebP</title>

<style>

body {

font-family: Arial, sans-serif;

margin: 50px;

}

#output {

margin-top: 20px;

}

.image-container {

margin-bottom: 20px;

}

.image-container img {

max-width: 100%;

height: auto;

}

</style>

</head>

<body>

<h1>Chuyển đổi nhiều ảnh JPG/PNG sang WebP</h1>

<button id="convertBtn">Chuyển đổi sang WebP</button>

const imageInput = document.getElementById('imageInput');

const convertBtn = document.getElementById('convertBtn');

const outputDiv = document.getElementById('output');

let selectedFiles = [];

// Lắng nghe sự kiện khi người dùng chọn nhiều ảnh

imageInput.addEventListener('change', function(event) {

selectedFiles = event.target.files;

});

// Hàm chuyển đổi ảnh sang WebP

convertBtn.addEventListener('click', function() {

if (selectedFiles.length === 0) {

alert("Vui lòng chọn ít nhất một ảnh.");

return;

}

outputDiv.innerHTML = ''; // Xóa nội dung cũ nếu có

Array.from(selectedFiles).forEach(file => {

const reader = new FileReader();

reader.readAsDataURL(file);

reader.onload = function(event) {

const img = new Image();

img.src = event.target.result;

img.onload = function() {

// Tạo canvas để vẽ ảnh

const canvas = document.createElement('canvas');

canvas.width = img.width;

canvas.height = img.height;

const ctx = canvas.getContext('2d');

ctx.drawImage(img, 0, 0);

// Chuyển đổi sang WebP

const webpImage = canvas.toDataURL('image/webp', 0.8); // Chuyển đổi với chất lượng 80%

// Tạo phần tử chứa ảnh và link tải về

const imageContainer = document.createElement('div');

imageContainer.className = 'image-container';

imageContainer.innerHTML = `

<h2>${file.name.replace(/\.[^/.]+$/, "")}.webp</h2>

outputDiv.appendChild(imageContainer);

};

});

</script>

</body>

</html>

Xem kết quả: Chuyển nhiều ảnh JPG/PNG cùng một lúc sang WebP

Giải thích chi tiết

HTML

- Phần tử <input> cho phép chọn nhiều tệp với thuộc tính multiple, giúp người dùng có thể chọn nhiều file cùng lúc.
- Nút “Chuyển đổi sang WebP” được dùng để bắt đầu quá trình chuyển đổi.

JavaScript

- Lưu trữ các file được chọn: selectedFiles là một mảng chứa các file mà người dùng đã chọn. Mảng này được cập nhật khi người dùng thay đổi file trong <input>.
- Vòng lặp qua từng file: Sử dụng Array.from(selectedFiles) để chuyển đổi FileList thành một mảng và thực hiện chuyển đổi từng file một.
- FileReader và Canvas: Tương tự như trước, sử dụng FileReader để đọc file ảnh dưới dạng base64 và vẽ lên canvas.
- Đổi tên file: Trong mỗi lần lặp, đoạn code giữ nguyên tên ảnh và chỉ thay đổi phần mở rộng bằng cách dùng file.name.replace(/\.[^/.]+$/, "") để loại bỏ phần đuôi tệp gốc và thay bằng .webp.

Hiển thị kết quả

- Sau khi chuyển đổi, một phần tử <div> chứa ảnh đã được chuyển đổi cùng liên kết để tải về sẽ được tạo ra và hiển thị trong outputDiv.
- Tên của file WebP giữ nguyên tên file gốc và chỉ thay đổi phần mở rộng thành .webp.
CSS: Mã CSS đơn giản để căn chỉnh ảnh và các liên kết tải về cho trực quan.

Cách sử dụng

Chọn nhiều file ảnh JPG hoặc PNG từ máy tính của bạn bằng cách sử dụng input.
Nhấn nút “Chuyển đổi sang WebP”.
Các ảnh sau khi chuyển đổi sẽ được hiển thị trên trang cùng với liên kết tải về từng ảnh dưới định dạng WebP.

Điểm mạnh

Hỗ trợ chuyển đổi nhiều ảnh cùng lúc.
Giữ nguyên tên ảnh gốc và chỉ thay đổi phần mở rộng.
Thực hiện toàn bộ trên trình duyệt mà không cần server.

Lưu ý

Trình duyệt cần hỗ trợ định dạng WebP và Canvas API.
Nếu ảnh có kích thước quá lớn, việc xử lý có thể mất thời gian hoặc làm chậm trang web do giới hạn tài nguyên của trình duyệt.

Chuyển nhiều ảnh JPG/PNG sang WebP bằng HTML/CSS và JavaScript