3

É possível converter uma página html em canvas? Por exemplo, tenho uma página contruída em html5 e queria que essa página fosse toda "minificada" para apenas uma tag ?

Não quero que a página html seja transformado imagem. Ps.: Pergunta a nível de conhecimento.

2 Respostas 2

5

Canvas não renderiza HTML, só "imagens". Existem algumas bibliotecas que podem tentar converter o HTML em imagens, tal como html2canvas.

Entretanto, você pode criar um Web Component para ter "uma página em uma tag".

No exemplo abaixo, você pode ver três tecnologias trabalhando em conjunto:

  1. Templates: define um trecho de HTML para ser reusado
  2. Custom Elements: registra uma nova tag (elemento) e a forma como ele será renderizado
  3. Shadow DOM: isola a árvore de elementos e os estilos que estão dentro de um elemento, no caso, o nosso componente

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>

Você pode inclusive deixar o componente em outro arquivo HTML e importá-lo em outras páginas assim:

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

Veja outro exemplo mais complexo de um componente web que criei por esses dias num arquivo separado:

<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>
2
  • utluiz, fiz essa pergunta por que o Google utiliza isso na exibição de imagens dos locais do Google Maps. Acesse este link e inspecione, por favor.google.com.br/maps/place/Av.+Paulista,+S%C3%A3o+Paulo+-+SP/… Commented 6/04/2016 às 20:57
  • @DavidDamasceno Não vejo nenhum elemento dentro do <canvas>. Entretanto, nada impede a página de colocar tags por cima do canvas através de posicionamento. Mas não está dentro, apenas sobrepondo visualmente,
    – utluiz
    Commented 7/04/2016 às 1:00
0

<!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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .