atob
Функция будет декодировать в кодировке Base64 строку в новую строку с символом для каждого байта двоичных данных.
const byteCharacters = atob(b64Data);
Кодовая точка каждого символа (charCode) будет значением байта. Мы можем создать массив байтовых значений, применяя это, используя .charCodeAt
метод для каждого символа в строке.
const byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
byteNumbers[i] = byteCharacters.charCodeAt(i);
}
Вы можете преобразовать этот массив байтовых значений в реальный типизированный байтовый массив, передав его Uint8Array
конструктору.
const byteArray = new Uint8Array(byteNumbers);
Это, в свою очередь, может быть преобразовано в BLOB, обернув его в массив и передав его Blob
конструктору.
const blob = new Blob([byteArray], {type: contentType});
Код выше работает. Однако производительность можно немного улучшить, обработав byteCharacters
меньшие кусочки, а не все сразу. В моем грубом тестировании 512 байт, кажется, хороший размер среза. Это дает нам следующую функцию.
const b64toBlob = (b64Data, contentType='', sliceSize=512) => {
const byteCharacters = atob(b64Data);
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);
}
const blob = new Blob(byteArrays, {type: contentType});
return blob;
}
const blob = b64toBlob(b64Data, contentType);
const blobUrl = URL.createObjectURL(blob);
window.location = blobUrl;
Полный пример:
const b64toBlob = (b64Data, contentType='', sliceSize=512) => {
const byteCharacters = atob(b64Data);
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);
}
const blob = new Blob(byteArrays, {type: contentType});
return blob;
}
const contentType = 'image/png';
const b64Data = 'iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';
const blob = b64toBlob(b64Data, contentType);
const blobUrl = URL.createObjectURL(blob);
const img = document.createElement('img');
img.src = blobUrl;
document.body.appendChild(img);