[JS/Flash] HTML in Grafik konvertieren

04/07/2013 14:13 .Acu³#1
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.
04/07/2013 14:32 NotEnoughForYou#2
Auf die schnelle würde mir nur einfallen mittels canvas das ganze als Bild zeichnen zu lassen.
04/07/2013 20:21 PseudoPsycho#3
Quote:
Originally Posted by NotEnoughForYou View Post
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 [Only registered and activated users can see links. Click Here To Register...] den HTML-Code in einem Canvas-Element darzustellen und anschließend mittels toDataURL() in ein Bild umzuwandeln.
04/11/2013 17:48 .Acu³#4
Danke, die Methode kannte ich noch nicht.

Wenn ich nun also diesen Code habe:
Code:
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?
04/11/2013 18:09 boxxiebabee#5
Quote:
Originally Posted by .Acu³ View Post
Danke, die Methode kannte ich noch nicht.

Wenn ich nun also diesen Code habe:
Code:
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.
04/11/2013 20:58 .Acu³#6
Okay. Das ist nun mein Code:
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:

Code:
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.
04/12/2013 18:09 PseudoPsycho#7
Quote:
Originally Posted by .Acu³ View Post
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 [Only registered and activated users can see links. Click Here To Register...] und auf den neuesten Stand gebracht):
HTML Code:
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.
HTML Code:
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:
HTML Code:
$.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'];