Blog iTeam OS

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 ả

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
Chuyển đổi nhiều định dạng hình ảnh sang WebP bằng JavaScript
Demo

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é