jpg-Bilder aus MySQL [BLOB] in einem canvas darstellen ?

[Jankobert]

Liebes Forum,
ich stelle in einer Web-Seite Bilder in einem canvas-Objekt dar, die ich anschließend grafisch noch mit Linien, u.s.w. überlagere. Bisher lade ich die Bilder noch direkt als Datei. Der Code ist etwa so: (zur Übersicht etwas eingedampft)

  
var canvas = document.getElementById('bildfläche');  
var Bild = new Image();  
Bild.onload = function(){  
  var context = canvas.getContext('2d');  
  if(canvas.getContext){  
    context.drawImage(Bild, 0, 0);  
    context.strokeStyle = "rgb(0, 0, 0)";  
    context.lineWidth=2;  
    context.beginPath();  
  
...  
  
  }  
};  
Bild.src = bilder_pfad;  
  
(z.B.: bilder_pfad="/grafik/basis_2014_03.jpg")  

Nun wird das Projekt aber zunehmend komplexer und ich würde die Bilder gerne aus einer MySQL übernehmen. Erstellt und in MySQL abgelegt (als BLOB) werden die Bilder mit einem kleinen VB.net-Projekt. Auch das PHP-Skript zum Auslesen des Bildes aus der MySQL habe ich soweit im Griff.

Jetzt aber mein Problem:
Wie bekomme ich dem Image-Objekt (hier 'Bild') die Inhalte der Übergabevariable vom php-Skript übergeben, so das es vom canvas als Bild interpretiert wird. Sozusagen das äquvalent zum "Bild.src = bilder_pfad;"?

Liebe Grüße und vielen Dank vorab,
Janko

[ChrisB]

Hi,

Wie bekomme ich dem Image-Objekt (hier 'Bild') die Inhalte der Übergabevariable vom php-Skript übergeben, so das es vom canvas als Bild interpretiert wird. Sozusagen das äquvalent zum "Bild.src = bilder_pfad;"?

Na mit Bild.src = 'adresse_von_script_das_die_bilddaten_aus_der_datenbank_ausliest_und_ausgibt' natürlich.

MfG ChrisB

[Jankobert]

Hallo hottim
vielen Dank für die Grundeinführung.

Hallo ChrisB,
vielen Dank für die extrem pragmatische Lösung. Ja, einmal anders darüber nachgedacht ist es natürlich genau so.

als Dankeschön schau ich mir gleich mal ein paar Fragen an undschau, ob ich auch was beisteuern kann.

Liebe Grüße,
Jankobert

[hotti]

hi,

Wie bekomme ich dem Image-Objekt (hier 'Bild') die Inhalte der Übergabevariable vom php-Skript übergeben, so das es vom canvas als Bild interpretiert wird. Sozusagen das äquvalent zum "Bild.src = bilder_pfad;"?

Du holst das Bild per Ajax entweder als Binary oder Base64. Daraus erzeugst Du einen ArrayBuffer, das ist wiederum eine Binaray, mit welcher ein Browser was anfangen kann. Dazu brauchst du eine Instanz von FileReader und für diesen einen EventListener, z.B.:

  
  var FR = new FileReader();  
  FR.addEventListener('load', StoreInRAM, false);  
  FR.readAsArrayBuffer(file);  

Jetzt hast du den ArrayBuffer, daraus erstellst Du einen Blob und aus dem wird ein URL gemacht:

  
  var bb = new Blob([RAM[oid]['body']]); // RAM[oid]['body'] isa ArrayBuffer  
  var url = URL.createObjectURL(bb);  
  document.getElementById('imgpreview').src = url; // Bild wird gerendert  

Der Blob-URL sieht etwa so aus:
   blob:628440d5-4f11-44b3-a1e5-b20fcebab202
und das ist ein URL, den nur der Browser kennt.

Horst

[hotti]

hi,

Du brauchst nur das:

Du holst das Bild per Ajax entweder als Binary oder Base64. Daraus erzeugst Du einen ArrayBuffer, das ist wiederum eine Binaray, mit welcher ein Browser was anfangen kann.

die Ajax-Response gleich als ArrayBuffer anfordern.

Jetzt hast du den ArrayBuffer, daraus erstellst Du einen Blob und aus dem wird ein URL gemacht:

var bb = new Blob([myArrayBuffer]);
  var url = URL.createObjectURL(bb);
  document.getElementById('imgpreview').src = url; // Bild wird gerendert

>   
> Der Blob-URL sieht etwa so aus:  
>    blob:628440d5-4f11-44b3-a1e5-b20fcebab202  
> und das ist ein URL, den nur der Browser kennt.  
  
Weitere Infos auf MDN und [hier](http://rolfrost.de/video.html) ein Beispiel, wie das mit einem Video funktioniert.  
  
Schönen Sonntag