2011-10-04 17 views
9

E 'possibile "disegnare" il contenuto di un div su una tela ... ho fatto la manipolazione div con css, ma ho bisogno di canvas per "salvare" il contenuto in jpg con la funzione .dataToURLcome inviare contenuti DIV a html5 CANVAS

quindi la domanda è ... sai un HTML, CSS, la funzione jQuery che trasferire il contenuto di un div e disegnare ad una tela

grazie in anticipo

+5

Qualcosa come https://github.com/niklasvh/html2canvas? – Niklas

+1

silly me google div2canvas! ... lo verificherò – menardmam

+0

Lo script è ancora in uno stato molto sperimentale, quindi non è consigliabile utilizzarlo in un ambiente di produzione né iniziare a creare applicazioni con esso ancora, poiché ci sarà ancora grandi cambiamenti fatti. Tuttavia, si prega di testarlo e riportare i risultati, soprattutto se qualcosa dovrebbe funzionare, ma viene visualizzato in modo non corretto. – menardmam

risposta

3

<canvas> non supporta direttamente l'immissione di contenuto HTML su di esso, in quanto la combinazione di questo con <IFRAME> potrebbe potenzialmente portare alla perdita di informazioni private.

Quello che puoi fare è creare dinamicamente un'immagine SVG e disegnarla su <canvas>. SVG offre un supporto migliore per la formattazione RTF rispetto allo <canvas>.

libreria jQuery per la creazione di SVG dinamica:

http://keith-wood.name/svg.html

(vedere l'esempio di testo)

1

Partenza html2Canvas, ci vuole un elemento DOM e lo converte in una tela, e poi si può disegnare quella tela su un altro qualcosa di tela di simile:

http://html2canvas.hertzen.com/

var domElement = document.getElementById('myElementId'); 
html2canvas(domElement, { 
    onrendered: function (domElementCanvas) { 
     var canvas = document.createElement('canvas'); 
     canvas.getContext('2d').drawImage(domElementCanvas, 0, 0, 100, 100); 

     // do something with canvas 
    } 
}