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.
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.
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:
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>