Exportar código HTML a imagen con html2canvas

Gracias a la librería html2Canvas se pueden exportar el código html como si fuera una imagen.

Dado este código html:

< div id="convierteImagen">
   < b>Hola Mundo< /b>
< /div>

Voy a poner dos ejemplos de uso.

Ejemplo 1 – Si simplemente queremos que en la propia página se cargue una imagen igual al trozo html con html2Canvas sería tan fácil como:
1.1 – Ponemos un botón que será el encargado de lanzar la función JavaScript que realice la tarea.

1.2 – Cómo se puede ver en la función a html2Canvas basta con indicarle el objeto que se quiere capturar.

function renderImg(type) {
	html2canvas(document.getElementById(type), {
		onrendered : function(canvas) {
			document.body.appendChild(canvas);
		},
		width : 470
	});
}

Ejemplo 2 – Vamos a suponer que queremos que se descarge el codigo html anterior como si fuera una imagen al hacer click en un boton. Para ello:
2.1 – Creamos un botón y en su evento onclick invocamos a la función que crea la imagen y la lanza para descargar. Además, ponemos una etiqueta < a > cuyo id será downloadLink (no se vera en la página pero la usaremos para lanzar la imagen).

2.2 – Creamos la función JavaScript que utiliza html2Canvas para crear la imagen.

function downImg(type) {
	html2canvas(document.getElementById(type), {
		onrendered : function(canvas) {
		   var dato = canvas.toDataURL("image/png");
		   var anchor = document.getElementById("downloadLink");
                   //asignamos un nombre al link
		   anchor.setAttribute('download', 'NombreParaImagen.png');
                   //asignamos la imagen
		   anchor.setAttribute('href', dato);
		   anchor.click(); //forzamos el click
		},
		width : 470
	});
}

Ejemplos

Aplicación que integra Spring-Boot + AngularJS + Thymeleaf

En mi repositorio de GitHub he dejado una apicación simple que integra Spring-Boot con AngularJS utilizando lo siguiente:

– Para la configuración de Spring se ha utilizado Spring Boot junto con los siguientes módulos
. . . . 1- Spring Data JPA -> como capa de persistencia.
. . . . 2- Spring Data REST con Spring HATEOAS -> para la capa de servicios rest con los que interactuará AngularJS.
. . . . 3- Spring Security -> para la Autenticación y Autorización de la aplicación.
. . . . 4- Spring MVC con Thymeleaf -> se utiliza para gestionar principalmente los listados de consulta, así como todas las vistas que no tienen formularios.
. . . . 5- AngularJS -> se utiliza para las vistas de los formularios de detalles.
. . . . 6- Bootstrap + Angular-ui + Font Awesome + Angular-Show-Errors -> para el diseño y maquetación del front end.
. . . . 7- JUnit -> pruebas unitarias.

– Se utilizan Base de datos y servidor embebidos a modo de ejemplo: H2 y Tomcat.

