为了实现纯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技术站
微信扫一扫 
支付宝扫一扫 