Captura de la frase con la imagen para compartir

[aVolpe]

Se debe poder capturar la imagen con la frase aleatoria, para luego poder compartirla

[aVolpe]

Opción 1 - Dibujar todo en un canvas y luego copiar esa imagen

En html5 hay algo que se llama canvas, que es como un área de dibujo, nosotros podemos pegar una imagen y texto ahí y luego convertir el canvas en un png.

Algo así:

var c = document.getElementById("canvasParaQuitarFoto");
var ctx = c.getContext("2d");
var img = document.getElementById("imagenSanMiguel");
ctx.drawImage(img,10,10);
ctx.font = "30px Arial"; // la fuente que se quiere
ctx.strokeText("La frase",50,10);

Y luego quitar el png:

 var img    = c.toDataURL("image/png");

Ventajas

• La imagen siempre sera del mismo tamaño
• Te permite poner información adicional (como Generado con FrasesSanMiguel)

Desventajas

• Es más trabajo

[aVolpe]

Opción 2 - Utilizar una herramienta de screenshots

Se puede utilizar algo como https://html2canvas.hertzen.com/examples.html para realizar los screenshots.

Ventajas

• Más rápido
• No requiere tocar mucho el código

Desventajas

• La imagen que se genera depende del dispositivo, es decir, en un s3 mini se va a generar una imagen chica, y en un s6 una gigante.

[aVolpe]

Opción 3 - Utilizar una herramienta de screenshots para cordova

Ver https://github.com/gitawego/cordova-screenshot

Mismas ventajas que opción 2, solo que el desarrollo es más rápido todavía

[aVolpe]

Un problema importante de los enfoques que no son el de crear un canvas, es que el botón de Generar Frase va a salir en la foto

Alternativas

• Borrar el boton y luego agregarle
• No utilizar una libreria de captura de pantallas

[joseasantacruz]

probé la opción 3 y me funciona, capaz la opción 1 sea mejor, pero me resulto mas sencillo hacer la opción 3. Lo único que falta es agregar timeout para que no se vea el botón en la imagen.

[joseasantacruz]

Funciona con la opción 3, pero mi duda esta en si la función de captura tardaría mas en algunos dispositivos o no.. código: $timeout(function(){ $cordovaScreenshot.capture()},300); Osea si en mi caso el $cordovaScreenshot.capture() en algún dispositivo tarda mas de 0.3 seg me va a generar problemas.