html2canvas Bild aus wysiwyg editor

Computer: Software & Programmierung JavaScript & Script-Sprachen
#1

Hallo Zusammen,

ich habe das Plugin html2canvas heruntergeladen und möchte nun den Inhalt eines wyswig-Editors in eine canvas-Element sHier heruntergeladen

Wenn ich den Inhalt des Editors in ein div ausgeben will funktioniert das sehr gut mit
Code:

 $(function(){
 $('#edit')
 .editable({
 inlineMode: false,
 useClasses: true
 })
 .on('editable.contentChanged', function (e, editor) {
 $('#preview').html(editor.getHTML());
 })
 });

Nur in das canvas bekomme ich das nicht

Als demo liegt mir folgendes vor

Code:

html2canvas(document.body, {
 onrendered: function(canvas) {
 document.body.appendChild(canvas);
 }
 });

Kann mir bitte jemand dabei helfen?

Gruss

Alex

#2

ich habe das Plugin html2canvas heruntergeladen und möchte nun
den Inhalt eines wyswig-Editors in eine canvas-Element sHierheruntergeladen

Wenn ich den Inhalt des Editors in ein div ausgeben will
funktioniert das sehr gut mit
Code:

$(function(){
$(’#edit’)
.editable({
inlineMode: false,
useClasses: true
})
.on(‚editable.contentChanged‘, function (e, editor) {
$(’#preview’).html(editor.getHTML());
})
});

Nur in das canvas bekomme ich das nicht

naja, es gilt dem html2canvas als 1. parameter den knoten u geben, den er rendern soll und als 2. einen callback, das output element aufzubauen.

ich würde es mir so vorstellen. musst du dich herantasten, ob die ausgabe in onrendered erstmal mit dem originalbeispiel funktioniert etc…

.on('editable.contentChanged', function (e, editor) {
 //das html in einen knoten sichern
 $('#preview').html(editor.getHTML());
 //den knoten ins html2canvas geben
 html2canvas($('#preview').get(0), {
 onrendered: function(canvas) {
 //das erzeugte element wiederum ausgeben
 $('#preview').html(canvas);
 }
 });
}

kriegst du vom editor auch direkt einen knoten zurueck? dann könntest du den einfach ins html2canvas geben.
oder nimmt html2canvas auch html quelltext entgegen, statt domnode? dann koennte man es vereinfachen.

.on('editable.contentChanged', function (e, editor) {
 //das html ins html2canvas geben
 html2canvas( editor.getHTML() , {
 onrendered: function(canvas) {
 //das erzeugte element wiederum ausgeben
 $('#preview').html(canvas);
 }
 });
}