玩转JS：轻松实现base64、url和blob的无缝转换

2023-10-15 14:13:03

图片格式转换：在 Web 开发中的艺术

在 Web 开发的广阔领域中，我们经常需要处理不同格式的数据，例如图像、音频和视频。这些数据可能以 base64、URL 或 blob 等格式存储或传输。为了满足不同的需求，掌握如何将这些格式的数据相互转换至关重要。

URL：图片显示的简单途径

URL 可能是显示图片最简单、最直接的方法。它指向图片的存储地址，当浏览器加载页面时，它将根据 URL 加载并显示图片。这种方法适用于大多数情况，尤其适用于图片较小且色彩层次不丰富的情况。

Base64：将图片编码为字符串

Base64 是一种将二进制数据编码为字符串的格式。它通常用于将图片编码为字符串，以便将图片嵌入 HTML 或 CSS 中。然而，Base64 编码后的字符串非常庞大，会显著增加 HTML 页面的大小，从而影响加载速度。因此，不建议将 Base64 用于较大或色彩层次丰富的图片。

Blob：存储二进制数据

Blob 是一种存储二进制数据的对象。它可以存储任何类型的数据，包括图片、音频和视频。Blob 对象表示不可变的原始数据，不一定是 JavaScript 原生格式的数据。

转换技巧：精通格式转换

掌握了这些基本格式之后，我们现在将重点放在将它们相互转换的技巧上。

从 URL 转换为 Base64

const img = document.getElementById('image');
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
const dataURL = canvas.toDataURL('image/png');

从 Base64 转换为 URL

const imgData = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAACXBIWXMAAAsTAAALEwEAmpwYAAAKT2lDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVNnVFPpFj333vRCS4iAlEtvUhUIIFJCi4AUkSYqIQkQSoghodkVUcERRUUEG8igiAOOjoCMFVEsDIiO8AX18ZpLhJ9EwUk3Q9uKv6m3kZ9N94Pn+Fmq4kXt21h2XP4yB/dPl2Vt2h5ezkXr1wacvPCBDoBNQQZIwjdExQuO3k5gviZ5xa5rO97+08Gmli8JnH55dAmVYI8ImDvBqMFwUaX12HTTXPI7iii4EVTwAABDoPJmy1kYWBAgAAX3pvd297+38rXq+94uoaa616HC0853y9HQOont8686581p562/YiibepD+MgQDD8W9MlJEE6T7whmOpeFE2L72EW+EAN+cvdT/qUBEoNiH18T3keVg9NWruNmRubwW9ya869u(+8/1i18TzX85+VNj6/3i2E8n3j6/3S9i8/3uCX+NDkZW4987uS/u/zsK9u/3c+855mv/q+83pPe+E8/hv9v/q9v/39999/+3X3/8vnfjfj/9v/4P+G8+G8+G12G8+83o/uf/v/IKSx+93p/000+S0+NGj8pgr8r0f13+2/93suHaNQaTIVFzl3IaaYTk2IJl3/68+uP5QpBAP+0bcPQP/0HlPpt8sRlXLl+QmZQcI/I9790+GF2I0U+EG2L72EW+EAN+cvdT/qUBEoNiH18T3keVg9NWruNmRubwW9ya869u(+8/1i18TzX85+VNj6/3i2E8n3j6/3S9i8/3uCX+NDkZW4987uS/u/zsK9u/3c+855mv/q+83pPe+E8/hv9v/q9v/39999/+3X3/8vnfjfj/9v/4P+G8+G8+G12G8+83o/uf/v/IKSx+93p/000+S0+NGj8pgr8r0f13+2/93suHaNQaTIVFzl3IaaYTk2IJl3/68+uP5QpBAP+0bcPQP/0HlPpt8sRlXLl+QmZQcI/I9790+GF2I0U+EG2L72EW+EAN+cvdT/qUBEoNiH18T3keVg9NWruNmRubwW9ya869u(+8/1i18TzX85+VNj6/3i2E8n3j6/3S9i8/3uCX+NDkZW4987uS/u/zsK9u/3c+855mv/q+83pPe+E8/hv9v/q9v/39999/+3X3/8vnfjfj/9v/4P+G8+G8+G12G8+83o/uf/v/IKSx+93p/000+S0+NGj8pgr8r0f13+2/93suHaNQaTIVFzl3IaaYTk2IJl3/68+uP5QpBAP+0bcPQP/0HlPpt8sRlXLl+QmZQcI/I9790+GF2I0U+EG2L72EW+EAN+cvdT/qUBEoNiH18T3keVg9NWruNmRubwW9ya869u(+8/1i18TzX85+VNj6/3i2E8n3j6/3S9i8/3uCX+NDkZW4987uS/u/zsK9u/3c+855mv/q+83pPe+E8/hv9v/q9v/39999/+3X3/8vnfjfj/9v/4P+G8+G8+G12G8+83o/uf/v/IKSx+93p/000+S0+NGj8pgr8r0f13+2/93suHaNQaTIVFzl3IaaYTk2IJl3/68+uP5QpBAP+0bcPQP/0HlPpt8sRlXLl+QmZQcI/I9790+GF2I0U+EG2L72EW+EAN+cvdT/qUBEoNiH18T3keVg9NWruNmRubwW9ya869u(+8/1i18TzX85+VNj6/3i2E8n3j6/3S9i8/3uCX+NDkZW4987uS/u/zsK9u/3c+855mv/q+83pPe+E8/hv9v/q9v/39999/+3X3/8vnfjfj/9v/4P+G8+G8+G12G8+83o/uf/v/IKSx+93p/000+S0+NGj8pgr8r0f13+2/93suHaNQaTIVFzl3IaaYTk2IJl3/68+uP5QpBAP+0bcPQP/0HlPpt8sRlXLl+QmZQcI/I9790+GF2I0U+EG';
const img = document.createElement('img');
img.src = dataURL;
document】