webentwicklung-frage-antwort-db.com.de

Erstellen eines Blobs aus einer base64-Zeichenfolge in JavaScript

Ich habe Base64-kodierte Binärdaten in einer Zeichenfolge.

var contentType = 'image/png';
var b64Data = 'iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';

Ich möchte eine blob:-URL erstellen, die diese Daten enthält, und sie dem Benutzer anzeigen.

var blob = new Blob(????, {type: contentType});
var blobUrl = URL.createObjectURL(blob);

window.location = blobUrl;

Ich war nicht in der Lage, die Blob zu erstellen.

In einigen Fällen kann ich dies vermeiden, indem ich stattdessen eine data:-URL verwende.

var dataUrl = 'data:' + contentType + ';base64,' + b64Data;

window.location = dataUrl;

In den meisten Fällen sind die data:-URLs jedoch unangemessen groß.


Wie kann ich einen base64-String in ein Blob-Objekt in JavaScript decodieren?

321
Jeremy Banks

Die unten beschriebene Funktion ist bei NPM verfügbar : var b64toBlob = require('b64-to-blob')

Die atob-Funktion decodiert eine Base64-codierte Zeichenfolge in eine neue Zeichenfolge mit einem Zeichen für jedes Byte der Binärdaten.

var byteCharacters = atob(b64Data);

Der Codepunkt (charCode) jedes Zeichens ist der Wert des Bytes. Wir können ein Array von Bytewerten erstellen, indem Sie dies mit der .charCodeAt-Methode für jedes Zeichen in der Zeichenfolge anwenden.

var byteNumbers = new Array(byteCharacters.length);
for (var i = 0; i < byteCharacters.length; i++) {
    byteNumbers[i] = byteCharacters.charCodeAt(i);
}

Sie können dieses Byte-Array in ein typisiertes Byte-Array konvertieren, indem Sie es an den Uint8Array-Konstruktor übergeben.

var byteArray = new Uint8Array(byteNumbers);

Dies kann wiederum in ein Blob konvertiert werden, indem es in ein Array eingebettet wird, das an den Blob-Konstruktor übergeben wird. 

var blob = new Blob([byteArray], {type: contentType});

Der obige Code funktioniert. Die Leistung kann jedoch etwas verbessert werden, indem die byteCharacters in kleineren Schichten und nicht in einem Schritt verarbeitet wird. In meinem groben Test scheinen 512 Bytes eine gute Schnittgröße zu sein. Dies gibt uns die folgende Funktion.

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;

Vollständiges Beispiel:

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);

... oder 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);

620
Jeremy Banks

Es konnte nicht vermieden werden, die minimalistische Methode nicht ohne Abhängigkeiten oder Bibliotheken zu veröffentlichen.
Es erfordert die neue Abruf-API. Kann ich es benutzen?

var url = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="

fetch(url)
.then(res => res.blob())
.then(blob => console.log(blob))

Mit dieser Methode können Sie auch leicht Arraypuffer, Text und Json erhalten


Ich habe einen einfachen Leistungstest für Jeremys es6-Synchronisationsversion durchgeführt.
Die Sync-Version blockiert die Benutzeroberfläche für eine Weile.

// get some dummy gradient image
var img=function(){var a=document.createElement("canvas"),b=a.getContext("2d"),c=b.createLinearGradient(0,0,200,100);a.width=a.height=3000;c.addColorStop(0,"red");c.addColorStop(1,"blue");b.fillStyle=c;b.fillRect(0,0,a.width,a.height);return a.toDataURL()}();


async function perf() {
  
  const blob = await fetch(img).then(res => res.blob())
  // turn it to a dataURI
  const url = img
  const b64Data = url.split(',')[1]

  // Jeremy Banks solution
  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;
  }

  // bench blocking method
  let i = 1000
  console.time('b64')
  while (i--) {
    await b64toBlob(b64Data)
  }
  console.timeEnd('b64')
  
  // bench non blocking
  i = 1000

  // so that the function is not reconstructed each time
  const toBlob = res => res.blob()
  console.time('fetch')
  while (i--) {
    await fetch(url).then(toBlob)
  }
  console.timeEnd('fetch')
  console.log('done')
}

perf()

138
Endless

Optimierte (aber weniger lesbare) Implementierung:

