JS base64转图片|极客笔记

JS base64转图片

在前端开发中，我们经常会遇到将 base64 编码的图片转换成真实的图片格式的需求。在本文中，我们将介绍如何使用 JavaScript 将 base64 编码的图片转换成图片文件，并显示在页面上。

什么是 base64 编码

Base64 是一种用于表示二进制数据的编码方式，通常用于将二进制数据以文本形式传输或嵌入到文档中。在前端开发中，我们经常会将图片转换成 base64 编码的格式，以便在页面中直接显示图片而不需要额外的请求。

如何将 base64 转换成图片

我们可以使用 JavaScript 中的 Blob 对象和 URL 对象来将 base64 编码的图片转换成图片文件。以下是一个简单的示例代码：

// base64 图片编码
const base64Image = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAABscyPAAAAOXRFWHRTb2Z0d2FyZQBNYXRwbG90bGliIHZlcnNpb24zLjQuMywgaHR0cHM6Ly9tYXRwbG90bGliLm9yZy/Mnk+d5AAAACXBIWXMAAA7EAAAOxAGVKw4bAAABHUlEQVQ4jbWTvUvCUBTFf0r8EJVYokEMFhCQxoiUKB1YUmtI/gAvwZp6wbDGmIZu00HEoTIVcT1MokFi5FoH3aR0LcWFxtPaoKeoNpDc3eef/8zr35n57ijxEw2gKwK9VKwDjjS+5q2GyDA0ryH4Z8T0tmxDM9SnvvKXw3Q4lgCxQ6Ae9WfO7egs5QJ1tRpYFbKuqgCp9gkeQ1edQnzI5JPvOdge1D+QOi3LjXXDTwreXZLgV1F+/APwBjw0tK41R+XM/G+TZf0GR8I5gJljZQdPAedH8cJ+gLo1+qri9EuY5Z9lDQjGLzVgFvx1Rhc8GsUY1pUxEKfBkJYboluow/U8ITe9MUjUUZpLd8FcdSuhArCfqu9lIZ10wQiC4RnjyAvcjef1F0lKRie5ksPS9nCr1mdIDRbEwmg6Vn8DBcVzY56vtLJFcD7DgfsrgU0jP0exTBy/cQJ9HIeBnLBidPnB7AGALF5gXukqUAHwAbAqGg6A1XwAAAABJRU5ErkJggg==';

// 创建 Blob 对象
const byteCharacters = atob(base64Image.split(',')[1]);
const byteNumbers = new Array(byteCharacters.length);
for(let i = 0; i < byteCharacters.length; i++) {
  byteNumbers[i] = byteCharacters.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
const blob = new Blob([byteArray], { type: 'image/png' });

// 创建 URL 对象
const imageUrl = URL.createObjectURL(blob);

// 创建 img 元素
const img = document.createElement('img');
img.src = imageUrl;
document.body.appendChild(img);

在上面的示例中，我们首先定义了一个 base64 编码的图片字符串 base64Image，然后将其转换成字节数组 byteArray，创建一个 Blob 对象 blob，最后通过 URL.createObjectURL() 方法生成图片的 URL 地址，并最终创建一个 img 元素将图片显示在页面上。