Функция, описанная ниже , доступна на NPM :
blockquote>var b64toBlob = require('b64-to-blob')
Функция
atob
будет декодировать строку с кодировкой base64 в новая строка с символом для каждого байта двоичных данных.var byteCharacters = atob(b64Data);
Кодовая точка каждого символа (charCode) будет значением байта. Мы можем создать массив байтовых значений, применяя это, используя метод
.charCodeAt
для каждого символа в строке.var byteNumbers = new Array(byteCharacters.length); for (var i = 0; i < byteCharacters.length; i++) { byteNumbers[i] = byteCharacters.charCodeAt(i); }
Вы можете преобразовать этот массив байтовых значений в реальный типизированный массив байтов, пройдя это к конструктору
Uint8Array
.var byteArray = new Uint8Array(byteNumbers);
Это, в свою очередь, можно преобразовать в
Blob
, обернув его в массив, передающий его конструкторуBlob
.var blob = new Blob([byteArray], {type: contentType});
Выполняется код выше. Однако производительность может быть немного улучшена за счет обработки
byteCharacters
меньшими фрагментами, а не сразу. В моем грубом тестировании 512 байт кажется хорошим размером среза. Это дает нам следующую функцию.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;
Полный пример:
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);
... или 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);
Это работает через все браузеры, потому что что-либо кроме IE видит <!--IGNORED COMMENT-->
. Только IE читает комментарий, если он содержит условное предложение. Взгляните на эту статью
Можно также указать который версия IE. Например:
<!--[if IE 8]>
<link rel="stylesheet type="text/css" href="ie8.css" />
<![endif]-->
Если можно использовать JavaScript, существует несколько опций:
navigator.appName
navigator.appVersion
Или что-то более устойчивое при помощи библиотеки, такой как jQuery.
Наконец, Вы могли использовать объект BrowserDetect от QuirksMode.
После того как у Вас есть имя браузера и версия, можно затем вставить HTML, чтобы связаться с таблицей стилей или включать другие теги.
В дополнение к ответу ROS можно только быть нацелены на механизм визуализации Internet Explorer с условными комментариями; нет никакой подобной конструкции для других браузеров. Например, Вы не можете записать, что условное выражение комментирует, что целевой Firefox, но проигнорированы Internet Explorer.
Путем я достигаю того же эффекта, как Ваш пример выше состоит в том, чтобы осуществить сниффинг строки агента пользователя. Я затем поставляю подходящий файл CSS для того браузера. Это не прекрасно, потому что иногда люди изменяют свою строку агента пользователя для совместимости.
Другой способ предназначаться для различных браузеров состоит в том, чтобы использовать браузер определенные взломы. Они особенно противны, потому что они обычно полагаются на ошибки в браузере, и ошибки склонны быть исправленными!
Сниффинг агента пользователя является лучшим всесторонним решением, по-моему.
Условные комментарии просто для IE (версия 5 и позже). Официальная документация Microsoft здесь. Если Вы собираетесь использовать их, лучшая стратегия состоит в том, чтобы условно включать внешние таблицы стилей или файлы JavaScript после того, как Ваше нормальное включает. Это означает, что на IE Ваш определенный для IE код переопределит все остальное. На любом другом браузере код будет рассматривать как комментарии и игнорировать синтаксический анализатор.