Logo JavaScript

Convertir HTML a imagen con Javascript

En JavaScript, Programación, Web por trellat1 Comentario

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. Esto dependerá del uso que le queramos dar, pero suelen ser los formatos más usados en el entorno web.

Comentarios

  1. 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

Deja un comentario