WebP 是现代图像格式中的“通用选手”，在多数情况下比 PNG、JPEG、GIF 都更节省空间，同时功能更全面。但是某些网站只支持上传 png 或者 jpg，所以要将 webp 转为 png。
1.base64ToBlob 中要转为 8位字节
base64ToBlob 中要转为 8位字节是为了还原出原始的二进制文件数据（字节流），因为只有 JS 字符串的每个字符是 16 位（UTF-16），而一组真实的 8 位字节流 才能被浏览器或文件系统识别成 图片、音频、视频、压缩包等二进制文件。 Base64 解码后的字符都是 0~255 的字节（低8位有效，高8位都是0），可以用 charCodeAt 去获取 真实8位字节值
2.Base64 => blob => 下载
| 维度 | 直接 Base64 Data URL | Base64 → Blob → 下载 |
|---|---|---|
| 内存使用 | 高，Base64 是冗长的字符串，占用较大内存。base64 编码的体积比原始二进制大 约 33% 【原因：每 3 个字节（24 bit）编码成 4 个字符（每个字符 6 bit）】 | 低，Blob 直接存储二进制，内存开销更小 |
| 文件大小限制 | 受限，浏览器对 URL 长度有限制 | Blob URL 本质上不是存放文件内容的“字符串”，而是浏览器内部为那个二进制数据对象创建的一个“指针”或“句柄”。它只是一个很短的标识符，指向浏览器内存（或者磁盘）中的真实文件数据，所以它不受 URL 长度限制 |
| 兼容性 | 较差，部分老旧浏览器和环境支持不佳 | 较好，主流浏览器和环境均支持 |
| 控制粒度 | 低，只能用于简单下载 | 高，支持内存释放、分片、上传、文件操作等功能 |
| 安全性 | 低，Base64 数据直接暴露在 URL 中，有一定XSS风险 | 高，Blob URL 是临时生成，外部无法直接访问内容 |
<div class="input-area">
<input type="file" id="webp-input" accept=".webp" onchange="javascript:preview()" />
<div id="img-preview">
</div>
<button onclick="convertWebp('image/png')">转换成png</button>
<button onclick="convertWebp('image/jpg')">转换成jpg</button>
</div>
<div class="output-area" id="output-area">
<!-- 下载链接将在这里动态生成 -->
</div>
<script>
function preview(){
const imgContent = document.getElementById('img-preview');
const file = document.getElementById("webp-input").files[0];
imgContent.innerHTML = '';
const img = document.createElement('img');
img.src = URL.createObjectURL(file); // 将上传的文件对象转为临时URL(blob URL)
imgContent.appendChild(img);
img.onload = function() {
URL.revokeObjectURL(this.src); // 图片加载完成后，释放上面创建的临时URL占用的内存资源
}
}
function base64ToBlob(base64, mimeType) {
const byteString = atob(base64.split(',')[1]); // 拿到base6内容部分，将其解码为字符串
const ab = new ArrayBuffer(byteString.length); // 创建ArrayBuffer
const ia = new Uint8Array(ab); // 创建字节数组视图，可以像数组一样操作每个字节
for (let i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i); // 转换每个字符为字节
}
return new Blob([ab], { type: mimeType });
}
function downloadBlob(blob, filename) {
const url = URL.createObjectURL(blob); // 生成 blob URL
const link = document.createElement('a');
link.href = url;
link.download = filename;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(url);
}
function convertWebp(mimeType) {
const inputElement = document.getElementById('webp-input');
const file = inputElement.files[0];
if (!file) {
alert('Please select a WebP file first.');
return;
}
const reader = new FileReader();
reader.onload = function(event) {
const img = new Image();
img.onload = function() {
const canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
const ctx = canvas.getContext('2d'); // 获取canvas的2D渲染上下文对象ctx，用于绘图
ctx.drawImage(img, 0, 0, img.width, img.height); // 将图片绘制到canvas上（从左上角开始，宽高与图片一致）
const base64 = canvas.toDataURL(mimeType); // 将canvas按指定格式导出成base64数据URL，如：data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA...
const blob = base64ToBlob(base64, mimeType);
const filename = mimeType === 'image/png' ? 'converted.png' : 'converted.jpg';
downloadBlob(blob, filename);
};
img.src = event.target.result;
};
reader.readAsDataURL(file);
}
</script>
