DataUri BLOB против строки Base64 DataUri - PullRequest
Новая
       15

DataUri BLOB против строки Base64 DataUri

0 голосов
/ 15 февраля 2019

Как вы знаете, & указано в w3 , можно создать URL для объекта Blob в javascript, используя createObjectUrl от Blob.С другой стороны, если у нас есть данные в виде строки в кодировке Base64, мы можем представить их как Url в формате «data [MIMEType]; base64, [data>]».

Предположим, у меня есть строка в кодировке base64, сгенерированная из изображения, которое очень популярно в наши дни :) Изображение "Красная точка" в википедии .

var reddotB64 = "iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg";

Я на 100% уверен, что если я создам URL, соответствующий схеме URI данных, как указано выше, тогда я смогу разместить элемент ссылки и загрузить его из браузера: пожалуйста,см. пример кода ниже: 

var reddotB64 = "iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg";
var reddotLink = document.createElement("a");
reddotLink.target = "_blank";
reddotLink.href = "data:image/png;base64," + reddotB64;
document.body.appendChild(reddotLink);
reddotLink.click();
document.body.removeChild(reddotLink);

Это работает очень хорошо и отображает изображение в новой вкладке.С другой стороны, я попытаюсь создать ссылку с помощью Blob следующим образом: 

var reddotB64 = "iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg";
var reddotBlob = new Blob([atob(reddotB64)], { type: 'image/png' });
var reddotLink = document.createElement("a");
reddotLink.target = "_blank";
reddotLink.href = URL.createObjectURL(reddotBlob);
document.body.appendChild(reddotLink);
reddotLink.click();
document.body.removeChild(reddotLink);

Этот код декодирует строковую переменную в кодировке base64 reddotB64 с помощью функции atob.И затем, создание объекта Blob и продолжается с функцией URL.createObjectURL.В этом случае, поскольку я декодировал reddotB64 из base64 в двоичный файл и создал BLOB-объект типа image / png, а затем создал URL-адрес объекта, я ожидаю, что он будет работать, но он не работает.

Делаете ли выПонять почему это не работает?Или я что-то упускаю по стандартам?Или что-то не так в Javascript?

1 Ответ

0 голосов
/ 19 февраля 2019

Здесь - ответ.Похоже, это проблема кодирования.Для преобразования / декодирования строки Base64 в двоичный файл (UInt8Array / byte) с помощью atob недостаточно.После использования atob необходимо использовать код символа UTF-16: и мы достигаем этого, используя функцию charCodeAt для каждого символа в декодированной строке.В результате мы получаем двоичную строку в кодировке UTF-16, которая определенно работает.Просто создайте Blob и затем позвоните URL.createObjectURL.

...