Convert Html to Canvas

Question

Convert Html to Canvas

Asked 8 years, 8 months ago

Viewed 637 times

3

Is it possible to convert an html page to canvas? For example, I have a page built in Html5 and wanted this page to be all "minified" for just one tag ?

I don’t want the html page to become an image. Ps.: Question of level of knowledge.

2 answers

Browser other questions tagged javascript jquery html5 canvas

You are not signed in. Login or sign up in order to post.

by utluiz • **72,075** points · Answer 1 · 2016-04-06T01:28:15+00:00

Canvas does not render HTML, only "images". There are some libraries that may try to convert HTML into images, such as html2canvas.

However, you can create a Web Component to have "a page in a tag".

In the example below, you can see three technologies working together:

Templates: sets an HTML snippet to be reused
Custom Elements: registers a new tag (element) and how it will be rendered
Shadow DOM: isolates the element tree and the styles that are inside an element, in this case, our component

document.registerElement('super-componente', { 
  prototype: Object.create(HTMLElement.prototype, {
    createdCallback: {
      value: function() {
        var template = document.querySelector('#super-componente');
        console.log(template);
        var clone = document.importNode(template.content, true);
        this.createShadowRoot().appendChild(clone);
      }
    }
  })
});

<template id="super-componente">
  <style>
    * { color: red }
  </style>
  <div>
    <content></content>
  </div>
</template>

<h1>Minha página</h1>
<super-componente>
  <h2>Título 1</h2>
  <p>conteúdo 1</p>
</super-componente>
<super-componente>
  <h2>Título 2</h2>
  <p>conteúdo 2</p>
</super-componente>

You can even leave the component in another HTML file and import it into other pages like this:

<link rel="import" href="super-componente.html">

Behold another example more complex of a web component I created these days in a separate file:

<template id="mmd-preview-template">
    <style>
        @import url("<?php echo plugin_dir_url(__FILE__); ?>css/editor-preview.css");
<?php if (file_exists(wp_get_theme()->get_template_directory() . '/mmd-preview-editor.css')) { ?>
        @import url("<?php echo wp_get_theme()->get_template_directory_uri(); ?>/mmd-preview-editor.css");
<?php } ?>
    </style>
    <div class='mmd-preview-content prettyprint'></div>
</template>
<?php if (file_exists(wp_get_theme()->get_template_directory() . '/mmd-preview-editor.js')) { ?>
<script type="text/java" src=""<?php echo wp_get_theme()->get_template_directory_uri(); ?>/mmd-preview-editor.js""></script>
<?php } ?>
<script>
    var mmd_template = document.currentScript.ownerDocument.querySelector('#mmd-preview-template');
    var mmdPreview = document.registerElement('mmd-preview', {
        prototype: Object.create(HTMLElement.prototype, {
            createdCallback: {
                value: function() {
                    var root = this.createShadowRoot();
                    var clone = document.importNode(mmd_template.content, true);
                    root.appendChild(clone);
                }
            },
            content: {
                value: function() {
                    return this.shadowRoot.querySelector('.mmd-preview-content').innerHTML;
                }
            },
            update: {
                value: function(content) {
                    this.shadowRoot.querySelector('.mmd-preview-content').innerHTML = content;
                    this.dispatchEvent(new CustomEvent('previewComponentUpdated', { detail: {
                        'element': this.shadowRoot.querySelector('.mmd-preview-content'),
                        'content': content
                    }}));
                    var changedElement = this.shadowRoot.querySelector('.mmd-changed');
                    if (changedElement) {
                        this.dispatchEvent(new CustomEvent('previewComponentElementChanged', { detail: {
                            'element': changedElement
                        }}));
                    }
                }
            }
        })
    });
</script>

by João Machado • **132** points · Answer 2 · 2019-07-21T02:11:05+00:00

<!DOCTYPE html> 
<html> 
<head>
<meta charset="utf-8">
<title> </title>
</head> 
<body>
<canvas id="canvas" title="canvas" style="outline: 1px solid red;"></canvas>
<div style="background-color: red">teste</div>
<div style="background-color: green">teste</div>
<div style="background-color: blue">teste</div>
</body>
</html>

<script>
document.body.onload = function(){ htmL() }

function htmL(){
html = document.documentElement

height = Math.max( document.body.scrollHeight, document.body.offsetHeight, 
                       html.clientHeight, html.scrollHeight, html.offsetHeight )
width  = Math.max( document.body.scrollWidth, document.body.offsetWidth, 
                       html.clientWidth, html.scrollWidth, html.offsetWidth )

html.setAttribute( 'xmlns', html.namespaceURI )
xhtml = new XMLSerializer().serializeToString( html )
concatnameSspace( xhtml, width, height )
}

function concatnameSspace( xhtml, width, height ){
svg = ''.concat( '<svg xmlns="http://www.w3.org/2000/svg" width="', width, '" height="', height, '">', 
'<foreignObject width="100%" height="100%">', xhtml, '</foreignObject></svg>' )
svgToimg( svg )
}

function svgToimg( svg ){
img = new Image()
img.onload = function(event){ imgTocanvas(event.target, event.target.naturalWidth, event.target.naturalHeight) }
img.src = 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent( svg )
}

function imgTocanvas( img, width, height ) {
canvas = document.getElementById('canvas')
canvas.width  = 147 // width
canvas.height = 210 // height
context = canvas.getContext('2d')
context.drawImage( img, 0, 0, canvas.width, canvas.height )
}
</script>