– Para la creación de informes se utiliza JasperReports. Se ha configurado el pom para que a partir de los ficheros /src/main/resources/static/reports/*.jrxml y genere los /src/main/webapp/jasper/*.jasper. Para ello basta con ejecutar mvn generate-resources.

– La gestión de dependencias se realiza con: Maven y bower.

Instalación
=========
1- Instalar maven (utilizada la 3.0.5)
2- Instalar el wraper de maven para spring-boot:

mvn -N io.takari:maven:wrapper

3- Se puede ejecutar de varias formas:

//Con maven:	
mvn spring-boot:run. 

//o bien

//Construyendo el jar:      
mvn clean package 
//Y haciéndolo correr con:  
java -jar target/springangularjs-0.0.1-SNAPSHOT.jar

4- Si todo va bien la aplicación correrá en: http://localhost:8080/
5- Copiar proyecto e importarlo al eclipse como proyecto de maven.
6- Recordar que para modificar las librerías de js es necesario bower. Para ello:
. . . . a- se necesita tener instalado node.js (https://nodejs.org/)
. . . . b- se necesita también tener instalado git (https://git-scm.com/download/win)
. . . . c- instalamos bower con:

                  npm install -g bower

. . . . d- finalmente ejecutando «bower install» en el proyecto nos colocara en el directorio /src/main/resources/static/bower_components las versiones de las librerías indicadas en el bower.json.

Todo el código esta subido al GitHub
Esquema de la Arquitectura
Digrama de clases

Bower

Bower es un gestor de dependencias para el desarrollo web frontend. Facilita la tarea de instalar y mantener al día las distintas librerías y frameworks del proyecto.

Instalación:
– Primero se necesita instalar node.js. Se descarga de https://nodejs.org/ y se instala el *.msi en windows.
Puedes comprobar que se ha instalado bien ejecutando por consola el comando:

node -v

– Después se instala git. Para ello hay que descargar y ejecutar https://git-scm.com/download/win

– Por último se instala el bower. Para ello necesitamos el comando npm que ya nos instaló node.js.

npm install -g bower

Para crear por primera vez el archivo bower.json lo más cómodo es, desde la raíz de tu proyecto, lanzar el comando:

bower init

El fichero bower.json sera similar a este:

{
  "name": “Prueba Bower”,
  "version": "0.0.0",
  "authors": [
    "Yo "
  ],
  "dependencies": {
    "jquery": "~3.1.0"
  }
}

En «dependencies» se indican las distintas librerías y sus versiones. El símbolo ~ indica que bower instalará la 3.1.0 o una superior cuando salga siempre que sea de la 3.1.x

Guía de comandos de bower

Herramientas para testeo de Microsoft Edge

Microsoft nos facilita una serie de herramientas gratuitas para mejorar el diseño y la accesibilidad de nuestros sitios web en las distintas plataformas.

Virtual machines
Te permite probar tu aplicación web desde cualquier versión de internet explorer mediante máquinas virtuales gratuitas que se pueden descargar. Disponibles para cualquier tipo de sistema operativo.
https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/windows/

RemoteIE
Mediante esta herramienta puedes probar de forma remota gratis con Azure RemoteApp en Windows, Mac, iOS o Android.
https://developer.microsoft.com/en-us/microsoft-edge/tools/remote/

Generate screenshots
Herramienta que te muestra como se ve tu sitio web a través de 9 navegadores y dispositivos más comunes.
https://developer.microsoft.com/en-us/microsoft-edge/tools/screenshots/

F12 Dev Tools
Uso de las propias herramientas de desarrollo de Microsoft Edge.
https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/f12-devtools-guide/

Site Scan
Herramienta que permite analizar tu sitio web. Detecta problemas de diseño y accesibilidad.
Analiza el código HTML, CSS y JavaScript de un sitio o aplicación web. Se advierte acerca de las prácticas tales como la especificación incompleta de las propiedades CSS, doctypes no válidos o incorrectos, y las versiones obsoletas de JavaScript populares de libraries.
https://developer.microsoft.com/en-us/microsoft-edge/tools/staticscan/

Otras Herramientas que pueden resultar útiles:
BrowserStack: Prueba todos los navegadores y dispositivos de forma interactiva desde su dispositivo preferido
Borland Silk Test: Asegura la calidad de la aplicación web a través de navegadores de escritorio y móviles.
Kraken.io: Permite optimizar sus imágenes, ahorrar ancho de banda y mejorar los tiempos de carga.

Web Components

Web Components son un conjunto de normas que actualmente se producen por el W3C que permiten la creación de widgets o componentes reutilizables en los documentos web y aplicaciones web. La intención detrás de ellos es llevar a la ingeniería del software basada en componentes para la World Wide Web. El modelo de componentes permite la encapsulación y la interoperabilidad de los elementos HTML individuales.

El apoyo a la Web Components está presente en algunos navegadores basados en WebKit como Google Chrome y Opera y se encuentra en la versión de Mozilla Firefox Nightly (requiere un cambio de configuración manual). Internet Explorer de Microsoft no ha implementado ninguna especificación de componentes web todavía. [1] la compatibilidad hacia atrás con los navegadores más antiguos se implementa utilizando polyfills basadas en JavaScript.

Web Components consta de 4 elementos principales que se pueden usar por separado o todos juntos:
– Custom Elements: Se trata de utilizar elementos personalizados.

– Shadow DOM: es un DOM encapsulado que coexiste dentro del DOM padre y permite definir elementos complejos como componentes de video, entre otros, y poder tanto reutilizar estos componentes como personalizar los existentes.

– HTML Imports: Importar ficheros html.
Ejemplo de uso:

< head>
  //referenciamos el fichero html warnings.html 
  //dentro de ese fichero hay una estructura DOM
  < link rel="import" href="warnings.html">
< /head>
< body>
  ...
  < script>
    //importamos a la variable content el fichero html
    var link = document.querySelector('link[rel="import"]');
    var content = link.import;

    //recuperamos a la variable domAux el DOM del fichero warning.html 
    //deseado.
    //en este caso es el DOM de un div cuyo class es warning
    var domAux = content.querySelector('.warning');

    //añadimos al body el DOM recuperado
    document.body.appendChild(domAux.cloneNode(true));
  < /script>
< /body>

– HTML Templates: Son platillas en HTML que se completan o utilizan con un modelo o colección de datos externa.

Wikipedia

XDK intel

Gracias a XDK intel podemos desarrollar aplicaciones en HTML 5 para luego generar aplicaciones para distintas plataformas:
Aplicaciones móviles: iOS, Android (nativo, Cordova, Crosswalk), Windows 8 Store, Windows Phone 8, Tizen, y Nook.
Aplicaciones web: Web, Chrome App, Fracebook App.

El XDK permite emular apps en dispositivos virtuales en distintos dispositivos (iPhone, Microsoft Surface, Google Nexus, …). Además, ofrece la capacidad de que los desarrolladores puedan almacenar su código en la nube de manera gratuita.

Video donde se puede ver la configuración de XDK y Demo de aplicativo


Making Native Mobile Apps with HTML5 Using the appMobi XDK


Write once and deploy to multiple platforms with HTML5 and Intel® XDK