-
-
Save parzibyte/9e24e8fd9c2de294c309fc52df25f78d to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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