El código HTML se puede convertir en una imagen por diferentes medios, como la biblioteca de JavaScript html2canvas o, a veces, también por CSS. Puede ser muy útil para los usuarios que desean compartir la imagen del código pero no pueden compartir el código exacto. El usuario generará una imagen de la página web y tendrá la opción de convertir una parte particular de la página HTML en la imagen.
Ejemplo 1: esta es una implementación relativamente fácil que convierte el código en una imagen usando CSS. El siguiente código no involucra ningún JavaScript de ninguna manera.
<!DOCTYPE html>
<html>
<head>
<title>HTML Code to Image</title>
<style>
.image {
text-align: center;
padding: 20px;
color: white;
font-size: 90px;
width: 800px;
height: 400px;
font-family: 'Times New Roman';
background-image: linear-gradient(
140deg, #3a9c50 0%, #006b18 100%);
}
</style>
</head>
<body>
<div class="image">
<h4>GEEKS FOR GEEKS</h4>
</div>
</body>
</html>
Producción:
Ejemplo 2: El ejemplo se implementa para convertir el código HTML en una imagen, donde el botón de vista previa muestra la foto que se convierte. Se ofrece la opción de descarga para guardarlo en la computadora local mediante el uso de la biblioteca JavaScript html2canvas .
<!DOCTYPE html>
<html>
<head>
<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>
<title>
How to render HTML to an image?
</title>
</head>
<body>
<div id="html-content-holder"
style="background-color: #F0F0F1;color:
#00cc65; width: 500px;
padding-left: 25px;
padding-top: 10px;">
<strong>GEEKS FOR GEEKS</strong>
<p style="color: #3e4b51;">
A Computer Science portal for geeks.
It contains well written, well thought
and well explained computer science
and programming articles, quizzes and ...
</p>
<p style="color: #3e4b51;">
A Computer Science portal for geeks.
It contains well written, well thought
and well explained computer science and
programming articles, quizzes and ...
</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");
var getCanvas; // Global variable
$("#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", "gfg.png")
.attr("href", newData);
});
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por mohitgouti y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA