Hoy te traigo como crear una imagen sencilla con JAVASCRIPT. Este te puede servir para hacer captchas o cualquier otra cosa en la que la imagen la generes aleatoria mente dependiendo de algunos valores.
El secreto
El secreto esta, básicamente, en utilizar CANVAS. Yo es la primera vez que me he enfrentado con este control y la verdad es que es mas fácil de utilizar de lo que parece. Con esto se pueden crear imágenes con polígonos, texto y colores. Es muy utilizado para crear vídeo juegos en javascript. Como es costumbre no me suelo liar a explicar el control, pero os dejo los links con la documentación que a mi me ha ayudado.
Por ejemplo, un CAPTCHA
Como normalmente este tipo de necesidades con para evitar el tema de spam, el ejemplo que os dedico hoy es para recibir un texto y utilizarlo como captcha.
function CreaIMG(texto) {
var ctxCanvas = document.getElementById('captcha').getContext('2d');
var fontSize = "30px";
var fontFamily = "Arial";
var width = 250;
var height = 50;
//tamaño de la imagen
ctxCanvas.canvas.width = width;
ctxCanvas.canvas.height = height;
//color de fondo
ctxCanvas.fillStyle = "whitesmoke";
ctxCanvas.fillRect(0, 0, width, height);
//lineas de distorsión
ctxCanvas.setLineDash([7, 10]);
ctxCanvas.lineDashOffset = 5;
ctxCanvas.beginPath();
var line;
for (var i = 0; i < (width); i++) {
line = i * 5;
ctxCanvas.moveTo(line, 0);
ctxCanvas.lineTo(0, line);
}
ctxCanvas.stroke();
//formato texto
ctxCanvas.direction = 'ltr';
ctxCanvas.font = fontSize + " " + fontFamily;
//texto posicion
var x = (width / 9);
var y = (height / 3) * 2;
//color del borde del texto
ctxCanvas.strokeStyle = "yellow";
ctxCanvas.strokeText(texto, x, y);
//color de relleno de texto
ctxCanvas.fillStyle = "red";
ctxCanvas.fillText(texto, x, y);
}
Espero que con los comentarios en el código sea suficiente para que lo podáis entender. Evidentemente, se puede complicar mas, a nivel captcha, al igual que se puede simplificar mucho mas.
Happy coding
#javascript #HTML #seguridad #utilidades