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

Question

Есть ли ограничение размера для схемы данных data: ценности? Меня интересуют ограничения в популярных веб-браузерах. Другими словами, как долго 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)?

Answer 1

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

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

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

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

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

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

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

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

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

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

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

• получение максимального размера Data-Uri в Javascript
• «Aw, Snap», когда данные URI слишком велики
• Каков предел размера изображения Base64 DataURL?
• Какова максимальная длина URL в разных браузерах? Этот вопрос касается URL, а не URI данных, но есть соответствующие ответы и комментарии относительно URI данных.
• Можно ли программно определить ограничение размера для URL данных?

Answer 2

Я только что сделал быструю проверку, встраивая восемь различных изображений в формате Jpeg размером от 3 844 до 2 233 076 байт * размером 1002 *. Все следующие браузеры правильно отображали каждое изображение в моей Windows 7 (64-разрядной) системе:

• Хром 14.0.816.0
• Firefox 11.0
• Google Chrome 18.0.1025.142
• Internet Explorer 9.0.5 (64-разрядная версия)
• Опера 11,62
• Safari 5.1.5

Answer 3

С http://www.ietf.org/rfc/rfc2397.txt:

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

Answer 4

Я читал, что Safari имеет ограничение 128 КБ для URI данных:

http://blog.clawpaws.net/post/2007/07/16/Storing-iPhone-apps-locally-with-data-URLs#c1989348

А Chrome 2М:

http://code.google.com/p/chromium/issues/detail?id=44820#c1

Answer 5

2017 ответ: преобразовать данные: в блоб с помощью функции: 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-адрес блоба

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

Answer 6

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

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

Answer 7

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

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

Answer 8

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

Answer 9

Я попробовал код из 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);
}

Answer 10

Кажется, ограничение в Firefox 3.6 составляет 600 КБ.