Konvertieren und Einfügen von Base64-Daten in Canvas in Javascript

7

Ich bekomme einen Puffer von Daten, die ein Bild in Base64 darstellen. Die Daten, die ich bekommen habe (repräsentieren Bild in base64) (Teil der Daten)

193,109,51,74,182,71,212,38,78,62,211,48,81,145,244,39,244,250,215,192,113,46,101,136,203,149,44,6,90,147,197,215,109,66,251,69,47,138,111,202,43,239,122,45,108,125,22,6,149,44,84,103,136,198,74,212,41,171,203,188,187,69,121,183,255,0,7,75,156,191,140,190,45,181,219,141,43,195,214,107,30,129,3,145,38,110,60,135,185,35,130,119,4,108,244,238,0,227,3,140,86,85,237,134,149,241,3,69,158,251,71,134,93,31,88,211,72,82,1,30,100,76,70,65,12,9,12,141,207,94,184,32,140,215,45,47,196,111,130,177,187,34,120,79,197,65,84,224,8,175,93,20,99,176,31,107,24,250,96,85,141,47,227,159,195,111,11,219,223,46,133,225,175,17,91,73,120,170,178,189,196,137,49,96,185,218,50,247,44,64,27,155,167,173,123,252,61,144,97,242,8,63,102,156,234,207,227,169,43,115,77,245,230,119,122,111,104,173,23,78,167,204,103,121,165,108,217,46,88,184,40,124.....

Erfolgreich dekodieren.

Jetzt versuche ich, das Bild ohne Erfolg auf meine Leinwand zu setzen:

%Vor%

Ich konvertiere das Datenformular base64 mit:

%Vor%

Es funktioniert nicht, ich mache folgendes: Auf meiner Serverseite konvertiere ich das Bild wie folgt:

%Vor%

In meiner Website habe ich die Daten (base64 image) und versuche folgendes zu tun:             context.drawImage (0,0, 'Daten: image / jpeg; base64,' + Bild);             Ich habe es auch versucht:             context.drawImage ('Daten: image / jpeg; base64,' + Bild, 0,0);

NICHT ARBEITEN !!! Irgendeine Idee?

    
Joseph 12.12.2011, 10:56
quelle

2 Antworten

29

Sie müssen eine base64-Zeichenfolge nicht "dekodieren", um sie in einer Zeichenfläche zu zeichnen, sondern einfach einer Bildquelle zuweisen und dieses Bild in der Zeichenfläche zeichnen.

In etwa so:

%Vor% %Vor%

Stellen Sie sicher, dass Ihre Base64-Zeichenfolge mit dem data:image/gif;base64, -Teil beginnt.

image/jpeg , image/png , etc .. Abhängig von Ihrem kodierten Bildformat.

    
Pierre 13.12.2011, 12:18
quelle
1

Ссылка ... kann nicht auf der Leinwand gezeichnet werden.
Ihre Daten sollten wie "Daten: image / png; base64, iVBORw0 ..." aussehen Wenn sie so aussehen, sind sie ohne base64-Decodierung einsatzbereit. Sie zeichnen sie einfach direkt mit context.drawImage

    
user1088520 12.12.2011 11:16
quelle