在JavaScript的一个base64字符串创建的Blob [英] Creating a Blob from a base64 string in JavaScript
问题描述
我的base64恩codeD字符串中的二进制数据。
VAR的contentType =图像/ PNG';
VAR b64Data = 'iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';
我想创建一个的blob：包含此数据并显示给用户的URL
VAR一滴=新的Blob（???? {类型：contentType中}）;
VAR blobUrl = URL.createObjectURL（BLOB）;window.location的= blobUrl;
我一直没能弄清楚如何创建的Blob 。
在某些情况下，我能够通过使用数据，以避免这一点： URL代替
VAR dataUrl ='数据：'+的contentType +';的base64，'+ b64Data;window.location的= dataUrl;
然而，在大多数情况下，数据：的URL会很大。
我如何去code一个base64字符串到的Blob 对象在JavaScript中？
的 ATOB 功能将取消codeA的base64恩codeD串入一个新的串与用于二进制数据的每个字节的字符。
VAR byteCharacters = ATOB（b64Data）;
每个人物的code点（字符code）将是字节的值。我们可以通过应用此使用的字符串中的每个字符的 .char $ C $猫方法创建字节值的数组。
VAR byteNumbers =新阵列（byteCharacters.length）;
对于（VAR I = 0; I＆LT; byteCharacters.length;我++）{
byteNumbers [I] = byteCharacters.char $ C $猫（I）
}
您可以通过它传递给 Uint8Array 构造这个数组的字节值转换成真正的类型字节数组。
VAR的字节数组=新Uint8Array（byteNumbers）;
这反过来又可以通过包装它在一个数组将它传递给的Blob 构造转换为的Blob 。
VAR一滴=新的Blob（[的字节数组] {类型：contentType中}）;
在code以上的作品。然而，性能可以通过更小的片段处理 byteCharacters ，而不是一下子可以提高一点点。我粗略的测试512字节似乎是一个很好的片大小。这给了我们下面的函数。
函数b64toBlob（b64Data，则contentType，sliceSize）{
的contentType = ||的contentType '';
sliceSize = sliceSize || 512; VAR byteCharacters = ATOB（b64Data）;
VAR的ByteArray = []; 对于（VAR偏移= 0;偏移LT; byteCharacters.length;胶印+ = sliceSize）{
VAR片= byteCharacters.slice（偏移，偏移+ sliceSize）; VAR byteNumbers =新阵列（slice.length）;
对于（VAR I = 0; I＆LT; slice.length;我++）{
byteNumbers [I] = slice.char $ C $猫（I）
} VAR的字节数组=新Uint8Array（byteNumbers）; byteArrays.push（字节阵列）;
} VAR BLOB =新的Blob（ByteArray对象，{类型：contentType中}）;
返回Blob的;
}
VAR BLOB = b64toBlob（b64Data，则contentType）;
VAR blobUrl = URL.createObjectURL（BLOB）;window.location的= blobUrl;
完整的例子：
函数b64toBlob（b64Data，则contentType，sliceSize）{\r
的contentType = ||的contentType '';\r
sliceSize = sliceSize || 512;\r
\r
VAR byteCharacters = ATOB（b64Data）;\r
VAR的ByteArray = [];\r
\r
对于（VAR偏移= 0;偏移LT; byteCharacters.length;胶印+ = sliceSize）{\r
VAR片= byteCharacters.slice（偏移，偏移+ sliceSize）;\r
\r
VAR byteNumbers =新阵列（slice.length）;\r
对于（VAR I = 0; I＆LT; slice.length;我++）{\r
byteNumbers [I] = slice.char $ C $猫（I）\r
}\r
\r
VAR的字节数组=新Uint8Array（byteNumbers）;\r
\r
byteArrays.push（字节阵列）;\r
}\r
\r
VAR BLOB =新的Blob（ByteArray对象，{类型：contentType中}）;\r
返回Blob的;\r
}\r
\r
\r
VAR的contentType =图像/ PNG';\r
VAR b64Data = 'iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';\r
\r
VAR BLOB = b64toBlob（b64Data，则contentType）;\r
VAR blobUrl = URL.createObjectURL（BLOB）;\r
\r
VAR IMG =使用document.createElement（'IMG'）;\r
img.src = blobUrl;\r
document.body.appendChild（IMG）; \r
...或ES6：
使用严格的;\r
\r
常量b64toBlob =（b64Data，则contentType =''，sliceSize = 512）=＆GT; {\r
常量byteCharacters = ATOB（b64Data）;\r
常量的ByteArray = [];\r
\r
对于（让偏移= 0;偏移LT; byteCharacters.length;胶印+ = sliceSize）{\r
常量片= byteCharacters.slice（偏移，偏移+ sliceSize）;\r
\r
常量byteNumbers =新阵列（slice.length）;\r
对于（让我= 0; I＆LT; slice.length;我++）{\r
byteNumbers [I] = slice.char $ C $猫（I）\r
}\r
\r
常量的字节数组=新Uint8Array（byteNumbers）;\r
\r
byteArrays.push（字节阵列）;\r
}\r
\r
常量BLOB =新的Blob（ByteArray对象，{类型：contentType中}）;\r
返回Blob的;\r
}\r
\r
\r
常量的contentType =图像/ PNG';\r
常量b64Data = 'iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';\r
\r
常量BLOB = b64toBlob（b64Data，则contentType）;\r
常量blobUrl = URL.createObjectURL（BLOB）;\r
\r
常量IMG =使用document.createElement（'IMG'）;\r
img.src = blobUrl;\r
document.body.appendChild（IMG）; \r
I have base64-encoded binary data in a string.
var contentType = 'image/png';
var b64Data = 'iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';
I would like to create a blob: URL containing this data and display it to the user.
var blob = new Blob(????, {type: contentType});
var blobUrl = URL.createObjectURL(blob);
window.location = blobUrl;
I haven't been been able to figure out how to create the Blob.
In some cases I am able to avoid this by using a data: URL instead.
var dataUrl = 'data:' + contentType + ';base64,' + b64Data;
window.location = dataUrl;
However in most cases the data: URLs are prohibitively large.
How can I decode a base64 string to a Blob object in JavaScript?
The atob function will decode a base64-encoded string into a new string with a character for each byte of the binary data.
var byteCharacters = atob(b64Data);
Each character's code point (charCode) will be the value of the byte. We can create an array of byte values by applying this using the .charCodeAt method for each character in the string.
var byteNumbers = new Array(byteCharacters.length);
for (var i = 0; i < byteCharacters.length; i++) {
byteNumbers[i] = byteCharacters.charCodeAt(i);
}
You can convert this array of byte values into a real typed byte array by passing it to the Uint8Array constructor.
var byteArray = new Uint8Array(byteNumbers);
This in turn can be converted to a Blob by wrapping it in an array passing it to the Blob constructor.
var blob = new Blob([byteArray], {type: contentType});
The code above works. However the performance can be improved a little by processing the byteCharacters in smaller slices, rather than all at once. In my rough testing 512 bytes seems to be a good slice size. This gives us the following function.
function b64toBlob(b64Data, contentType, sliceSize) {
contentType = contentType || '';
sliceSize = sliceSize || 512;
var byteCharacters = atob(b64Data);
var byteArrays = [];
for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
var slice = byteCharacters.slice(offset, offset + sliceSize);
var byteNumbers = new Array(slice.length);
for (var i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
var blob = new Blob(byteArrays, {type: contentType});
return blob;
}
var blob = b64toBlob(b64Data, contentType);
var blobUrl = URL.createObjectURL(blob);
window.location = blobUrl;
Full Example:
function b64toBlob(b64Data, contentType, sliceSize) {
contentType = contentType || '';
sliceSize = sliceSize || 512;
var byteCharacters = atob(b64Data);
var byteArrays = [];
for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
var slice = byteCharacters.slice(offset, offset + sliceSize);
var byteNumbers = new Array(slice.length);
for (var i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
var blob = new Blob(byteArrays, {type: contentType});
return blob;
}
var contentType = 'image/png';
var b64Data = 'iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';
var blob = b64toBlob(b64Data, contentType);
var blobUrl = URL.createObjectURL(blob);
var img = document.createElement('img');
img.src = blobUrl;
document.body.appendChild(img);
...or ES6:
'use strict';
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);
这篇关于在JavaScript的一个base64字符串创建的Blob的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