function base64toBlob(base64Data, contentType) {
    contentType = contentType || '';
    var sliceSize = 1024;
    var byteCharacters = atob(base64Data);
    var bytesLength = byteCharacters.length;
    var slicesCount = Math.ceil(bytesLength / sliceSize);
    var byteArrays = new Array(slicesCount);

    for (var sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex) {
        var begin = sliceIndex * sliceSize;
        var end = Math.min(begin + sliceSize, bytesLength);

        var bytes = new Array(end - begin);
        for (var offset = begin, i = 0; offset < end; ++i, ++offset) {
            bytes[i] = byteCharacters[offset].charCodeAt(0);
        }
        byteArrays[sliceIndex] = new Uint8Array(bytes);
    }
    return new Blob(byteArrays, { type: contentType });
}
55
Bacher

Für alle Browserunterstützung, insbesondere auf Android. Vielleicht können Sie dies hinzufügen

   try{
       blob = new Blob( byteArrays, {type : contentType});
    }
    catch(e){
        // TypeError old chrome and FF
        window.BlobBuilder = window.BlobBuilder || 
                             window.WebKitBlobBuilder || 
                             window.MozBlobBuilder || 
                             window.MSBlobBuilder;
        if(e.name == 'TypeError' && window.BlobBuilder){
            var bb = new BlobBuilder();
            bb.append(byteArrays);
            blob = bb.getBlob(contentType);
        }
        else if(e.name == "InvalidStateError"){
            // InvalidStateError (tested on FF13 WinXP)
            blob = new Blob(byteArrays, {type : contentType});
        }
        else{
            // We're screwed, blob constructor unsupported entirely   
        }
    }
17
Jayce Lin

Für Bilddaten finde ich es einfacher, canvas.toBlob (asynchron) zu verwenden.

function b64toBlob(b64, onsuccess, onerror) {
    var img = new Image();

    img.onerror = onerror;

    img.onload = function onload() {
        var canvas = document.createElement('canvas');
        canvas.width = img.width;
        canvas.height = img.height;

        var ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

        canvas.toBlob(onsuccess);
    };

    img.src = b64;
}

var base64Data = 'data:image/jpg;base64,/9j/4AAQSkZJRgABAQA...';
b64toBlob(base64Data,
    function(blob) {
        var url = window.URL.createObjectURL(blob);
        // do something with url
    }, function(error) {
        // handle error
    });
12
amirnissim

Sehen Sie sich dieses Beispiel an: https://jsfiddle.net/pqhdce2L/

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 = Your Base64 encode;

var blob = b64toBlob(b64Data, contentType);
var blobUrl = URL.createObjectURL(blob);

var img = document.createElement('img');
img.src = blobUrl;
document.body.appendChild(img);

11
Arcaela

Mir ist aufgefallen, dass Internet Explorer 11 beim Schneiden der Daten, wie von Jeremy vorgeschlagen, unglaublich langsam wird. Dies gilt für Chrome, aber IE scheint ein Problem zu haben, wenn die geschnittenen Daten an den Blob-Constructor übergeben werden. Auf meinem Computer führt das Übergeben von 5 MB an Daten zum Absturz von IE, und der Speicherverbrauch geht durch das Dach. Chrome erstellt den Blob im Nu. 

Führen Sie diesen Code für einen Vergleich aus:

var byteArrays = [],
    megaBytes = 2,
    byteArray = new Uint8Array(megaBytes*1024*1024),
    block,
    blobSlowOnIE, blobFastOnIE,
    i;

for (i = 0; i < (megaBytes*1024); i++) {
    block = new Uint8Array(1024);
    byteArrays.Push(block);
}

//debugger;

console.profile("No Slices");
blobSlowOnIE = new Blob(byteArrays,  { type: 'text/plain' });
console.profileEnd();

console.profile("Slices");
blobFastOnIE = new Blob([byteArray],  { type: 'text/plain' });
console.profileEnd();

Also entschied ich mich, beide von jeremy beschriebenen Methoden in einer Funktion zu verwenden. Dafür gehen ihm Credits.

