У меня есть двоичные данные в кодировке base64 в строке.

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

я хотел бы создать blob:, содержащем эти данные, и отобразите его пользователю.

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

window.location = blobUrl;

, будет работать нормально … Blob Глядя на вывод

В некоторых случаях я могу избежать этого, используя data:.

const dataUrl = `data:${contentType};base64,${b64Data}`;

window.location = dataUrl;

Однако в большинстве случаев data: URL-адреса слишком большого размера.


jquery — Доступ к вложенным объектам JavaScript через строковый ключ — Stack Overflow Blob объект в JavaScript?

Переменная atob Есть два основных способа конвертировать строку в число в JavaScript. Одним из способов является его разбор, а другим способом — изменить его тип на Number. Все приемы в других ответах (например, унарный плюс) включают в себя неявное приведение типа строки к числу. Вы также можете сделать то же самое явно с помощью функции Number.

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

Ниже в коде показаны два субконтроллера, откуда события отправляются вверх на родительский контроллер (rootScope). )
Сначала мы прикрепляем новая функция с именем isLoaded для прототипа HTMLImageElement, так что функцию можно использовать с любым элементом изображения. javascript — динамическое изменение иконки сайта С чем вы столкнулись

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

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

), Но учтите, что поддержка браузеров различается:

{протокол: «https», имя хоста: «stackoverflow.com», имя пути: «questions / 432493 / how-do-you-you-you-access-the-matched-groups-in-a -javascript-регулярное выражение «, строка запроса:» some = параметр «}

const b64toBlob = async (b64Data, contentType='application/octet-stream') => {
  const url = `data:${contentType};base64,${b64Data}`;
  const response = await fetch(url);
  const blob = await response.blob();
  return blob;
};

Большинство мобильных браузеров
диаграмма:

document.body.innerHTML  = '<input autofocus placeholder="try writing">'
// get some dummy gradient image
var img=function(){var a=document.createElement("canvas"),b=a.getContext("2d"),c=b.createLinearGradient(0,0,1500,1500);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()

Оптимизированная (но менее читаемая) реализация:

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

Для поддержки всех браузеров, особенно для Android. Возможно, вы можете добавить это

   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   
        }
    }

Для данных изображений я считаю, что проще использовать canvas.toBlob (асинхронный)

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

См. Этот пример: выражение я использую Node.js 4.10 и Express 2.4.3.

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

я заметил, что Internet Explorer 11 работает невероятно медленно при разрезании данных, как предложил Джереми. Это верно для Chrome, но, похоже, у IE есть проблема при передаче нарезанных данных в Blob-конструктор. На моей машине пропуск 5 МБ данных приводит к сбою IE, а потребление памяти значительно возрастает. Chrome мгновенно создает блоб.

которые используются для отслеживания цепочек собственности.

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

Поэтому я решил включить оба метода, описанных Джереми, в одну функцию. Кредиты идут к нему за это.

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

Если вы можете терпеть добавление одной зависимости к вашему проекту, есть отличные средства blob-util пакет npm , обеспечивающий удобную base64StringToBlob https://lodash.com/docs # get package.json функция в javascript, но легко и более короткий способ преобразования значения в логическое значение:

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...

я публикую более декларативный способ синхронизации base64-преобразования. Когда async fetch().blob(), очень аккуратный, и мне очень нравится это решение, оно не работать над IE11 (и, возможно, Edge — не тестировал этот), даже с polyfill — посмотрите мой комментарий к Бесконечному посту для более подробной информации.

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

BONUS

Если вы хотите напечатать это, вы можете сделать что-то вроде:

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 — Открытие BLOB-файла в новой вкладке для IE11

. Если вы можете выполнить некоторую предварительную обработку строки base64 на сервере, вы можете открыть ее под некоторым URL-адресом и использовать ссылку в printJS :)

Метод с fetch — лучшее решение, но если кому-то нужно использовать метод без fetch, то вот он, так как упомянутые выше не сработали для меня

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

Ниже приведен мой код Typescript, который можно легко преобразовать в javascript, и вы можете использовать

/**
 * 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 });
}