Chuyển đổi nhiều định dạng hình ảnh sang WebP bằng JavaScript
WebP là một định dạng tuyệt vời cho hình ảnh trên web có thể giúp bạn cải thiện hiệu suất của ứng dụng web hoặc trang web của mình. Tôi sử dụng hình ảnh rất nhiều khi viết và nếu tôi nhìn vào hình ảnh của mình, WebP thường nhỏ hơn đáng kể.
![]() |
Chuyển đổi nhiều định dạng hình ảnh sang WebP bằng JavaScript |
Cải thiện hiệu suất trang web của bạn với WebP
Đầu tiên, chúng tôi nhận được danh sách các tệp trong thư mục hiện tại. Chúng tôi loại trừ các tệp có .webp phần mở rộng. Tiếp theo, chúng tôi xác định dấu thời gian cho một giờ trước. Điều này sẽ giúp chúng tôi chỉ bao gồm các tệp mà chúng tôi đã làm việc gần đây. Nếu bạn muốn sử dụng tập lệnh này theo cách khác, bạn sẽ cần sửa đổi hoặc xóa dòng này.
Sau đó, chúng tôi lặp lại danh sách các tệp. Đối với mỗi tệp, chúng tôi nhận được siêu dữ liệu của nó. Nếu tệp là một thư mục hoặc đã được sửa đổi hơn một giờ trước, chúng tôi bỏ qua nó. Tiếp theo, chúng tôi nhận được tên của tệp mà không có phần mở rộng của nó và chúng tôi sẽ gọi công cụ cwebp để chuyển đổi hình ảnh.
Chuyển đổi nhiều định dạng hình ảnh sang WebP bằng JavaScript
Code CSSL
body { padding: 20px; font-family: sans-serif; } h1 { margin-top: 0; } input[type=file] { margin: 20px 0; } img { max-height: 100%; max-width: 100%; box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.75); } .dropTarget { position: relative; border: 3px dashed silver; flex-basis: auto; flex-grow: 20; } .dropTarget::before { content: 'Drop files here'; color: silver; font-size: 5vh; height: 5vh; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; text-align: center; pointer-events: none; user-select: none; } #previews > div { box-sizing: border-box; height: 240px; width: 240px; padding: 20px; display: inline-flex; justify-content: center; align-items: center; vertical-align: top; } #previews > div > progress { width: 80%; } .layout { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; align-content: stretch; height: calc(100vh - 40px); }
Code HTML
<div class="layout"> <h1>Convert image to webp format</h1> <div> <input type="file" multiple accept="image/*"> </div> <div id="previews"></div> <div class="dropTarget"></div> </div>
Code javascript
let refs = {}; refs.imagePreviews = document.querySelector('#previews'); refs.fileSelector = document.querySelector('input[type=file]'); function addImageBox(container) { let imageBox = document.createElement("div"); let progressBox = document.createElement("progress"); imageBox.appendChild(progressBox); container.appendChild(imageBox); return imageBox; } function processFile(file) { if (!file) { return; } console.log(file); let imageBox = addImageBox(refs.imagePreviews); // Load the data into an image new Promise(function (resolve, reject) { let rawImage = new Image(); rawImage.addEventListener("load", function () { resolve(rawImage); }); rawImage.src = URL.createObjectURL(file); }) .then(function (rawImage) { // Convert image to webp ObjectURL via a canvas blob return new Promise(function (resolve, reject) { let canvas = document.createElement('canvas'); let ctx = canvas.getContext("2d"); canvas.width = rawImage.width; canvas.height = rawImage.height; ctx.drawImage(rawImage, 0, 0); canvas.toBlob(function (blob) { resolve(URL.createObjectURL(blob)); }, "image/webp"); }); }) .then(function (imageURL) { // Load image for display on the page return new Promise(function (resolve, reject) { let scaledImg = new Image(); scaledImg.addEventListener("load", function () { resolve({imageURL, scaledImg}); }); scaledImg.setAttribute("src", imageURL); }); }) .then(function (data) { // Inject into the DOM let imageLink = document.createElement("a"); imageLink.setAttribute("href", data.imageURL); imageLink.setAttribute('download', `${file.name}.webp`); imageLink.appendChild(data.scaledImg); imageBox.innerHTML = ""; imageBox.appendChild(imageLink); }); } function processFiles(files) { for (let file of files) { processFile(file); } } function fileSelectorChanged() { processFiles(refs.fileSelector.files); refs.fileSelector.value = ""; } refs.fileSelector.addEventListener("change", fileSelectorChanged); // Set up Drag and Drop function dragenter(e) { e.stopPropagation(); e.preventDefault(); } function dragover(e) { e.stopPropagation(); e.preventDefault(); } function drop(callback, e) { e.stopPropagation(); e.preventDefault(); callback(e.dataTransfer.files); } function setDragDrop(area, callback) { area.addEventListener("dragenter", dragenter, false); area.addEventListener("dragover", dragover, false); area.addEventListener("drop", function (e) { drop(callback, e); }, false); } setDragDrop(document.documentElement, processFiles);
Kết luận :-
Trong bài đăng này, tôi đã hướng dẫn cách Chuyển đổi nhiều định dạng hình ảnh sang WebP bằng JavaScript. Bạn thích bài viết này như thế nào, bạn có thể cho biết bằng cách bình luận và nếu bạn có bất kỳ câu hỏi nào thì bạn cũng có thể bình luận câu hỏi của mình.
Truy cập Bypass Google Account APK để tải file APK nhé
Tham gia cuộc trò chuyện