How to convert an HTML element to a canvas element?

Question

It would be incredibly useful to temporarily convert a regular element to canvas . For example, let's say I have a div style that I want to flip. I want to dynamically create a canvas, "render" an HTMLElement in a canvas, hide the original element and animate the canvas.

Can this be done?

Answer 1

Unfortunately, the browser will not display HTML in the canvas.

This can be a potential security risk if you can, since HTML can include content (in particular, images and frames) from third-party sites. If canvas can turn HTML content into an image, and then you read the image data, you can potentially extract privileged content from other sites.

To get the canvas from HTML, you have to write your own HTML rendering from scratch using drawImage and fillText , which is a potentially huge task. There is one such attempt, but it is a bit dodgy and far from complete. (He even tries to parse HTML / CSS from scratch, which I think is crazy! It’s easier to start from the actual DOM node with the styles applied and read the style using getComputedStyle and the relative position of its parts using offsetTop and others.)

Answer 2

There is a library that is trying to do what you say.

See examples and get the code

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

http://html2canvas.hertzen.com/

It reads the DOM from html and prints it to the canvas, does not work on some, but generally works.

Answer 3

Based on a Mozdev entry that links to natevw, I launched a small project to render HTML to canvas in Firefox, Chrome, and Safari. So, for example, you can simply do:

 rasterizeHTML.drawHTML('<span class="color: green">This is HTML</span>' + '<img src="local_img.png"/>', canvas); 

The source code and a more extensive example are here .

Answer 4

Check out this MDN guide: https://developer.mozilla.org/en/HTML/Canvas/Drawing_DOM_objects_into_a_canvas (archived)

Alternative link (2019): https://reference.codeproject.com/book/dom/canvas_api/drawing_dom_objects_into_a_canvas

It uses a temporary SVG image to include the HTML content as an “external element”, and then renders the SVG image mentioned in the canvas element. However, there are significant limitations on what you can include SVG in your image. (See the Security section for details.)

Answer 5

You can use the dom-to-image library (I am the maintainer).
Here's how you might approach your problem:

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

And here is jsfiddle

Answer 6

No such thing, sorry.

Although spec indicates:

A future version of the 2D context API can provide a way to render fragments of documents created using CSS directly onto the canvas.

What could be as close as possible.

Many people want to deal with ctx.drawArbitraryHTML/Element , but nothing is built there.

The one exception is Mozilla exclusive drawWindow , which draws a snapshot of the contents of the DOM window in the canvas. This feature is available only for code that works with Chrome privileges ("local only"). This is not allowed in regular HTML pages. So you can use it to write FireFox extensions, such as which it does , but what it is.

Answer 7

You can rid yourself of the transformations, you can use CSS3 Transitions to switch the <div> and <ol> and any HTML tag that you want. Here are some source code demos that explain to watch and find out: http://www.webdesignerwall.com/trends/47-amazing-css3-animation-demos/

Answer 8

The simplest solution for animating DOM elements is to use CSS transitions / animations, but I think you already know this, and you're trying to use canvas to create CSS that doesn't let you do it. What about CSS custom filters ? you can transform your elements in any way imaginable if you know how to write shaders. Some other link and don't forget to check the CSS filter filter .
Note. As you can probably assume, browser support is poor.

Answer 9

the following code can be used in two modes, mode 1 will save the html code for the image, mode 2 will save the html code on the canvas.

this code works with the library: https://github.com/tsayen/dom-to-image

* "id_div" is the identifier of the html element you want to convert.

** "canvas_out" is the identifier of the div that the canvas will contain, so try this code.

  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"); }); } 

so if you want to save the image just add this function:

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

Usage example:

  <html> <head> </script src="/dom-to-image.js"></script> </head> <body> <div id="container"> All content that want to transform </div> <button onclick="Guardardiv('container');">Convert<button> <!-- if use mode 2 --> <div id="canvas_out"></div> </html> 

Comment if this works. Comenten si les sirvio :)

Answer 10

 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(); } }