Liên hệ Zalo 0948.713.329 Để Nhận Tư Vấn Hỗ Trợ

Hướng dẫn tạo trang chuyển đổi ảnh WebP cho website/blog chuẩn nhất

Hướng dẫn tạo trang chuyển đổi ảnh WebP cho website/blog chuẩn nhất

Cập nhật ngày Bởi
Chuyển Đổi Ảnh Sang WebP Ngay Trên Trình Duyệt: Một Công Cụ Tiện Lợi!

Bạn đang tìm kiếm một công vụ chuyển đổi các tệp ảnh sang định dạng WebP không cần phải tải xuống và cài đặt phần mềm? Đến đây, chúng tôi đã phát triển một công cụ đơn giản và hiệu quả giúp bạn thực hiện công việc này ngay trên trình duyệt web của mình.

Hướng dẫn tạo trang chuyển đổi ảnh WebP cho website/blog chuẩn nhất

Tính Năng Nổi Bật:

Dễ sử dụng: Chỉ cần chọn một tệp ảnh và nhấn nút "Convert to WebP".
Chất lượng ổn định: Chúng tôi sử dụng công nghệ chuyển đổi để đảm bảo chất lượng hình ảnh không bị giảm sút.

Tải về nhanh chóng: Sau khi chuyển đổi, bạn có thể tải về ảnh WebP ngay lập tức.

Hướng Dẫn Sử Dụng:

Chọn một tệp ảnh bằng cách nhấp vào nút "Browse" và chọn tệp cần chuyển đổi.
Nhấn nút "Convert to WebP" và đợi quá trình chuyển đổi hoàn tất.
Liên kết tải về sẽ hiển thị, bạn chỉ cần nhấp vào đó để lưu trữ ảnh WebP đã chuyển đổi.

Mình Share toàn bộ code cho các bạn luôn

<style>
/*<![CDATA[*/
#convert{max-width:600px;background-color:#f4f4f4;margin:auto;padding:20px;text-align:center}
#convert button{display:none;padding:10px 20px;font-size:16px;background-color:#3498db;color:#fff;border:none;cursor:pointer;transition:background-color 0.3s ease;margin:auto;margin-top:20px}
#convert button:hover{background-color:#2980b9}
#convert a{display:none;margin-top:20px;padding:10px 20px;font-size:16px;background-color:#27ae60;color:#fff;text-decoration:none;border-radius:5px;transition:background-color 0.3s ease}
#convert a:hover{background-color:#219d54}
#comparisonInfo{display:none;margin-top:20px;padding:10px;border:1px solid #ccc;background-color:#f8f8f8}
#comparisonInfo p{margin:5px 0}
#comparisonInfo span{font-weight:bold;color:#007bff}
.custom-container{display:flex;flex-wrap:wrap;justify-content:space-between;padding:20px}
.column{flex:1;margin:10px;background-color:#f0f0f0;padding:15px;box-sizing:border-box}
#imgviewer img{max-width:100%;margin:auto}
/*]]>*/
</style>
<div id="convert">
  <input accept="image/*" id="imageInput" type="file" />
  <button id="convertButton" onclick="convertImage()">Convert to WebP</button>
  <a download="converted_image.webp" id="downloadLink" style="display: none;">Download WebP</a>
  <div id="comparisonInfo" style="display: none;">
    <div class="custom-container">
      <div class="column" id='imgviewer'>
      </div>
      <div class="column">
        <p><strong>So sánh 2 file:</strong></p>
        <p>Kích thước trước: <span id="sizeBefore"></span></p>
        <p>Kích thước sau: <span id="sizeAfter"></span></p>
        <p>Định dạng trước: <span id="formatBefore"></span></p>
        <p>Định dạng sau: <span id="formatAfter"></span></p>
      </div>
    </div>
  </div>
</div>
<script>
  //<![CDATA[
  document.addEventListener('DOMContentLoaded', function() {
    const inputElement = document.getElementById('imageInput');
    const convertButton = document.getElementById('convertButton');
    inputElement.addEventListener('change', function() {
      convertButton.style.display = 'block';
    });
    convertButton.addEventListener('click', function() {
      convertImage();
    });
  });

  function convertImage() {
    const inputElement = document.getElementById('imageInput');
    const downloadLink = document.getElementById('downloadLink');
    const convertButton = document.getElementById('convertButton');
    const comparisonInfo = document.getElementById('comparisonInfo');
    const sizeBefore = document.getElementById('sizeBefore');
    const sizeAfter = document.getElementById('sizeAfter');
    const formatBefore = document.getElementById('formatBefore');
    const formatAfter = document.getElementById('formatAfter');
    const imgViewer = document.getElementById('imgviewer'); // Get the imgviewer column
    const file = inputElement.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = function(e) {
        const img = new Image();
        img.onload = function() {
          const canvas = document.createElement('canvas');
          canvas.width = img.width;
          canvas.height = img.height;
          const context = canvas.getContext('2d');
          context.drawImage(img, 0, 0, img.width, img.height);
          canvas.toBlob((blob) => {
            const url = URL.createObjectURL(blob);
            // Lấy thông tin ảnh gốc
            const originalFileSize = (file.size / 1024).toFixed(2) + ' KB';
            const originalFileFormat = file.type;
            // Lấy tên file ảnh gốc
            const originalFileName = file.name;
            // Lấy thông tin ảnh WebP
            const webpFileSize = (blob.size / 1024).toFixed(2) + ' KB';
            const webpFileFormat = 'image/webp';
            // Hiển thị thông tin so sánh
            sizeBefore.textContent = originalFileSize;
            sizeAfter.textContent = webpFileSize;
            formatBefore.textContent = originalFileFormat;
            formatAfter.textContent = webpFileFormat;
            comparisonInfo.style.display = 'block';
            // Đặt tên liên kết tải về và tải về
            downloadLink.href = url;
            // Sử dụng tên file ảnh gốc để đặt tên cho ảnh WebP đã chuyển đổi
            downloadLink.download = originalFileName.replace(/\.[^/.]+$/, "") + '.webp';
            downloadLink.style.display = 'block';
            convertButton.style.display = 'none'; // Ẩn nút Convert sau khi chuyển đổi
            // Hiển thị ảnh trong cột imgviewer
            const convertedImgElement = document.createElement('img');
            convertedImgElement.src = url;
            convertedImgElement.alt = 'Converted Image';
            imgViewer.innerHTML = ''; // Clear previous content
            imgViewer.appendChild(convertedImgElement);
          }, 'image/webp');
        };
        img.src = e.target.result;
      };
      reader.readAsDataURL(file);
    }
  }
  //]]>
</script>

Comments

Call
0948713329
Contact Me on Zalo