Code Any Image Type to WEBP Format Converter Using HTML, CSS and JavaScript with Source Code
Chào mừng đến với dự án Any Image Type to WEBP Format Converter, một công cụ đa năng được thiết kế để hợp lý hóa quy trình chuyển đổi hình ảnh sang định dạng WEBP hiện đại. Tận dụng sức mạnh của HTML, CSS và JavaScript, ứng dụng này mang đến trải nghiệm người dùng liền mạch, cho phép người dùng dễ dàng chuyển đổi hình ảnh ở mọi loại - cho dù là JPEG, PNG hay GIF - thành WEBP, được biết đến với đặc điểm nén và chất lượng vượt trội.
Với giao diện rõ ràng và trực quan, người dùng có thể chỉ cần kéo và thả hình ảnh của mình vào khu vực được chỉ định hoặc chọn duyệt và chọn tệp từ thiết bị của họ. Sau khi chọn, ứng dụng cung cấp bản xem trước tức thì của hình ảnh đã chuyển đổi ở định dạng WEBP, đảm bảo người dùng có thể nhanh chóng đánh giá kết quả. Hơn nữa, tính năng tải xuống dễ sử dụng cho phép người dùng có được hình ảnh WEBP đã chuyển đổi chỉ bằng một cú nhấp chuột, giúp quá trình tối ưu hóa diễn ra nhanh chóng và thuận tiện. Trải nghiệm hiệu quả và sự tiện lợi của việc chuyển đổi hình ảnh với "Công cụ chuyển đổi mọi loại hình ảnh sang định dạng WEBP", nâng cao hiệu suất nội dung web của bạn trong khi vẫn duy trì độ trung thực hình ảnh đặc biệt.
|
| Downloading Any Image Type to WEBP Format Converter Using HTML, CSS and JavaScript with Source Code Code |
Tính năng:
- Chuyển đổi hình ảnh phổ quát: Chuyển đổi hình ảnh của bất kỳ loại nào (JPEG, PNG, GIF, v.v.) sang định dạng WEBP hiệu quả cao.
- Kéo và thả hoặc Duyệt: Bạn có thể kéo và thả hình ảnh của mình trực tiếp vào khu vực được chỉ định hoặc sử dụng nút "Duyệt tệp" để chọn hình ảnh đó từ thiết bị của bạn.
- Xem trước tức thì: Sau khi bạn chọn một hình ảnh, ứng dụng sẽ cung cấp bản xem trước tức thì của hình ảnh đã chuyển đổi ở định dạng WEBP.
- Tải xuống dễ dàng: Tải xuống hình ảnh WEBP đã chuyển đổi chỉ bằng một cú nhấp chuột.
- Thiết kế đáp ứng: Ứng dụng được thiết kế để hoạt động liền mạch trên nhiều thiết bị và kích thước màn hình khác nhau.
Công nghệ được sử dụng:
- HTML: Cung cấp cấu trúc của trang web và xử lý các thành phần giao diện người dùng.
- CSS: Định dạng các thành phần giao diện người dùng, cung cấp giao diện hấp dẫn và thân thiện với người dùng.
- JavaScript: Xử lý chức năng cốt lõi của ứng dụng, bao gồm chuyển đổi hình ảnh và tương tác với người dùng.
Cách sử dụng:
- Chọn hình ảnh: Kéo và thả hình ảnh của bạn vào vùng được chỉ định hoặc nhấp vào nút "Duyệt tệp" để chọn hình ảnh đó từ thiết bị của bạn.
- Xem trước chuyển đổi: Sau khi chọn hình ảnh, bạn sẽ thấy ngay bản xem trước của hình ảnh đã chuyển đổi ở định dạng WEBP.
- Tải xuống WEBP: Nếu bạn hài lòng với quá trình chuyển đổi, chỉ cần nhấp vào nút "Tải xuống WEBP" để lưu hình ảnh đã chuyển đổi vào thiết bị của bạn.
- Lặp lại: Bạn có thể lặp lại quy trình cho nhiều hình ảnh tùy ý cần thiết bằng cách tải lại trang hoặc nhấp vào nút "Tải lên lại".
Ảnh chụp màn hình:
Landing Page
Xem trước hình ảnh (Có thể tải xuống)
Cách chạy?
- Tải xuống tệp mã nguồn được cung cấpzip.
- Trích xuất tệpzip đã tải xuống.
- Mở tệp html và bạn đã sẵn sàng!
Video hướng dẫn cài đặt/thiết lập:
Kết luận:
Tóm lại, Any Image Type to WEBP Format Converter cung cấp giải pháp thân thiện với người dùng để tối ưu hóa hình ảnh cho web, khai thác khả năng của HTML, CSS và JavaScript để đơn giản hóa quy trình chuyển đổi. Với giao diện trực quan, khả năng tương thích linh hoạt với nhiều loại hình ảnh khác nhau và chức năng xem trước tức thì, người dùng có thể chuyển đổi hiệu quả hình ảnh của mình sang định dạng WEBP hiệu quả cao. Cho dù bạn là nhà phát triển web muốn nâng cao hiệu suất trang web hay là cá nhân muốn hợp lý hóa quá trình tối ưu hóa hình ảnh, công cụ này cung cấp giải pháp liền mạch và hiệu quả để chuyển đổi hình ảnh trong khi vẫn giữ nguyên chất lượng hình ảnh. Hãy tận dụng sức mạnh của chuyển đổi WEBP ngay hôm nay và nâng cao nội dung trực tuyến của bạn với tốc độ và hiệu quả.
Vậy là xong! Tôi hy vọng "Chuyển đổi mọi loại hình ảnh sang định dạng WEBP bằng HTML, CSS và JavaScript" này sẽ hỗ trợ bạn trên hành trình lập trình, mang lại giá trị cho các dự án hiện tại và sắp tới của bạn.
Để biết thêm hướng dẫn và mã nguồn miễn phí, hãy khám phá trang web của chúng tôi.
Downloading Any Image Type to WEBP Format
Lưu ý: Do kích thước hoặc độ phức tạp của bài nộp này, tác giả đã gửi dưới dạng tệp .zip để rút ngắn thời gian tải xuống của bạn. Sau khi tải xuống, bạn sẽ cần một chương trình như Winzip để giải nén.
Lưu ý về vi-rút: Tất cả các tệp đều được SourceCodester.com quét vi-rút một lần mỗi ngày, nhưng vi-rút mới lại xuất hiện mỗi ngày, vì vậy không có chương trình phòng ngừa nào có thể phát hiện được 100% vi-rút.
VÌ SỰ AN TOÀN CỦA BẠN, VUI LÒNG:
1. Quét lại các tệp đã tải xuống bằng trình kiểm tra vi-rút cá nhân của bạn trước khi sử dụng.
2. KHÔNG BAO GIỜ chạy các tệp đã biên dịch (.exe, .ocx, .dll, v.v.) - chỉ chạy mã nguồn.
Code Any Image Type to WEBP Format
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Any Image Type to WEBP Converter</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
* {
padding: 0;
margin: 0;
font-family: 'Poppins', sans-serif;
}
body {
background-image: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%);
}
.main {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: rgb(255, 255, 255);
padding: 30px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
border-radius: 10px;
}
.file-upload-form {
width: fit-content;
height: fit-content;
display: flex;
align-items: center;
justify-content: center;
}
.file-upload-label input {
display: none;
}
.file-upload-label svg {
height: 50px;
fill: rgb(229, 95, 95);
margin-bottom: 20px;
}
.file-upload-label {
cursor: pointer;
padding: 30px 70px;
border-radius: 40px;
border: 2px dashed rgb(243, 139, 139);
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
margin-top: 15px;
}
.file-upload-design {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
}
.browse-button, button {
background-color: #fa4d56;
padding: 5px 15px;
border-radius: 5px;
color: white;
transition: all 0.3s;
border: none;
cursor: pointer;
width: 160px;
font-size: 16px;
text-align: center;
}
.browse-button:hover, button:hover {
background-color: #de151f;
}
.result {
margin-top: 15px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.result > img {
width: 400px;
margin-bottom: 15px;
}
</style>
</head>
<body>
<div class="main">
<div class="container">
<h1>Any Image Type to WEBP Converter</h1>
<p>Convert any image type to WEBP format with ease.</p>
<form class="file-upload-form">
<label for="file" class="file-upload-label" id="fileUploadLabel">
<div class="file-upload-design">
<svg viewBox="0 0 640 512" height="1em">
<path
d="M144 480C64.5 480 0 415.5 0 336c0-62.8 40.2-116.2 96.2-135.9c-.1-2.7-.2-5.4-.2-8.1c0-88.4 71.6-160 160-160c59.3 0 111 32.2 138.7 80.2C409.9 102 428.3 96 448 96c53 0 96 43 96 96c0 12.2-2.3 23.8-6.4 34.6C596 238.4 640 290.1 640 352c0 70.7-57.3 128-128 128H144zm79-217c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l39-39V392c0 13.3 10.7 24 24 24s24-10.7 24-24V257.9l39 39c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-80-80c-9.4-9.4-24.6-9.4-33.9 0l-80 80z"
></path>
</svg>
<p>Drag and Drop</p>
<p>or</p>
<span class="browse-button">Browse file</span>
</div>
<input id="file" type="file" onchange="previewImage(event)" />
</label>
</form>
<div class="result" id="result" style="display: none;">
<img id="imagePreview" src="" alt="">
<div class="buttons">
<button onclick="location.reload()">Upload Again</button>
<button onclick="downloadWebpFormat()">Download WEBP</button>
</div>
</div>
</div>
</div>
<script>
function previewImage(event) {
const input = event.target;
const reader = new FileReader();
reader.onload = function () {
const form = document.querySelector('.file-upload-form');
const resultDiv = document.getElementById('result');
const imagePreview = document.getElementById('imagePreview');
imagePreview.src = reader.result;
resultDiv.style.display = '';
form.style.display = 'none';
};
reader.readAsDataURL(input.files[0]);
}
function downloadWebpFormat() {
const imagePreview = document.getElementById('imagePreview');
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = imagePreview.width;
canvas.height = imagePreview.height;
ctx.drawImage(imagePreview, 0, 0);
canvas.toBlob((blob) => {
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'converted_image.webp';
link.click();
URL.revokeObjectURL(link.href);
}, 'image/webp');
}
</script>
</body>
</html>
Tham gia cuộc trò chuyện