Ограничения по размеру URL-адреса протокола данных

Существует ли ограничение по размеру для схемы данных "данные:" значения? Меня интересуют ограничения в популярных веб-браузерах. Другими словами, как долго может data:image/jpg;base64,base64_encoded_data находиться в <img src="data:image/jpg;base64,base64_encoded_data" /> или background-image: url(data:image/jpg;base64,base64_encoded_data)?

Ответ 1

Что касается ограничений в веб-браузерах, MSIE 6/7 не поддерживает схему URL данных... Больше информации на википедии

Ограничения по длине для каждого браузера различны - я считаю, что IE8 допускает до 32 КБ, а опера - 4 КБ, но не может рассказать о других браузерах...

Ответ 2

Краткий ответ: Предел URI данных варьируется.

Есть много ответов. Как был задан вопрос 5+ несколько лет назад, большинство из них сейчас неверны из-за устаревания, но этот вопрос находится на вершине результатов Google для "предела данных uri". URI данных теперь широко поддерживаются, и IE 7/8 больше не является релевантным браузером. Ниже приведено много ссылок, потому что ответ нюансов сегодня.

Пределы URI данных

Спецификация URI данных не определяет ограничение размера, но говорит, что приложения могут устанавливать свои собственные.

  • Chrome - 2 МБ для текущего документа. В противном случае ограничение - это ограничение памяти в памяти для произвольных BLOB-объектов: если x64 и НЕ ChromeOS или Android, то 2 ГБ; в противном случае, total_physical_memory/5 (источник).
  • Firefox - без ограничений
  • IE ≥ 9 и Edge - 4 ГБ
  • Safari & Mobile Safari -?

альтернативы

Одна технология с более высоким пределом (500 МБ в Chrome), которая может быть альтернативой для вашего варианта использования, - это URL-адреса BLOB-объектов через URL.createObjectURL(), использующие API-интерфейс URL вместе с BLOB-объектами через API-интерфейс File. Пример этого приведен в разделе Использование URL.createObjectURL().

Несколько других альтернатив, как упоминалось в Как записать файл/передать его пользователю, являются: FileSaver.js, StreamSaver.js и JSZip.

Вы можете использовать Modernizr для определения поддержки URI данных более 32 КБ.

Смежные вопросы

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

Ответ 3

Я просто сделал быструю проверку, вставив восемь разных Jpeg-изображений в диапазоне от 3,844 до 2,233,076 байт.

Все следующие браузеры отображали каждое изображение правильно в моей системе Windows 7 (64-разрядной):

  • Chromium 14.0.816.0
  • Firefox 11.0
  • Google Chrome 18.0.1025.142
  • Internet Explorer 9.0.5 (64 бит)
  • Opera 11.62
  • Safari 5.1.5

Ответ 4

Из http://www.ietf.org/rfc/rfc2397.txt:

Схема URL-адресов "данные:" полезна только для коротких значений. Обратите внимание, что некоторые приложения, использующие URL-адреса, могут налагать предел длины; например, URL-адреса встроенный в <A> якоря в HTML имеют предел длины, определяемый SGML-декларация для HTML [RFC1866]. LITLEN (1024) ограничивает количество символы, которые могут отображаться в единственный литерал значения атрибута атрибута, ATTSPLEN (2100) ограничивает сумму всех длины всего значения атрибута спецификации, которые появляются в теге, и TAGLEN (2100) ограничивает общая длина тега.

Ответ 6

2017 ответ: конвертировать данные: в blob с функцией: dataURLtoBlob

function dataURLtoBlob(dataurl) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], {type:mime});
}

затем создайте URL-адрес blob

var temp_url = window.URL.createObjectURL(blob);

затем используйте его в новом окне, если вам нужно.

var redirectWindow = window.open('');
redirectWindow.document.write('<iframe src="' + temp_url + '" frameborder="0" style="border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;" allowfullscreen></iframe>')      

работает с большими файлами в chrome/firefox 2017

Ответ 7

Это действительно " схема URI данных ".

Согласно странице Википедии, IE7 не хватает поддержки, а бета-версии IE8 ограничивают его до 32 КБ данных.

Ответ 8

Просто FYI, я смог загрузить изображение 130K с использованием URL-адреса данных в Firefox 3.5 с помощью JavaScript-аякс-звонка. Он обрезал изображение в IE 8, но все это проявилось в FF.

Ответ 9

Кажется, предел в Firefox 3.6 составляет 600 КБ.

Ответ 10

Я пробовал код из waza123, но метод charCodeAt не преобразовал все символы правильно. Вот мое решение для создания больших загрузок в браузере. (Я использовал его для данных JSON)

function exportToFile(jsonData, fileName) {
    const u8arr = new TextEncoder('utf-8').encode(JSON.stringify(jsonData, null, 2));
    const url = window.URL.createObjectURL(new Blob([u8arr], { type: 'application/json' }));
    const element = document.createElement('a');
    element.setAttribute('href', url);
    element.setAttribute('download', fileName);
    element.style.display = 'none';
    document.body.appendChild(element);
    element.click();
    document.body.removeChild(element);
}

Ответ 11

Примечание. В IE есть несколько дополнительных ограничений. Для iframe это предел 4 кб.

В IE9 было удалено ограничение в 32 КБ для DataURI, хотя по соображениям безопасности их использование по-прежнему ограничено определенными контекстами (в частности, запрещены сценарии, которые создают контекст безопасности, такие как IFRAMES)

MSDN