Este artículo le dirá y guiará a los usuarios para convertir un elemento div en una imagen usando AngularJS. El usuario generará una imagen desde la página web y también podrá convertir una parte particular de la página HTML en la imagen. Además, el usuario necesita una etiqueta HTML y una biblioteca de JavaScript html2canvas . Al usar esto, podemos crear las imágenes, es decir, convertir la página HTML en una imagen en formatos PNG o JPEG. También manejando el ul, li y la etiqueta div requerida para el formato de imagen. En resumen, la biblioteca html2canvas representará la página HTML en el formato de imagen preferido mencionado por el usuario. Significa que el usuario podrá crear la captura de pantalla del div o cualquier elemento de la página web.
Acercarse:
- Hay dos botones en la página web, uno se usa para obtener una vista previa de la imagen de la página web y el otro botón se usa para descargar la imagen de la página web.
- Convierta una página html en una imagen usando la biblioteca JavaScript html2canvas.
- Cuando el usuario hace clic en el botón de vista previa, se llama a la función html2canvas() y esta función también llama a otra función que agrega la vista previa de la imagen del lienzo.
- Cuando el usuario haga clic en el botón Descargar, primero cambie el documento a formato de imagen y luego comience a descargarlo en lugar de mostrar la imagen.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
How to convert an HTML element
or document into image ?
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
</script>
<script src=
"https://files.codepedia.info/files/uploads/iScripts/html2canvas.js">
</script>
</head>
<body>
<center>
<h2 style="color:green">
GeeksForGeeks
</h2>
<h2 style="color:purple">
Convert div to image
</h2>
<div id="html-content-holder" style="background-color: #F0F0F1;
color: #00cc65; width: 500px;padding-left: 25px;
padding-top: 10px;">
<strong>
GeeksForGeeks
</strong>
<hr/>
<h3 style="color: #3e4b51;">
ABOUT US
</h3>
<p style="color: #3e4b51;">
<b>GeeksForGeeks</b> is a portal and a forum
for many tutorials focusing on Programming
ASP.Net, C#, jQuery, AngularJs, Gridview, MVC,
Ajax, Javascript, XML, MS SQL-Server, NodeJs,
Web Design, Software and much more
</p>
<p style="color: #3e4b51;">
How many times were you frustrated while
looking out for a good collection of
programming/algorithm/interview questions?
What did you expect and what did you get?
This portal has been created to provide
well written, well thought and well
explained solutions for selected questions.
</p>
</div>
<input id="btn-Preview-Image" type="button"
value="Preview" />
<a id="btn-Convert-Html2Image" href="#">
Download
</a>
<br/>
<h3>Preview :</h3>
<div id="previewImage"></div>
<script>
$(document).ready(function() {
// Global variable
var element = $("#html-content-holder");
// Global variable
var getCanvas;
$("#btn-Preview-Image").on('click', function() {
html2canvas(element, {
onrendered: function(canvas) {
$("#previewImage").append(canvas);
getCanvas = canvas;
}
});
});
$("#btn-Convert-Html2Image").on('click', function() {
var imgageData =
getCanvas.toDataURL("image/png");
// Now browser starts downloading
// it instead of just showing it
var newData = imgageData.replace(
/^data:image\/png/, "data:application/octet-stream");
$("#btn-Convert-Html2Image").attr(
"download", "GeeksForGeeks.png").attr(
"href", newData);
});
});
</script>
</center>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por AbhinandanBhatnagar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA