Gibt es eine Größenbeschränkung für URL-Schemawerte für "Daten:"? Ich interessiere mich für Einschränkungen in gängigen Webbrowsern. Mit anderen Worten, wie lange kann data:image/jpg;base64,base64_encoded_datain <img src="data:image/jpg;base64,base64_encoded_data" />oder sein background-image: url(data:image/jpg;base64,base64_encoded_data)?

In Bezug auf Einschränkungen in Webbrowsern unterstützt MSIE 6/7 das Daten-URL-Schema nicht ... Weitere Informationen auf Wikipedia

Die Längenbeschränkungen sind je nach Browser unterschiedlich - ich glaube, IE8 erlaubt bis zu 32 KB und die Oper ist 4 KB groß, kann aber nicht wirklich etwas über andere Browser sagen ...

Kurze Antwort: Das Daten-URI-Limit variiert.

Es gibt viele Antworten. Da die Frage vor mehr als 5 Jahren gestellt wurde, sind die meisten jetzt falsch, da sie veraltet sind. Diese Frage steht jedoch ganz oben in den Google-Ergebnissen für "Daten-Uri-Limit". Daten-URIs werden jetzt weitgehend unterstützt und IE 7/8 ist kein relevanter Browser mehr. Es gibt viele Referenzen unten, weil die Antwort heute nuanciert ist.

Daten-URI-Grenzwerte

Die Daten-URI-Spezifikation definiert keine Größenbeschränkung, sagt jedoch, dass Anwendungen möglicherweise ihre eigenen auferlegen.

• Chrome - 2 MB für das aktuelle Dokument. Andernfalls ist das Limit das speicherinterne Speicherlimit für beliebige Blobs: Wenn x64 und NICHT ChromeOS oder Android, dann 2 GB; sonst total_physical_memory / 5( Quelle ).
• Firefox - unbegrenzt
• IE ≥ 9 & Edge - 4 GB
• Safari & Mobile Safari -?

Alternativen

Eine Technologie mit einer höheren Grenze (500 MB in Chrome) , die möglicherweise eine Alternative für Ihren Anwendungsfall darstellt, sind Blob-URLs über URL.createObjectURL () , die die URL-API zusammen mit Blobs über die Datei-API verwenden . Ein Beispiel hierfür finden Sie unter Verwenden von URL.createObjectURL () .

Einige andere Alternativen, wie unter Schreiben einer Datei / Geben an den Benutzer erwähnt, sind: FileSaver.js , StreamSaver.js und JSZip .

Mit Modernizr können Sie die Unterstützung von Daten-URIs über 32 KB erkennen .

Verwandte Fragen

Diese Antworten sind so ziemlich die gleichen wie diese Frage, aber ich erwähne sie, um Ihnen die Zeit zu ersparen, die Sie beim Lesen der einzelnen Fragen haben.

• Erhalten der maximalen Daten-Uri-Größe in Javascript
• "Aw, Snap", wenn die Daten-URL zu groß ist
• Was ist die Größenbeschränkung eines Base64 DataURL-Images?
• Was ist die maximale Länge einer URL in verschiedenen Browsern? Diese Frage bezieht sich auf URLs, nicht auf Daten-URIs, aber es gibt relevante Antworten und Kommentare zu Daten-URIs.
• Ist es möglich, die Größenbeschränkung für die Daten-URL programmgesteuert zu ermitteln?

Ich habe gerade eine kurze Überprüfung durchgeführt, bei der acht verschiedene JPEG-Bilder mit einer Größe von 3.844 bis 2.233.076 Byte eingebettet wurden .

Alle folgenden Browser haben jedes Bild auf meinem Windows 7 -System (64-Bit) korrekt angezeigt :

• Chrom 14.0.816.0
• Firefox 11.0
• Google Chrome 18.0.1025.142
• Internet Explorer 9.0.5 (64 Bit)
• Opera 11.62
• Safari 5.1.5

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

Das URL-Schema "data:" ist nur für kurze Werte nützlich. Beachten Sie, dass einige Anwendungen, die URLs verwenden, möglicherweise eine Längenbeschränkung festlegen. Beispielsweise haben URLs, die in <A>Anker in HTML eingebettet sind, eine Längenbeschränkung, die durch die SGML-Deklaration für HTML [RFC1866] festgelegt wird. Der LITLEN (1024) begrenzt die Anzahl der Zeichen, die in einem einzelnen Attributwertliteral erscheinen können, der ATTSPLEN (2100) begrenzt die Summe aller Längen aller Attributwertspezifikationen, die in einem Tag erscheinen, und der TAGLEN (2100) begrenzt die Gesamtlänge eines Tags.

Ich habe gelesen, dass Safari ein Limit von 128 KB für Daten-URIs hat:

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

Und Chrome ist 2M:

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

Die Antwort für 2017 lautet: Daten konvertieren: in Blob mit der Funktion: 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});
}

Erstellen Sie dann eine Blob-URL

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

Verwenden Sie es dann in einem neuen Fenster, wenn Sie es benötigen.

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>')      

funktioniert mit großen Dateien in Chrome / Firefox 2017

Es ist wirklich das " Daten-URI-Schema ".

Laut der Wikipedia-Seite wird IE7 nicht unterstützt, und IE8-Betas beschränken es auf 32 KB Daten.

Nur zu Ihrer Information, ich konnte ein 130K-Bild mithilfe einer Daten-URL in Firefox 3.5 aus einem JavaScript-Ajax-Aufruf laden. Das Bild wurde in IE 8 abgeschnitten, aber das Ganze wurde in FF angezeigt.

In Firefox 3.6 scheint das Limit 600 KB zu betragen.

Ich habe den Code von waza123 ausprobiert, aber die charCodeAtMethode hat nicht alle Zeichen korrekt konvertiert. Hier ist meine Lösung zum Erstellen großer Downloads im Browser. (Ich habe es für JSON-Daten verwendet)

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);
}

Hinweis: Es gibt einige zusätzliche Einschränkungen im IE. Für iframe ist eine Grenze von 4 kb.

In IE9 wurde das 32-KB-Limit für DataURIs entfernt, obwohl ihre Verwendung aus Sicherheitsgründen auf bestimmte Kontexte beschränkt bleibt (insbesondere Szenarien, die einen Sicherheitskontext wie IFRAMES erstellen, sind verboten).

MSDN