✔ Mehrere Bilder zusammenfügen in ein base64

[gianfranco0104]

Hi alle zusammen. Ich stehe mal wieder vor einem Problem.

Habe ein Kamerasystem das immer eine Position anfährt, dabei wird ein Button getriggert (hier einmal als Webpagenbutton zum simulieren), der das aktuelle Bild einfängt und in base64 speichert. Bei der nächsten Fahrt soll er wieder beim Ziel triggern, nun soll aber das Bild mit dem ersten Bild zusammen gesetzt werden. bei mir wird jedoch immer ein neuers erstellt, das alte überschrieben. zusätzlich muss ich angeben können ob es rechts vom Bild oder unterhalb angefügt wird . Wer kann hier helfen?

die Codes:

  <div id="container">
    <video autoplay></video>
    <button>Bild abgreifen</button> <!-- hier fehlt Rechts anfügen oder unterhalb einfügen, müssten also theoretisch zwei Buttons sein -->
  </div>
<canvas id="takepicfromCAM"></canvas> <!-- abgegriffenes bild eintragen -->

und die JS:

var video = document.querySelector('video');
var canvas = window.canvas = document.querySelector('canvas');
canvas.width = 100;
canvas.height = 75;

var button = document.querySelector('button');
button.onclick = function() {
  var base64 = video.getFrame();
  var image = new Image();
  image.onload = function () {
    canvas.getContext('2d').
    drawImage(image, 0, 0, canvas.width, canvas.height);
  };
  image.setAttribute('src', 'data:image/png;base64,' + base64);
};

var constraints = {
  audio: false,
  video: true
};

die Bildgröße ist immer die gleiche.
Ich habe es damit probiert, aber es klappt einfach nicht und die Richtung rechts oder unterhalb anbinden ebenfalls nicht:

//...
var context = canvas.getContext('2d'); //in context einfügen

canvas.width = img1.width;
canvas.height = img1.height;
context.drawImage(img1, 0, 0);
context.drawImage(img2, 0, 0);
//...

Wer weiß Rat?

 

[Sempervivum]

Interessante Aufgabe! Willst Du denn immer nur zwei Bilder nebeneinander/untereinander zusammen setzen oder sollen es u. U. mehr werden?
Um ein Bild neben/unter einem anderen zu zeichnen, brauchst Du doch nur die Koordinaten zu ändern:
https://developer.mozilla.org/de/docs/Web/API/CanvasRenderingContext2D/drawImage
Rechts daneben:

context.drawImage(img1, 0, 0);
context.drawImage(img2, breite_deines_bildes, 0);

Darunter:

context.drawImage(img1, 0, 0);
context.drawImage(img2, 0, hoehe_deines_bildes);

Und die Größe deines Canvas musst Du natürlich auch so setzen, dass mehrere Bilder hinein passen.

 

[gianfranco0104]

Hi, danke einmal dafür.
das Problem ist, dass das Bild in der Breite (also daneben) oder in der Höhe (darunter) beliebig lang sein kann, deshalb müsste das Canvas dementsprechend auch variabel groß verändert werden.
Am Ende, wenn das Bild fertig "aufgenommen" wurde wird das Ganze dann als einzelnes Bild in base64 gespeichert und abgelegt.

nun gut ich versuche mal mit deinen Tipps voran zu kommen.

Danke schon mal für die Unterstützung


___ UPDATE
Soweit so gut, das Funktioniert, danke ersteinmal dafür. Aber das Problem ist nun das das zweite image ja nicht sofort kommt, sondern erst nach 1-2 Sekunden. und wenn ich neu Trigger, dann wird mein altes Canvas ja gelöscht.
ich müsste theoretisch folgenden code so in eine schleife setzen, dass er entweder "buttonRIGHT" oder "buttonDWN" erkennt und dann an das Bild ansetzt ohne es neu zu schreiben.

var buttonRIGHT = document.querySelector('#buttonRIGHT');
var buttonDWN = document.querySelector('#buttonDWN');
buttonRIGHT.onclick = function() { //hier ist nur RIGHT eingebaut, DOWN könnte ich über eine IF Anweisung abfangen. 
 var base64 = video.getFrame();
  var image = new Image();

  image.onload = function () {
    canvas.getContext('2d').
    drawImage(image, 0, 0, 600, 450); //dieser teil ist dynamisch, je nachdem ob links oder rechts das bild eingefügt werden soll.
};
  image.setAttribute('src', 'data:image/png;base64,' + base64);

};

Das Problem ist, ich weiß nicht wie viele Bilder rechts angefügt werden und nicht wie viele unten.
Ich weiß, dass immer erst eine Reihe RECHTS aufgefüllt werden muss, bevor eines UNTEN wieder folgt, um dann die Reihe wieder RECHTS zu füllen, nur kenn ich die Füllmengen RECHTS und UNTEN nicht.

Wie könnte man das realisieren?

 

[gianfranco0104]

Habe es nun selbst herausgefunden. Für alle die es auch einmal benötigen:

var video    = document.querySelector('video');
var canvas   = window.canvas = document.querySelector('canvas');
var camIMGw  = 200; //breite des CAM BILDES
var vamIMGh  = 150; //Höhe des   CAM Bildes
var camXpos  = -camIMGw; //steht einmal im negativen, da beim Triggern, dieser immer hinzugefügt wird. Bei Höhe nicht, da sie sowieso einmal das Bild unterhalb erreichen muss
var camYpos  = 0;
canvas.width = 1200; // "canvasgröße" bestimmt sich durch die diagonalkoordinate, die der Anwender abgegeben hat, in dem er den Linken obern und rechten unteren Punkt der LP angegeben hat, ist also eigentl. variabel.
canvas.height =450;  // s. komentar oben > Canvasgröße, variabel

var buttonRIGHT = document.querySelector('#buttonRIGHT');
var buttonDWN = document.querySelector('#buttonDWN');
buttonRIGHT.onclick = function() {captureIMG('RIGHT'); }
buttonDWN.onclick   = function() {captureIMG('DWN');  }


function captureIMG(IMGposIS) {
  if (IMGposIS == 'RIGHT') {camXpos = camXpos + camIMGw; }
  if (IMGposIS == 'DWN')   {camYpos = camYpos + vamIMGh; camXpos = camXpos-camXpos} //camXpos muss wieder auf die Ursprungsposition zurück
  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);

};