Share code Công cụ chuyển đổi ảnh JPG, PNG sang WEBP cho Blogger

Anh Trai Nắng
0
Share code và hướng dẫn cài đặt Công cụ chuyển đổi ảnh JPG, PNG sang WEBP cho Blogger đơn giản.

Định dạng hình ảnh Webp là một định dạng hình ảnh tương đối mới với chất lượng hình ảnh tốt và nén được phát triển bởi Google. Nếu bạn có một hình ảnh định dạng JPG muốn chuyển nó sang định dạng WebP thì công cụ dưới đây sẽ giúp bạn làm điều đó.

Share code Công cụ chuyển đổi ảnh JPG, PNG sang WEBP cho Blogger
Công cụ chuyển đổi ảnh JPG, PNG sang WEBP cho Blogger.
XEM DEMO

Code chuyển đổi ảnh JPG, PNG sang WEBP

<div class="layout">
    <div class="layout1">
      <input accept="image/*" multiple="" type="file" />
    </div>
    <div id="previews"></div>
  </div>
<style>#sidebar-wrapper{display:none !important;} #main-wrapper{width:100%!important;} #entry-post{ width:100%!important;}.layout1{background-color: var(--widget-bg);margin: 0 0 30px;border: 1px solid var(--border-color);;border-radius: 10px;position: relative;clear: both;display: flex;justify-content: center;} input[type=file] { margin: 20px 0; } img { max-height: 100%; max-width: 100%; }#previews > div { box-sizing: border-box; height:100%; padding: 20px 0; display: inline-flex; justify-content: center; align-items: center; vertical-align: top; } #previews > div:after{ Content:'Click To Download'; display:block; font-weight:bold; font-size:10px; position: absolute;border:1px solid silver; padding: 2px 9px; background: #fff; } #previews > div > progress { width: 80%; } .layout { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; align-content: stretch; }</style>
<script>
//<![CDATA[
  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); new Promise(function (resolve, reject) { let rawImage = new Image(); rawImage.addEventListener("load", function () { resolve(rawImage); }); rawImage.src = URL.createObjectURL(file); }) .then(function (rawImage) { 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) { return new Promise(function (resolve, reject) { let scaledImg = new Image(); scaledImg.addEventListener("load", function () { resolve({imageURL, scaledImg}); }); scaledImg.setAttribute("src", imageURL); }); }) .then(function (data) { 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); 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);//]]>
</script>

Hướng dẫn cài đặt

  • Bước 1: Vào tạo Trang mới
  • Bước 2: Chuyển sang Chế độ xem HTML
  • Bước 3: Copy và Paste tất cả code trên vào trang
  • Bước 4: Nhấn Xuất bản và xem kết quả.

Hình ảnh webp nhỏ hơn hình ảnh JPEG và PNG thông thường với kích thước tệp giảm 25-35%. Điều này làm giảm kích thước tải trang web và cải thiện hiệu suất.

Chúc các bạn thành công!

Đăng nhận xét

HƯỚNG DẪN BÌNH LUẬN

0 Nhận xét

Đăng nhận xét (0)

#buttons=(Thanks!) #days=(7)

À mình có làm website tăng tương tác MXH giá rẻ. Mọi người nếu cần thì ghé sử dụng các dịch vụ thử nha. Ghé xem dịch vụ
Ok, Go it!

HƯỚNG DẪN BÌNH LUẬN

Chèn link

Sử dụng công cụ Tạo link

Chèn hình ảnh

LINK_ANH - sử dụng công cụ upload ảnh. Và chỉ cần lấy link ảnh chèn vào bình luận là ảnh tự động hiển thị.

Định dạng chữ

<b>Chữ in đậm</b>
<i>Chữ in nghiêng</i>
<u>Chữ gạch chân</u>
<strike>Chữ gạch ngang</strike>

Chèn một đoạn Code

Đầu tiên sử dụng công cụ này để mã hóa đoạn code muốn chèn.
Sau đó dùng thẻ [code] CODE_ĐÃ_MÃ_HÓA [/code]

Khác

Nhập Email bạn hay dùng để nhận thông báo khi mình trả lời bình luận của bạn.
Vui lòng không nhập bất kỳ Liên kết Spam nào trong hộp nhận xét.
Tích vào ô "Thông báo cho tôi" để nhận thông báo nội dung phản hồi của bình luận.
Chèn emoji: Nhấn tổ hợp phím “Windows + . (dấu chấm)”

Đã hiểu