Chuyển đổi JPG/PNG sang WebP bằng HTML/CSS, JavaScript

Việc chuyển đổi ảnh từ các định dạng như JPG, PNG sang WebP thông qua JavaScript thuần và HTML/CSS là một tác vụ phức tạp hơn, bởi vì việc này đòi hỏi phải xử lý hình ảnh ở cấp độ client-side. Tuy nhiên, có thể thực hiện việc này bằng cách sử dụng Canvas API trong JavaScript để chuyển đổi ảnh từ các định dạng như JPG/PNG sang WebP.

Dưới đây là cách bạn có thể thực hiện việc này mà không cần sử dụng backend (PHP) và chỉ sử dụng HTML, CSS, và JavaScript:

Nội dung chính

Giải pháp dùng Canvas API trong JavaScript

Canvas API cho phép vẽ hình ảnh và sau đó chuyển đổi nó sang các định dạng khác, bao gồm WebP, ngay trên trình duyệt.

Bước 1: Tạo form upload ảnh và nút để chuyển đổi

Tạo form

<!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 ảnh sang WebP</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 50px;
        }
        #output {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>Chuyển đổi ảnh JPG/PNG sang WebP</h1>
    <input type="file" id="imageInput" accept="image/jpeg, image/png">
    <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 selectedFile;

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

        // Hàm chuyển đổi ảnh sang WebP
        convertBtn.addEventListener('click', function() {
            if (!selectedFile) {
                alert("Vui lòng chọn một ảnh trước.");
                return;
            }

            // Đọc file ảnh
            const reader = new FileReader();
            reader.readAsDataURL(selectedFile);
            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%

                    // Hiển thị ảnh WebP
                    outputDiv.innerHTML = `
                        <h2>Ảnh đã chuyển đổi sang WebP</h2>
                        <img src="${webpImage}" alt="Converted Image" style="max-width: 100%; height: auto;">
                        <a href="${webpImage}" download="converted_image.webp">Tải ảnh WebP về</a>
                    `;
                };
            };
        });
    </script>
</body>
</html>

<!DOCTYPE html>

<head>

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

<style>

body {

font-family: Arial, sans-serif;

margin: 50px;

}

#output {

margin-top: 20px;

}

</style>

</head>

<body>

<h1>Chuyển đổi ả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 selectedFile;

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

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

selectedFile = event.target.files[0];

});

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

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

if (!selectedFile) {

alert("Vui lòng chọn một ảnh trước.");

return;

}

// Đọc file ảnh

const reader = new FileReader();

reader.readAsDataURL(selectedFile);

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%

// Hiển thị ảnh WebP

outputDiv.innerHTML = `

<h2>Ảnh đã chuyển đổi sang WebP</h2>

};

});

</script>

</body>

</html>

Xem kết quả: Chuyển ảnh JPG/PNG sang WebP

Giải thích

HTML Form:
- Tạo form với phần tử <input type="file"> để người dùng có thể chọn ảnh cần chuyển đổi (chấp nhận định dạng JPG và PNG).
- Nút “Chuyển đổi sang WebP” sẽ gọi hàm JavaScript để xử lý khi được nhấn.
JavaScript:
- FileReader: Được sử dụng để đọc nội dung của file ảnh được người dùng upload. Sau khi đọc thành công, nội dung của ảnh sẽ được chuyển thành base64 thông qua reader.readAsDataURL().
- Canvas API: Sau khi ảnh được load thành công, chúng ta vẽ ảnh lên một canvas bằng hàm drawImage(). Canvas hỗ trợ lưu lại ảnh dưới định dạng WebP thông qua phương thức toDataURL('image/webp', quality), trong đó quality là giá trị từ 0 đến 1 để xác định chất lượng của file WebP (ví dụ: 0.8 là chất lượng 80%).
- Tải về ảnh WebP: Sau khi chuyển đổi, ảnh WebP sẽ được hiển thị và tạo một liên kết để người dùng tải về dưới dạng WebP.
CSS: Chỉ có các kiểu đơn giản để căn chỉnh và hiển thị ảnh một cách trực quan.

Bước 2: Thử nghiệm

Người dùng chọn một file JPG hoặc PNG, nhấn nút “Chuyển đổi sang WebP”.
Ảnh được chuyển đổi và hiển thị dưới định dạng WebP ngay trên trang web.
Có liên kết để tải về ảnh WebP đã chuyển đổi.

Lưu ý

Canvas API chỉ hỗ trợ một số định dạng nhất định, bao gồm JPG, PNG, và WebP. Nó có thể không hoạt động nếu bạn cần chuyển đổi từ các định dạng ảnh phức tạp hơn như GIF hoặc BMP.
Trình duyệt phải hỗ trợ định dạng WebP, tuy nhiên, đa số các trình duyệt hiện đại như Chrome, Firefox và Edge đều đã hỗ trợ.

Tóm lại

Giải pháp này giúp bạn thực hiện việc chuyển đổi hình ảnh sang WebP mà không cần backend. Tuy nhiên, nếu bạn cần chuyển đổi nhiều ảnh hoặc cần xử lý ảnh phức tạp hơn, việc sử dụng giải pháp server-side sẽ linh hoạt hơn.

Chuyển đổi từng ảnh JPG/PNG sang WebP bằng HTML/CSS và JavaScript