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)?
Antworten:
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 ...
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.
Die Daten-URI-Spezifikation definiert keine Größenbeschränkung, sagt jedoch, dass Anwendungen möglicherweise ihre eigenen auferlegen.
total_physical_memory / 5( Quelle ).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 .
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.
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 :
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:
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
window.open(temp_url, '_blank');Scheint auch ohne Iframes usw. zu funktionieren. Beachten Sie, dass Chrome Datei> Speichern unter für Blob-URLs nicht zulässt.
charCodeAtnicht alle Zeichen korrekt konvertiert werden, empfehle ich die Verwendung new TextEncoder('utf-8').encode. Ich gebe ein Beispiel in meinem Beitrag.
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).