JS Base64转图片|极客教程

JS Base64转图片

在前端开发中，经常会遇到需要将图片以 Base64 的形式嵌入到代码中的情况。Base64 是一种将二进制数据转换成 ASCII 字符的编码方式，它可以将图片等二进制文件转换成文本形式进行传输和展示。在本文中，我们将详细介绍如何使用 JavaScript 将 Base64 字符串转换为图片，并展示实际的代码示例。

Base64 编解码

在进行 Base64 转换之前，我们先简单了解一下 Base64 的原理。Base64 编码是将二进制数据转换成一种可打印字符的方法，它基于 64 个可打印字符来表示所有的数据，这些字符包括大小写字母、数字以及一些特殊字符。Base64 编码表如下：

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/

Base64 编码的过程可以通过以下步骤来实现：

将待编码的二进制数据每 3 个字节分为一组（每个字节 8 位），如不足 3 个字节则用 0 补齐；
将每组 3 个字节转换成 4 个 6 位的数；
将得到的 24 位数拼接成一个整数，并根据编码表转换成相应的字符；
如果原始数据不是 3 的倍数，对末尾的字符进行补位，生成 =。

实现 Base64 转图片

接下来，我们将使用 JavaScript 来实现将 Base64 字符串转换成图片的过程。首先，我们可以通过以下代码将图片转换成 Base64 字符串：

function imageToBase64(url, callback) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  const img = new Image();
  img.crossOrigin = 'Anonymous'; // 解决跨域
  img.onload = function() {
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0, img.width, img.height);
    const dataURL = canvas.toDataURL('image/png');
    callback(dataURL);
  };
  img.src = url;
}

const imageUrl = 'https://example.com/image.jpg';
imageToBase64(imageUrl, function(base64) {
  console.log(base64);
});

上述代码中，imageToBase64 函数接收一个图片的 URL 参数，并通过 canvas 来将图片绘制到画布上，最后通过 toDataURL 方法将画布内容转换成 Base64 字符串。你可以将图片的 URL 替换成你想要转换的图片，然后通过回调函数获取到 Base64 字符串。

接下来，我们将实现将 Base64 字符串转换成图片的过程。在 JavaScript 中，我们可以通过创建一个 img 元素来显示 Base64 字符串所代表的图片。以下是示例代码：

function base64ToImage(base64, containerId) {
  const image = new Image();
  image.src = base64;
  const container = document.getElementById(containerId);
  container.appendChild(image);
}

const base64String = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABHNCSVQICAgIfAhkiAAAAl5JREFUOI3Fk1ERgDAM1FLjQSUtUbCNUGhVSgo6v+lsYt9pdxJGIrZZPWAvPEpFLufQd1bt9fAkLBi9jPnCLze2DbxM+Z2iLn6M98Pl63EH4KFiaVOyZL64Z5V6Fpu8zSP2lsLZT8u7auvuKmcStjj26rCd14g/tn...';

base64ToImage(base64String, 'imageContainer');

在上述代码中，base64ToImage 函数接收两个参数，第一个是 Base64 字符串，第二个是图片要显示的容器的 ID。我们创建一个新的 Image 对象，并将 Base64 字符串赋值给 src 属性，最后通过 appendChild 方法将该图片添加到容器中。