Skip to content

Instantly share code, notes, and snippets.

@parzibyte
Created April 26, 2019 17:33
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save parzibyte/9e24e8fd9c2de294c309fc52df25f78d to your computer and use it in GitHub Desktop.
Save parzibyte/9e24e8fd9c2de294c309fc52df25f78d to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Tomar captura de página web</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css" />
</head>
<body>
<!--
En este caso le "tomamos" la foto al div. Podría ser a un div o
a cualquier elemento HTML
-->
<div id="contenedor">
<h1 class="is-size-1">Tomar captura de pantalla con html2canvas</h1>
<a href="//parzibyte.me/blog" target="_blank">By Parzibyte</a>
<div class="notification is-primary">
<p>Estamos probando la conversión de HTML a una imagen con html2canvas</p>
</div>
<table class="table is-bordered">
<thead>
<tr>
<th>Nombre</th>
<th>Versión</th>
</tr>
</thead>
<tbody>
<tr>
<td>KitKat</td>
<td>4.4</td>
</tr>
<tr>
<td>Lollipop</td>
<td>5</td>
</tr>
<tr>
<td>Marshmallow</td>
<td>6</td>
</tr>
<tr>
<td>Nougat</td>
<td>7</td>
</tr>
<tr>
<td>Oreo</td>
<td>8</td>
</tr>
<tr>
<td>Pie</td>
<td>9</td>
</tr>
</tbody>
</table>
<img style="max-width: 100%;" src="cosmos-4112660_1280.jpg">
</div>
<!--
El botón no aparece porque está fuera del div
-->
<button id="btnCapturar">Tomar captura</button>
<!--
En este elemento vamos a poner al canvas que será generado.
-->
<div id="contenedorCanvas" style="border: 1px solid red;">
</div>
<!--
Cargar el script de html2canvas, podría ser desde un servidor
propio o como yo lo hago: desde jsdelivr
-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.1/dist/html2canvas.min.js"></script>
<!--
Después de eso, cargar el script que contiene nuestra lógica
-->
<script src="script.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment