Open aVolpe opened 8 years ago
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");
Se puede utilizar algo como https://html2canvas.hertzen.com/examples.html para realizar los screenshots.
Ver https://github.com/gitawego/cordova-screenshot
Mismas ventajas que opción 2, solo que el desarrollo es más rápido todavía
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
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.
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.
Se debe poder capturar la imagen con la frase aleatoria, para luego poder compartirla