Se puede convertir HTML a imagen, ya sea para exportar una vista de la web como si fuera una captura de pantalla por ejemplo, o para crear una especia de thumbnail o de vista preliminar. La imagen resultante de esta conversión puede ser en formato jpeg o png. El único requisito para poder llevar a cabo la conversión de HTML en imagen es que el contenido esté dentro de un div o capa, lo cual suele ser lo más habitual en la maquetación de cualquier web actual si está bien diseñada.
Para esto, usamos un div con un identificador que englobe el contenido a convertir en imagen. De esta forma se puede delimitar qué zona debe convertir de HTML a imagen.
Lo primero será referenciar a las siguientes librería de Javascript, las cuales contienen las funciones necesarias para llevar a cabo la conversión.
<script type="text/javascript" src="https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js"></script> <script type="text/javascript" src="http://www.nihilogic.dk/labs/canvas2image/base64.js"></script> <script type="text/javascript" src="http://www.nihilogic.dk/labs/canvas2image/canvas2image.js"></script>
Lo siguiente será crear la función en sí. En este ejemplo se le ha llamado Div2IMG, pero se le puede poner el nombre que se desee que sea descriptivo para el desarrollador. El parámetro que se le pasa a dicha función, será el nombre del div que se va a convertir a imagen.
function Div2IMG(divID){
html2canvas([document.getElementById(divID)], {
onrendered: function (canvas) {
var img = canvas.toDataURL('image/png'); //o por 'image/jpeg'
//display 64bit imag
document.write('<img src="'+img+'"/>');
}
}
}
Como se puede ver en el código de la función, para la variable img, se puede definir el tipo de imagen: png o jpeg. Así podremos convertir html a png o convertir html a jpg, según nos interese más. Esto dependerá del uso que le queramos dar, pero suelen ser los formatos más usados en el entorno web.
Hola necesito ayuda, trataré de expresarme lo mejor que pueda
Estoy utilizando una funcion pero quiero que esta funcion no me devuelva un objeto (porque no encuentro la base 64 entre tantas propiedades
Mi funcion es:
function compartir(){
var modal=document.getElementById(‘cerrar-modal’);
modal.click();
miObjeto={
onrendered: function (canvas) {
var img = canvas.toDataURL(‘image/jpeg’);
}
}
html2canvas([document.getElementById(‘container’)], miObjeto);
}
Que tengo que hacer para que al llamar compartir(); me devuelva unicamente la base? de antemano Gracias
Hola estoy intentando realizar esto, pero me encuentro con un problema y es que estoy generando graficas con la libreria c3.js en un div, pero esta ocupa una hoja de estilo css el problema es que cuando genera la imagen no la muestra con su css y la grafica sale mal, hay alguna manera de solucionar esto?
Muy buena la Función.
Los scripts base64.js y canvas2image.js no se cargan. Los deniega el servidor.
Puede que Estén ya implementados en el otro script, html2canvas.js.
En la función de ejecución falta un parentesis para que no de error:
function Div2IMG(divID){
html2canvas([document.getElementById(divID)], {
onrendered: function (canvas) {
var img = canvas.toDataURL(‘image/png’); //o por ‘image/jpeg’
//display 64bit imag
document.write(»);
}
})
}