function base64toBlob(base64Data, contentType, sliceSize) {

    var byteCharacters,
        byteArray,
        byteNumbers,
        blobData,
        blob;

    contentType = contentType || '';

    byteCharacters = atob(base64Data);

    // Get blob data sliced or not
    blobData = sliceSize ? getBlobDataSliced() : getBlobDataAtOnce();

    blob = new Blob(blobData, { type: contentType });

    return blob;


    /*
     * Get blob data in one slice.
     * => Fast in IE on new Blob(...)
     */
    function getBlobDataAtOnce() {
        byteNumbers = new Array(byteCharacters.length);

        for (var i = 0; i < byteCharacters.length; i++) {
            byteNumbers[i] = byteCharacters.charCodeAt(i);
        }

        byteArray = new Uint8Array(byteNumbers);

        return [byteArray];
    }

    /*
     * Get blob data in multiple slices.
     * => Slow in IE on new Blob(...)
     */
    function getBlobDataSliced() {

        var slice,
            byteArrays = [];

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

            byteNumbers = new Array(slice.length);

            for (var i = 0; i < slice.length; i++) {
                byteNumbers[i] = slice.charCodeAt(i);
            }

            byteArray = new Uint8Array(byteNumbers);

            // Add slice
            byteArrays.Push(byteArray);
        }

        return byteArrays;
    }
}
8
martinoss

Wenn Sie Ihrem Projekt eine Abhängigkeit hinzufügen können, gibt es das große blob-util npm-Paket , das eine praktische base64StringToBlob-Funktion bietet. Nach dem Hinzufügen zu Ihrem package.json können Sie es folgendermaßen verwenden:

import { base64StringToBlob } from 'blob-util';

const contentType = 'image/png';
const b64Data = 'iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';

const blob = base64StringToBlob(b64Data, contentType);

// Do whatever you need with your blob...
2
gabriele.genta

Das Folgende ist mein TypeScript-Code, der leicht in Javascript konvertiert werden kann und den Sie verwenden können

/**
 * CONVERT BASE64 TO BLOB
 * @param Base64Image Pass base64 image data to convert into the blob
 */
private convertBase64ToBlob(Base64Image: any) {
    // SPLIT INTO TWO PARTS
    const parts = Base64Image.split(';base64,');
    // HOLD THE CONTENT TYPE
    const imageType = parts[0].split(':')[1];
    // DECODE BASE64 STRING
    const decodedData = window.atob(parts[1]);
    // CREATE UNIT8ARRAY OF SIZE SAME AS ROW DATA LENGTH
    const uInt8Array = new Uint8Array(decodedData.length);
    // INSERT ALL CHARACTER CODE INTO UINT8ARRAY
    for (let i = 0; i < decodedData.length; ++i) {
        uInt8Array[i] = decodedData.charCodeAt(i);
    }
    // RETURN BLOB IMAGE AFTER CONVERSION
    return new Blob([uInt8Array], { type: imageType });
}
0
KAUSHIK PARMAR

Ich poste mehr deklarative Art der Umwandlung von Base64. Wenn async fetch().blob() sehr ordentlich ist und ich diese Lösung sehr mag, funktioniert es nicht auf IE11 (und wahrscheinlich hat Edge diese Option nicht getestet), selbst mit dem Polyfill .

const blobPdfFromBase64String = base64String => {
   const byteArray = Uint8Array.from(
     atob(base64String)
       .split('')
       .map(char => char.charCodeAt(0))
   );
  return new Blob([byteArray], { type: 'application/pdf' });
};

BONUS

Wenn Sie es ausdrucken möchten, können Sie Folgendes tun:

const isIE11 = !!(window.navigator && window.navigator.msSaveOrOpenBlob); // or however you want to check it
const printPDF = blob => {
   try {
     isIE11
       ? window.navigator.msSaveOrOpenBlob(blob, 'documents.pdf')
       : printJS(URL.createObjectURL(blob)); // http://printjs.crabbly.com/
   } catch (e) {
     throw PDFError;
   }
};

BONUSx2 - Öffnen der BLOB-Datei in einer neuen Registerkarte für den IE11

Wenn Sie die base64-Zeichenfolge auf dem Server vorverarbeiten können, können Sie sie unter einer bestimmten URL verfügbar machen und den Link in printJS verwenden.

0
Papi

Die Methode mit Abrufen ist die beste Lösung, aber wenn jemand eine Methode ohne Abrufen benötigt, dann ist es hier, da die oben genannten für mich nicht funktionierten 

function makeblob(dataURL) {
const BASE64_MARKER = ';base64,';
const parts = dataURL.split(BASE64_MARKER);
const contentType = parts[0].split(':')[1];
const raw = window.atob(parts[1]);
const rawLength = raw.length;
const uInt8Array = new Uint8Array(rawLength);

for (let i = 0; i < rawLength; ++i) {
    uInt8Array[i] = raw.charCodeAt(i);
}

return new Blob([uInt8Array], { type: contentType });
}
0
akshay