js base 64 解码为图片

js base 64 解码为图片

在 web 开发中，经常会遇到需要将图片以 base64 编码的形式存储或传输的情况。而有时候，我们又需要将 base64 编码的图片解码成原始的图片格式，以便于显示或进一步处理。在 JavaScript 中，可以使用一些方法将 base64 字符串解码为图片。

方法一：使用 canvas

首先，我们可以通过创建一个隐藏的 canvas 元素，然后将 base64 字符串作为图片源，然后将画布上的图片解码到一个新的图片对象上。

function base64toImage(base64) {
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    var img = new Image();
    img.src = 'data:image/jpeg;base64,' + base64;
    img.onload = function() {
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage(img, 0, 0);
        var newImage = new Image();
        newImage.src = canvas.toDataURL();
        document.body.appendChild(newImage);
    };
}

// 调用方法
var base64String = "iVBORw0KGgoAAAANSUhEUgAAAOMAAACeCAYAAACKOaIBAAAgAElEQVR4AFLIx5oq9iZ+3dIAQX..."; // base64 字符串
base64toImage(base64String);

上面的代码中，我们创建了一个名为 base64toImage 的函数，它接受一个 base64 字符串作为参数。我们通过创建一个新的画布和图片对象来加载 base64 字符串中的图片，然后将画布内容绘制到一个新的图片对象上，最后将新的图片对象添加到页面上。这样我们就成功地将 base64 字符串解码成了图片。

方法二：使用 Blob 对象

除了使用 canvas 的方法，我们还可以通过创建 Blob 对象和 URL 对象来将 base64 字符串转换成图片。

function base64toImage(base64) {
    var byteCharacters = atob(base64);
    var byteNumbers = new Array(byteCharacters.length);
    for (var i = 0; i < byteCharacters.length; i++) {
        byteNumbers[i] = byteCharacters.charCodeAt(i);
    }
    var byteArray = new Uint8Array(byteNumbers);
    var blob = new Blob([byteArray], {type: 'image/jpeg'});
    var imageUrl = URL.createObjectURL(blob);

    var imageElement = document.createElement('img');
    imageElement.src = imageUrl;
    document.body.appendChild(imageElement);
}

// 调用方法
var base64String = "iVBORw0KGgoAAAANSUhEUgAAAOMAAACeCAYAAACKOaIBAAAgAElEQVR4AFLIx5oq9iZ+3dIAQX..."; // base64 字符串
base64toImage(base64String);

在上述代码中，我们创建了另一个名为 base64toImage 的函数，它接受一个 base64 字符串作为参数。我们先使用 atob 函数解码 base64 字符串，然后将解码后的字节字符数组转换成 Uint8Array 格式，并创建一个 Blob 对象。接着，我们通过 URL.createObjectURL 方法将 Blob 对象转换为图片的 URL，最后将图片添加到页面中。

通过以上两种方法，我们可以将 base64 字符串成功解码成图片，并在页面中显示出来，以便于用户查看或进行后续处理。