Wie ein großes Bild mit Daten uri

Question

Ich habe derzeit eine große Base64-Bild-URI (Empfangen über externe JS-Skript) und möchte es in die HTML-Seite einbetten. Ich habe das erfolgreich lokal gemacht, aber jetzt, da es von einem anderen Ort kommt, scheint es nicht zu funktionieren, es lädt einen Teil des Bildes und sagt dann "Image korrupt oder abgeschnitten. URI in dieser Anmerkung abgeschnitten wegen der Länge." Dies geschieht sowohl nur in der Tag und mit <canvas>, gibt es eine Möglichkeit, große Bilder von Uli zu laden? Oder eine andere Möglichkeit, Bilder aus einer Base64-Zeichenkette anzuzeigen?

Was macht keinen Sinn ist es funktioniert gut, wenn ich die Base64-Zeichenfolge als JavaScript-Variable angeben, aber wenn ich es als eine Variable in einem externen Skript enthalten, gibt es diesen Fehler. Würde ich die Saite zerlegen und sie wieder zusammensetzen?

Answer 1

Sie sollten keine Daten-URLs für große Dateien verwenden.

Sie könnten versuchen, Ihre base64 URL in ein Blob-Objekt und das Blob-Objekt in eine temporäre Blob-URL zu konvertieren mit der folgenden Javascript-Funktion:

function dataurlToBlobUrl(url){ 
    var parts = url.split(',',2); 
    var mime = parts[0].substr(5).split(';')[0]; 
    var blob = b64toBlob(parts[1],mime); 
    return URL.createObjectURL(blob); 
} 

Und die b64toBlob Funktion von hier: https://stackoverflow.com/a/16245768/5406901

Stellen Sie sicher, dass Sie "URL.revokeObjectURL" immer dann verwenden, wenn Sie die Blob-URL nicht mehr benötigen.