Чи існує обмеження розміру для значень схеми URL "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)?

Щодо обмежень у веб-браузерах, MSIE 6/7 не підтримує схему URL-адрес даних ... Більше інформації на wikipedia

Обмеження довжини різні для кожного браузера - я вважаю, що IE8 дозволяє до 32 КБ, а опера - 4 КБ, але не можу сказати про інші браузери ...

Коротка відповідь: Обмеження URI даних змінюється.

Відповідей дуже багато. Оскільки запитання було задано 5 років тому, більшість із них є неправильними через те, що вони втратили дату, однак це питання стоїть у верхній частині результатів пошуку Google за "обмеженням uri даних". URI даних зараз широко підтримується, і IE 7/8 більше не є відповідним браузером. Нижче є багато посилань, оскільки сьогодні відповідь нюансована.

Обмеження URI даних

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

• Chrome - 2 МБ для поточного документа. В іншому випадку обмеження - це обмеження в пам’яті для довільних крапок: якщо 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- файлами через API файлів . Приклад цього наведено у розділі Використання URL.createObjectURL () .

Кілька інших альтернатив , як згадувалося в Як записати файл / передати його користувачеві , є: FileSaver.js , StreamSaver.js і JSZip .

Ви можете використовувати Modernizr для виявлення підтримки для URI даних понад 32 кб .

Пов’язані запитання

Ці відповіді майже однакові з цим запитанням, але я згадую їх, щоб заощадити час на читання кожного з них.

• отримання максимального розміру Data-Uri в Javascript
• “Ой, прив’язати”, коли uri даних завеликий
• Яка межа розміру зображення Base64 DataURL?
• Яка максимальна довжина URL-адреси в різних браузерах? Це питання стосується URL-адрес, а не URI-даних, але є відповідні відповіді та коментарі щодо URI-даних.
• Чи можливо програмно виявити обмеження розміру для URL-адреси даних?

Я щойно здійснив швидку перевірку, вбудувавши вісім різних зображень у форматі Jpeg розміром від 3844 до 2233766 байт .

Усі перелічені нижче браузери правильно відображали кожне зображення в моїй системі 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

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

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

Я читав, що Safari має обмеження 128K для 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

Відповідь 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});
}

потім створіть 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

Це справді " схема URI даних ".

Відповідно до сторінки Вікіпедії, IE7 не має підтримки, а бета-версії IE8 обмежують його до 32 кБ даних.

Будучи просто досвідченим, я зміг завантажити зображення розміром 130 Кб, використовуючи URL-адресу даних у Firefox 3.5 із виклику JavaScript ajax. Це скоротило зображення в IE 8, але все це з’явилося у FF.

Здається, обмеження у Firefox 3.6 становить 600 КБ.

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

Примітка. У IE є деякі додаткові обмеження. Для iframe обмеження становить 4 кб.

У IE9 обмежено 32 кб для DataURI, хоча з міркувань безпеки їх використання залишається обмеженим певним контекстом (зокрема, сценарії, що створюють контекст безпеки, наприклад IFRAMES, заборонені)

MSDN