纯javascript前端实现base64图片下载(兼容IE10+)

2023年6月11日上午7:05 • JavaScript

为了实现纯javascript前端实现base64图片下载，我们需要按照以下步骤进行操作：

1. 将base64数据转换为Blob格式

Base64是一种将二进制数据编码成文本数据的方法，而Blob是一种数据对象集合，表示一个不可变、原始数据的类似文件对象的实体。

我们可以通过以下代码将base64数据转换为Blob格式：

function base64ToBlob(base64Data, contentType) {
    contentType = contentType || '';
    const sliceSize = 1024;
    const byteCharacters = atob(base64Data);
    const byteArrays = [];

    for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
        const slice = byteCharacters.slice(offset, offset + sliceSize);

        const byteNumbers = new Array(slice.length);
        for (let i = 0; i < slice.length; i++) {
            byteNumbers[i] = slice.charCodeAt(i);
        }

        const byteArray = new Uint8Array(byteNumbers);
        byteArrays.push(byteArray);
    }

    return new Blob(byteArrays, { type: contentType });
}

该函数首先初始化要返回的Blob对象的数据类型，然后通过使用atob函数将base64数据转换为二进制数据。接着将二进制数据分割为大小为1KB的部分，并将每个部分转换为一个Uint8Array对象。最后通过传递数据部分数组创建Blob实例。

2. 使用Blob对象生成下载链接

我们可以在浏览器中使用URL.createObjectURL来生成一个可下载的链接。以下代码用Blob对象生成下载链接：

function createDownloadLink(blob, filename) {
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');

    a.href = url;
    a.download = filename || 'download';
    a.style.display = 'none';

    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);

    window.URL.revokeObjectURL(url);
}

该函数接受Blob格式的数据和一个可选文件名作为参数，并使用window.URL.createObjectURL()方法创建一个包含Blob的URL。在创建a标签后，将a的href属性设置为用于下载Blob的URL，将download属性设置为文件名。然后将a元素添加到文档树中进行模拟点击，完成下载。最后使用window.URL.revokeObjectURL()方法释放创建的URL资源。

示例1

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Base64 to Image Download</title>
</head>
<body>
    <input type="text" id="base64Input" placeholder="Enter Base64 String">
    <button id="downloadBtn">Download</button>
</body>
<script src="app.js"></script>
</html>

JavaScript

const btn = document.getElementById('downloadBtn');
btn.addEventListener('click', () => {
    const base64Data = document.getElementById('base64Input').value;
    if (base64Data) {
        const blob = base64ToBlob(base64Data, 'image/png');
        createDownloadLink(blob, 'image.png');
    } else {
        alert('Please enter base64 data!');
    }
});

当用户单击Download按钮时，它将检索输入的Base64数据，并将其转换为Blob格式。如果数据无效，则弹出一个警告框。否则，它将使用上述的createDownloadLink函数生成可用于下载的链接。

示例2

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Download Image Button</title>
</head>
<body>
    <button id="downloadBtn" data-image="data:image/png;base64,iVBORw0KG...">Download Image</button>
</body>
<script src="app.js"></script>
</html>

JavaScript

const btn = document.getElementById('downloadBtn');
const imageBase64Data = btn.dataset.image;

btn.addEventListener('click', () => {
    const blob = base64ToBlob(imageBase64Data, 'image/png');
    createDownloadLink(blob, 'image.png');
});

当用户单击Download Image按钮时，它将从按钮的data-image属性中检索Base64数据，并将其转换为Blob格式。然后使用createDownloadLink函数生成可用于下载的链接。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：纯javascript前端实现base64图片下载(兼容IE10+) - Python技术站