cómo enviar contenido DIV a html5 CANVAS

Question

¿Es posible "dibujar" el contenido de un div en un lienzo ... he realizado la manipulación div con css, pero necesito un lienzo para "guardar" el contenido en jpg con la función .dataToURL

así que la pregunta es ... ¿sabes una de HTML, CSS, jQuery función que transferir el contenido de un div y dibujar a un lienzo

gracias de antemano

Answer 1

<canvas> no admite directamente la colocación de contenido HTML, ya que la combinación de esto con <IFRAME> podría conducir a la pérdida de información privada.

Lo que puedes hacer es crear dinámicamente la imagen SVG y dibujar esto en <canvas>. SVG tiene una mejor compatibilidad con el formato de texto enriquecido que <canvas>.

librería jQuery para la creación SVG dinámica:

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

(Ver Ejemplo de texto)

Answer 2

Salida html2Canvas, se necesita un elemento DOM y lo convierte en un lienzo, y luego se puede dibujar lienzo en el que otro lienzo algo como esto:

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 
    } 
}