[JS/Flash] HTML in Grafik konvertieren

[.Acu³]

Hallo liebe Web Devs,

ich suche eine Möglichkeit einen generierten HTML Code (Text auf Bildern platziert) in eine Grafikdatei umzuwandeln.

Das ganze funktioniert NICHT per GD-Lib in PHP (also imagettftext etc.),
da die Positionierung per PHP nicht zufriedenstellend funktioniert. Imagettftext kommt zwar zum Einsatz jedoch nicht flächendeckend.


Daher suche ich eine Lösung via JS oder gar Flash. JS bin ich leider nicht so der Profi, zumindest was Bildbearbeitung/Bildkomprimierung angeht.

Ich hoffe jemand hat eine Lösung, meine restlichen e*gold wären demjenigen sicher.

Liebe Grüße
Acu³

Edit: Achja, es gibt natürlich diverse Möglichkeiten per Command Line. Diese Möglichkeit steht hier jedoch nicht zur Verfügung.

[NotEnoughForYou]

Auf die schnelle würde mir nur einfallen mittels canvas das ganze als Bild zeichnen zu lassen.

[PseudoPsycho]

Originally Posted by NotEnoughForYou

Auf die schnelle würde mir nur einfallen mittels canvas das ganze als Bild zeichnen zu lassen.

Jup. Meine Empfehlung um HTML in ein Bild zu verwandeln, wäre mittels den HTML-Code in einem Canvas-Element darzustellen und anschließend mittels toDataURL() in ein Bild umzuwandeln.

[.Acu³]

Danke, die Methode kannte ich noch nicht.

Wenn ich nun also diesen Code habe:

html2canvas(document.body, {
onrendered: function(canvas) {
document.body.appendChild(canvas);
	     },
letterRendering: true,
height: 720
});

Gibt er mir direkt das Bild aus. Wie kann ich die Datei jetzt abspeichern?

[boxxiebabee]

Originally Posted by .Acu³

Danke, die Methode kannte ich noch nicht.

Wenn ich nun also diesen Code habe:

html2canvas(document.body, {
onrendered: function(canvas) {
document.body.appendChild(canvas);
	     },
letterRendering: true,
height: 720
});

Gibt er mir direkt das Bild aus. Wie kann ich die Datei jetzt abspeichern?

Indem du das Bild an ein PHP Script postet welches es dann speichert. (Wenn du es am Server speichern willst?)

Aber mich würde eher interessieren warum es mit PHP nicht funktionieren sollte? Da liegt denke ich mal eher ein Fehler deinerseits vor.

[.Acu³]

Okay. Das ist nun mein Code:

<script type=text/javascript>

html2canvas(document.body, {

onrendered: function(canvas) {
document.body.appendChild(canvas);
    var imageInfo = canvas.toDataURL()
    var loc_url = 'save.php?name='+ imageInfo;
    window.location = loc_url;
},
letterRendering: true,
height: 720,
width: 480,
timeout: 1000000,
 } );

 
 </script>

der logischerweise dazu führt:

Request-URI Too Large

The requested URL's length exceeds the capacity limit for this server.

also via POST und nicht GET.. naja bekomm ich hin. Danke euch.

[PseudoPsycho]

Originally Posted by .Acu³

also via POST und nicht GET.. naja bekomm ich hin. Danke euch.

Ja, so 'ne data-URL ist für gewöhnlich recht lang. Hinzu kommt, dass du sie auf dem Server wieder dekodieren musst.
Die vermutlich einfachere Variante wäre, das Bild als Blob zu versenden.
Firefox unterstützt die Methode mozGetAsFile(), Webkit nicht.
Daher folgende Lösung (gefunden auf und auf den neuesten Stand gebracht):

function dataURItoBlob(dataURI) {
    var byteString = atob(dataURI.split(',')[1]);
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
    var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }
    var blob = new Blob([ab], {type:mimeString});
    return blob;
}

Diese Blob-Datei kannst du dann einem FormData-Element zuweisen und dieses per Ajax verschicken.

var blob=dataURItoBlob(canvas.toDataURL('image/jpeg'));
var data=new FormData();
data.append('screenshot', blob, 'screenshot.jpg');

Solltest du es mit nativem XMLHttpRequest versenden, kannst du dies wie gewöhnliche POST-Daten senden. jQuery benötigt ein paar zusätzliche Einstellungen, um FormData-Objekte zu versenden:

$.ajax('save.php', {data:data,type:'POST',processData:false,contentType:false})

Auf den Blob kannst du dann mit der gewöhnlichen Superglobalen $_FILES zugreifen (genau wie bei jedem anderen File-Upload).

PHP Code:

$screenshot=$_FILES['screenshot'];