✔ Canvas zu Base64. Base64-Code stimmt nicht

[gianfranco0104]

Ich habe hier aus einem Cam-Bild Converterprogramm ein Canvas, dass mit mehreren Bildern bestückt wird.
Soweit funktioniert alles. Nur das base64, was dabei raus kommt, kann ich nicht mehr zurückschreiben. Dabei ist mir aufgefallen dass mein Base64 mit "Qk02w" beginnt und das eines Bildes mit "iVBORw". Was könnte das sein, und wie kann ich das umschreiben? Wenn ich das Canvas extra mit dem Befehl "toDataURL()" abgreife, dann ist es ein leeres Bild, warum auch immer.

Hier mal ein Ausschnitt des COdes, mit dem Das Canvas erzeugt wird:

//...
var base64 = video.getFrame();
      var image = new Image();

      image.onload = function () {
        canvas.getContext('2d').
        drawImage(image, camXpos, camYpos, camIMGw, vamIMGh);
      };
      image.setAttribute('src', 'data:image/png;base64,' + base64);  console.log(base64) ;
//...

ich frage mich, warum hier ein anderes "Format" (nenne ich das mal vorsichtig) heraus kommt.
Wer kann hier helfen?

 

[Sempervivum]

Müsste das nicht so aussehen?

        var ctx = canvas.getContext('2d').
        ctx.drawImage(image, camXpos, camYpos, camIMGw, vamIMGh);

https://developer.mozilla.org/de/docs/Web/API/CanvasRenderingContext2D/drawImage

 

[gianfranco0104]

da bekomme ich eine Fehlermeldung - der code oben funktioniert einwandfrei. nur das Base64 ist komisch.

es liegt alles auf einer Zeile:

canvas.getContext('2d').drawImage(image, camXpos, camYpos, camIMGw, camIMGh);

 

[Sempervivum]

Der Einzeiler ist natürlich ganz etwas anderes. Hatte nicht gesehen, dass die zwei Zeilen eine einzige Anweisung sind. Mit dem Base64 kenne ich mich leider nicht aus. "funktioniert einwandfrei" - heißt das, dass die Bilder richtig angezeigt werden?

 

[gianfranco0104]

Ja, Bilder werden korrekt angezeigt, aber das Base64, was dabei raus kommt ist irgend ein anderes Format.
Was ich aber nun festgestellt habe ist folgendes - ggf. wird es dann einfacher. Das Base welches ich immer abgreife ist nur das aktuelle Videoframe - das brauche ich ja so nicht.
Die einzelnen Bilder werden in ein ganzes Canvas Frame hineingezeichnet und dieses GANZE Canvas-Frame brauche ich eigentlich als einziges Base64 Bild.

Nur das Bild welches ich als Base64 dann bekomme, ist zwar wieder im korrekten Format, aber leer
Das Canvas ist mit einer ID bestückt, die ich über getElementById abgreife


__UPDATE:
So klappt es. Nach dem alles aufgenommen wurde, einfach einen weiteren Button erzeugen, der dann das finale Bild nochmals ausliest und dann in ein Base64 schreibt. TADAAA! *Selbst drauf kommen ist immer cool*
Trotzdem danke an den netten Helfer

   var GetFINcanvasIMG = document.getElementById("takepicfromCAM");
   var imageFIN = new Image();
   imageFIN.src = GetFINcanvasIMG.toDataURL('image/png');
   console.log(imageFIN);