Das sollte einfach genug sein, aber nachdem ich stundenlang damit gerungen habe, kann ich es immer noch nicht zur Arbeit bringen. Bis jetzt haben alle meine Versuche dazu geführt, dass das Image laut Firefox "korrumpiert oder abgeschnitten" wurde.
Rufen Sie das Bild mit einem jquery-ajax-Aufruf vom Server ab:
%Vor%
Base64 codiert das Bild und speichert es in localStore:
In diesem Beispiel verwende ich das jquery base64-Encoding-Plugin, aber ich habe mehrere versucht.
Zeigen Sie das Bild mit einer Daten-URL an:
Das entsprechende img:
Bei jedem Versuch zeigt Firefox jedoch:
Die Url: verweist auf ein gültiges JPEG-Bild und die Base64Image.length und die Fehlermeldung zeigen, dass das var / localStorage tatsächlich enthält, was base64-codierte Daten zu sein scheinen.
Irgendwelche Ideen?
- DEMO: Ссылка
Javascript (AJAX-Aufruf)
%Vor%PHP (laden.php)
%Vor%Lesen Sie dies kann Ihnen helfen:
PS: Vielleicht ist deine Base64 falsch?
Browser haben andere Größenbeschränkungen als das lokale Speicherlimit von 5 MB. Die Daten für <img src="data:image/jpeg;base64,..."> sind ebenfalls eingeschränkt und liegen in der Regel deutlich unter 5 MB. Der einfachste Weg ist, die Dateinamen einfach über localStorage zu übergeben und die Zwischenspeicherung durch den Browser durchführen zu lassen.
Stellt sich heraus, AJAX kann nicht verwendet werden, um binäre Daten zuverlässig zu übertragen. Die Lösung besteht darin, die Base64-Codierung serverseitig auszuführen und die resultierende Zeichenfolge über AJAX zu übertragen.
Der obige php-Code funktioniert. Für alle, die nach einer ASP.Net / C # Lösung suchen:
%Vor%Bitte beachten Sie, dass dieser Code NICHT SICHER ist, um ihn direkt der Außenwelt auszusetzen. Ich persönlich benutze eine Wrapper-Funktion, die den Pfad von einer db analysiert.
Sie können das Daten-URI (das die Basis-64-Kodierung enthält) über JavaScript mit dem HTML5-Canvas-Element abrufen.
%Vor% dataUri enthält jetzt die Daten uri für das Bild, die zusammen mit einem kurzen Präfix die Basis-64-Kodierung des Bildes enthalten.
Achten Sie darauf, die Erkennung für die Canvas-Unterstützung hinzuzufügen. IE 8 und älter unterstützen es nicht.
Tags und Links javascript image ajax html5 base64