¿Cómo puedo convertir un elemento HTML en un elemento canvas?

Sería increíblemente útil poder convertir temporalmente un elemento regular en un canvas . Por ejemplo, supongamos que tengo un div estilo que quiero voltear. Quiero crear dinámicamente un canvas, “renderizar” el elemento HTMLElement en el canvas, ocultar el elemento original y animar el canvas.

Se puede hacer?

Lo sentimos, el navegador no procesará HTML en un canvas.

Sería un riesgo de seguridad potencial si pudiera, ya que HTML puede incluir contenido (en particular imágenes e iframes) de sitios de terceros. Si canvas puede convertir contenido HTML en una imagen y luego leer los datos de imagen, podría extraer contenido privilegiado de otros sitios.

Para obtener un canvas de HTML, básicamente debe escribir su propio renderizador HTML desde cero utilizando drawImage y fillText , que es una tarea potencialmente enorme. Hay un bash de este tipo aquí, pero es un poco dudoso y está muy lejos de completarse. (Incluso intenta analizar el HTML / CSS desde cero, lo que creo que es una locura! Sería más fácil comenzar desde un nodo DOM real con estilos aplicados, y leer el estilo usando getComputedStyle y las posiciones relativas de partes de él usando offsetTop et al.)

Hay una biblioteca que intenta hacer lo que dices.

Vea estos ejemplos y obtenga el código

http://hertzen.com/experiments/jsfeedback/

http://html2canvas.hertzen.com/

Lee el DOM, desde el html y lo renderiza en un canvas, falla en algunos, pero en general funciona.

Sobre la base de la publicación de Mozdev que natevw hace referencia, comencé un pequeño proyecto para renderizar HTML a canvas en Firefox, Chrome y Safari. Entonces, por ejemplo, simplemente puede hacer:

 rasterizeHTML.drawHTML('This is HTML' + '', canvas); 

El código fuente y un ejemplo más extenso están aquí .

Eche un vistazo a este tutorial en MDN: https://developer.mozilla.org/en/HTML/Canvas/Drawing_DOM_objects_into_a_canvas

Utiliza una imagen SVG temporal para incluir el contenido HTML como un “elemento extraño”, luego convierte dicha imagen SVG en un elemento canvas. No obstante, existen restricciones significativas sobre lo que puede incluir en una imagen SVG de esta manera. (Consulte la sección “Seguridad” para más detalles).

Puede usar la biblioteca dom-to-image (soy el mantenedor).
Así es como podría abordar su problema:

 var parent = document.getElementById('my-node-parent'); var node = document.getElementById('my-node'); var canvas = document.createElement('canvas'); canvas.width = node.scrollWidth; canvas.height = node.scrollHeight; domtoimage.toPng(node).then(function (pngDataUrl) { var img = new Image(); img.onload = function () { var context = canvas.getContext('2d'); context.translate(canvas.width, 0); context.scale(-1, 1); context.drawImage(img, 0, 0); parent.removeChild(node); parent.appendChild(canvas); }; img.src = pngDataUrl; }); 

Y aquí está jsfiddle

No hay tal cosa, lo siento.

Aunque la especificación dice:

Una versión futura de la API de contexto 2D puede proporcionar una forma de procesar fragmentos de documentos, representados mediante CSS, directamente en el canvas.

Que puede ser lo más cerca que puedas llegar.

Mucha gente quiere un tipo de acuerdo ctx.drawArbitraryHTML/Element pero no hay nada integrado así.

La única excepción es drawWindow exclusivo de drawWindow , que dibuja una instantánea de los contenidos de una ventana DOM en el canvas. Esta función solo está disponible para el código que se ejecuta con privilegios de Chrome (“solo local”). No está permitido en páginas HTML normales. Entonces puede usarlo para escribir extensiones de FireFox como esta, pero eso es todo.

Puede ahorrarse las transformaciones, puede usar CSS3 Transitions para voltear

y

    y cualquier etiqueta HTML que desee. Aquí hay algunas demostraciones con el código fuente para ver y aprender: http://www.webdesignerwall.com/trends/47-amazing-css3-animation-demos/

    La solución más sencilla para animar los elementos DOM es usar transiciones / animaciones CSS, pero creo que ya lo sabes y tratas de usar canvas para hacer cosas que CSS no te permite hacer. ¿Qué pasa con los filtros personalizados de CSS ? puede transformar sus elementos de cualquier forma imaginable si sabe cómo escribir sombreadores. Algún otro enlace y no te olvides de verificar el laboratorio de filtros CSS .
    Nota : Como probablemente pueda imaginar el soporte del navegador es malo.

    el siguiente código se puede usar en 2 modos, el modo 1 guarda el código html en una imagen, el modo 2 guarda el código html en un canvas.

    este código funciona con la biblioteca: https://github.com/tsayen/dom-to-image

    * “id_div” es la identificación del elemento html que desea transformar.

    ** el “canvas_out” es el id del div que contendrá el canvas así que prueba este código. :

      function Guardardiv(id_div){ var mode = 2 // default 1 (save to image), mode 2 = save to canvas console.log("Process start"); var node = document.getElementById(id_div); // get the div that will contain the canvas var canvas_out = document.getElementById('canvas_out'); var canvas = document.createElement('canvas'); canvas.width = node.scrollWidth; canvas.height = node.scrollHeight; domtoimage.toPng(node).then(function (pngDataUrl) { var img = new Image(); img.onload = function () { var context = canvas.getContext('2d'); context.drawImage(img, 0, 0); }; if (mode == 1){ // save to image downloadURI(pngDataUrl, "salida.png"); }else if (mode == 2){ // save to canvas img.src = pngDataUrl; canvas_out.appendChild(img); } console.log("Process finish"); }); } 

    por lo tanto, si desea guardar en la imagen solo agregue esta función:

      function downloadURI(uri, name) { var link = document.createElement("a"); link.download = name; link.href = uri; document.body.appendChild(link); link.click(); } 

    Ejemplo de uso:

           
    All content that want to transform

    Comenta si ese trabajo. Comenten si les sirvio 🙂

     function convert() { dom = document.getElementById('divname'); var script, $this = this, options = this.options, runH2c = function(){ try { var canvas = window.html2canvas([ document.getElementById('divname') ], { onrendered: function( canvas ) { window.open(canvas.toDataURL()); } }); } catch( e ) { $this.h2cDone = true; log("Error in html2canvas: " + e.message); } }; if ( window.html2canvas === undefined && script === undefined ) { } else {. // html2canvas already loaded, just run it then runH2c(); } }