Hướng dẫn tạo tool chuyển đổi JPG sang WebP và tích hợp vào Blogger
Bài viết này sẽ hướng dẫn bạn tạo một công cụ đơn giản để chuyển đổi hình ảnh từ JPG sang WebP bằng HTML và JavaScript, sau đó tích hợp nó vào Blogger để sử dụng trực tiếp trên blog của bạn.
1. Tại sao cần tool chuyển đổi JPG sang WebP?
- WebP giúp giảm kích thước tệp, tăng tốc độ tải trang.
- Tích hợp tool vào Blogger giúp người dùng dễ dàng tối ưu hóa hình ảnh mà không cần rời khỏi blog.
2. Chuẩn bị
- Kiến thức cơ bản về HTML, JavaScript.
- Trình chỉnh sửa mã nguồn (như VS Code).
- Truy cập vào giao diện HTML của Blogger.
3. Tạo tool chuyển đổi JPG sang WebP
Bước 1: Tạo giao diện HTML
Tạo một tệp HTML với form để tải lên hình ảnh và nút chuyển đổi.
Bước 2: Thêm JavaScript để xử lý chuyển đổi
Sử dụng thư viện webp-converter hoặc API canvas để chuyển đổi hình ảnh.
Bước 3: Kết quả
Hiển thị hình ảnh WebP đã chuyển đổi để người dùng tải về.
4. Code mẫu
Dưới đây là code hoàn chỉnh cho tool:
<!DOCTYPE html>
<html>
<head>
<title>Chuyển đổi JPG sang WebP</title>
<style>
body { font-family: Arial, sans-serif; text-align: center; margin-top: 50px; }
#result { margin-top: 20px; }
</style>
</head>
<body>
<h2>Chuyển đổi JPG sang WebP</h2>
<input type="file" id="imageInput" accept="image/jpeg">
<button onclick="convertImage()">Chuyển đổi</button>
<div id="result"></div>
<script>
async function convertImage() {
const fileInput = document.getElementById('imageInput');
const file = fileInput.files[0];
if (!file) {
alert('Vui lòng chọn một tệp JPG!');
return;
}
const img = new Image();
img.src = URL.createObjectURL(file);
await img.decode();
const canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
canvas.toBlob(async (blob) => {
const webpBlob = await new Promise(resolve => {
const reader = new FileReader();
reader.onload = () => resolve(new Blob([reader.result], { type: 'image/webp' }));
reader.readAsArrayBuffer(blob);
});
const url = URL.createObjectURL(webpBlob);
const a = document.createElement('a');
a.href = url;
a.download = 'converted.webp';
document.getElementById('result').innerHTML = '<img src="' + url + '" style="max-width: 300px;">';
a.click();
}, 'image/webp', 0.8);
}
</script>
</body>
</html>
5. Tích hợp tool vào Blogger
Bước 1: Truy cập giao diện HTML
- Đăng nhập Blogger, vào Theme > Edit HTML.
Bước 2: Thêm code
- Thêm code HTML/JavaScript ở trên vào phần
<head>hoặc trước thẻ</body>trong template. - Để tránh xung đột, bọc code trong một thẻ
<div>với ID duy nhất, ví dụ:<div id="webp-converter"> <!-- Đặt code tool ở đây --> </div>
Bước 3: Tạo widget
- Vào Layout > Add a Gadget > Chọn HTML/JavaScript.
- Dán code tool và lưu lại.
Bước 4: Kiểm tra
- Truy cập blog, tìm widget hoặc khu vực hiển thị tool, tải lên tệp JPG và kiểm tra kết quả.
6. Lưu ý
- Đảm bảo trình duyệt hỗ trợ WebP (Chrome, Firefox, Edge).
- Giới hạn kích thước tệp để tránh lỗi tải lên (thêm kiểm tra trong JavaScript nếu cần).
- Backup template Blogger trước khi chỉnh sửa.
7. Kết luận
Với tool này, bạn có thể chuyển đổi JPG sang WebP trực tiếp trên Blogger, giúp tối ưu hóa hình ảnh dễ dàng. Hãy thử nghiệm và tùy chỉnh theo nhu cầu của blog!