HTML-Bild aus Daten in Javascript-Variable erstellen

Question

Ich habe Bilddaten (entweder JPEG oder PNG) in einer Javascript-Variablen. Wie kann ich das Bild in einem HTML-Dokument anzeigen? Es handelt sich um sehr große Bilder, und Code wie dieser funktioniert nicht, weil der URI zu lang ist:

// doesn't work because the URI is too long
$('img#target').attr('src', 'data:...');

Die Verwendung von Canvas ist wahrscheinlich die Antwort, aber ich kann nicht herausfinden, wie man es mit den Bilddaten lädt.

Falls Sie sich wundern: Nein, ich kann die Bilddaten nicht einfach direkt in den img-Tag laden. Sie kamen verschlüsselt vom Server und wurden im Browser mit Javascript entschlüsselt.

Danke,
-- Art Z.

Answer 1

So verwenden Sie eine Daten-URL, um auf einer Leinwand zu zeichnen:

var img = new Image;
img.onload = function(){
  myCanvasContext.drawImage(img,0,0);
};
img.src = "data:...";

Per diese Frage/Antwort stellen Sie sicher, dass Sie die onload vor der src .

Sie sagen, dass "der URI ist zu lang" aber es ist nicht klar, was Sie damit meinen. Nur der IE8 hat ein 32kB-Limit für den Daten-URI; bei anderen Browsern sollte es problemlos funktionieren. Wenn Sie einen Fehler feststellen, beschreiben Sie ihn bitte.

Answer 2

Es stellt sich heraus, dass

$('img#target').attr('src', 'data:...');

funktioniert in allen Programmen außer IE. Mein Problem hat seinen Ursprung woanders.