Convert Html to Canvas

Question

Convert Html to Canvas

Navigation

#1 by (5 votes)

3

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

I do not want the html page to be rendered image. Ps .: Question at the level of knowledge.

javascript jquery html5 canvas

asked by anonymous 06.04.2016 / 00:43

1 answer

How to create an application from scratch in ASP.NET MVC? Invert the separated word order with str_replace in PHP

score 5 · Answer 1

Canvas does not render HTML, just "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 : Defines a stretch of HTML to be reused

Custom Elements : records a new tag and how it will be rendered

Shadow DOM : Isolates the tree of elements and 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">

See another example for a more complex web component I created for 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>