19

Parece ser extenso pero es necesario para llegar a la idea.

Estoy desarrollando una imagen captcha una de mis ideas era ejemplar una imagen captcha similar al captcha de texto de google.

introducir la descripción de la imagen aquí

No he logrado crear el mismo estilo pero he generado una imagen captcha algo similar y creo que más original para un sistema propio.

introducir la descripción de la imagen aquí

El texto de la imagen la genero de esta forma:

imagettftext($image,25,mt_rand(-40,30),10,30,$black,"resources/fonts/font.ttf",$first); //tamaño de la fuente se realiza en la primera numeración(25)
imagettftext($image,25,mt_rand(-40,30),30,30,$black,"resources/fonts/font1.ttf",$second); //giro de la fuente se realiza en la segunda y tercera numeración (-40,30)
imagettftext($image,25,mt_rand(-40,30),50,30,$black,"resources/fonts/font2.ttf",$third); // Espacio la cuarta, alto la quinta (50,30)
imagettftext($image,25,mt_rand(-40,30),70,30,$black,"resources/fonts/font3.ttf",$fourth); // se puede cambiar varios modelo de fuente

Para un código más ordenado y optimizado trate de implementar un array pero la imagen no cargo.

$fonts = array(
    'font'  => array('spacing' => -3, 'minSize' => 27, 'maxSize' => 30, 'font' => 'resources/fonts/font.ttf'),
    'font1'  => array('spacing' =>-1.5,'minSize' => 28, 'maxSize' => 31, 'font' => 'resources/fonts/font1.ttf'),
    'font2' => array('spacing' => -2, 'minSize' => 24, 'maxSize' => 30, 'font' => 'resources/fonts/font2.ttf'),
    'font3'  => array('spacing' => -2, 'minSize' => 30, 'maxSize' => 38, 'font' => 'resources/fonts/font3.ttf'),
    'font4' => array('spacing' => -2, 'minSize' => 24, 'maxSize' => 34, 'font' => 'resources/fonts/font4.ttf'),
    'font5'     => array('spacing' => -2, 'minSize' => 28, 'maxSize' => 32, 'font' => 'resources/fonts/font5.ttf'),
    'font6' => array('spacing' =>-1.5,'minSize' => 28, 'maxSize' => 32, 'font' => 'resources/fonts/font6.ttf'),
    'font7'    => array('spacing' => -2, 'minSize' => 28, 'maxSize' => 34, 'font' => 'resources/fonts/font7.ttf'),
    'font8' => array('spacing' => -1, 'minSize' => 20, 'maxSize' => 28, 'font' => 'resources/fonts/font8.ttf'),
  );

El color de la fuente, un color diferente por cada actualización de la página:

$black = imagecolorallocate($image,rand(78,181),rand(163,35),rand(36,7));

El problema de este parámetro es conseguir el color a mi gusto con un array sería mucho mejor pero se me presentó el mismo problema anterior.

$black = array(
  array(17,70,121),
  array(12,133,25),
  array(114,26,7),
  array(38,44,10),
  array(16,113,52),
  array(123,29,26)
);   

El color de fondo de la imagen es blanco

$white = imagecolorallocate($image,255,255,255);

No se si es posible crear un color de fondo transparente al añadir la variación de un rgba.

rgba(82, 56, 76, 0.15);

De esta forma:

imagecolorallocate($image,82, 56, 76, 0.15);

no imprime la imagen.

Analizado los diferentes tipos de captcha en la web he observado en algunos captcha donde el texto de la imagen es personalizado, esto se debe a librerías .txt personalizadas donde el archivo .txt tiene diferentes texto personalizados utilizados como texto de la imagen captcha.

A diferencia de una imagen aleatoria:

$source = "abcdefghijklmnopqrstuvwxyz0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";

Sería útil poder reemplazar un texto aleatorio a un texto personalizado mediante librerías .txt

Mi código captcha en el diseño actual captcha.php.

<?php
session_start();
$image = imagecreatetruecolor(120,50); //Ancho y alto de la imagen
$white = imagecolorallocate($image,255,255,255); // Color de fondo de la imagen
$black = imagecolorallocate($image,rand(78,181),rand(163,35),rand(36,7)); //Cambio de color de la fuente al refrescar

imagefill($image,0,0,$white);


imagerectangle($image,1,1,99,39 ,$white); // Configura el color del marco

$source = "abcdefghijklmnopqrstuvwxyz0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";
$first = $source[mt_rand(0,61)];
$second = $source[mt_rand(0,61)];
$third = $source[mt_rand(0,61)];
$fourth = $source[mt_rand(0,61)];
$_SESSION['captcha_secure'] = $first.$second.$third.$fourth;
imagettftext($image,25,mt_rand(-40,30),10,30,$black,"resources/fonts/Quixley.ttf",$first); //tamaño de la fuente se realiza en la primera numeracion -> (25)
imagettftext($image,25,mt_rand(-40,30),30,30,$black,"resources/fonts/AntykwaBold.ttf",$second); //giro de la fuente se realiza en la segunda y tercera numeración -> (-40,30)
imagettftext($image,25,mt_rand(-40,30),50,30,$black,"resources/fonts/Ding-DongDaddyO.ttf",$third); // Espacio la cuarta, alto la quinta -> (50,30)
imagettftext($image,25,mt_rand(-40,30),70,30,$black,"resources/fonts/Duality.ttf",$fourth); // se puede cambiar varios modelo de fuente

// Para añadir más caracters a la imagen se debe multiplicar estos parametros al caracters deseado
/*
imagettftext($image,25,mt_rand(-40,30),70,30,$black,"resources/fonts/Duality.ttf",$fourth);
*/

header("content-type:image/png");
imagepng($image);
?>
2
  • @rnd no amigo, no me molesta si no me he expresado bien pido disculpas.
    – Otto
    Commented el 29 dic. 2016 a las 20:03
  • 1
    Hola @MarcosGallardo la verdad no entiendo aún sobre utilizar clase el resultado que deseó tener es similar al texto del captcha de Google pero más de aquello es poder integrar el array al sistema captcha utilizar el array del color y el array de la fuente del captcha como nota opcional poder utilizar un texto personalizado en la imagen captcha a través de un archivo .txt pero es opcional el problema que se me ha presentado es poder vincular el arry para sustituir el código actual.
    – Otto
    Commented el 31 dic. 2016 a las 16:27

3 respuestas 3

10
+150

En base a este comentario

el resultado que deseó tener es similar al texto del captcha de Google pero más de aquello es poder integrar el array al sistema captcha utilizar el array del color y el array de la fuente del captcha como nota opcional poder utilizar un texto personalizado en la imagen captcha a través de un archivo .txt

  • Para crear una imagen utilizando un array para los colores, otro array para las fuentes y obtener una palabra de un archivo .txt, puedes hacer lo siguiente:

    Archivo captcha.php

    <?php
    session_start();
    
    $source = file('palabras.txt'); // Archivo con palabras
    $word = trim($source[rand(0, count($source) - 1)]); // Obtenemos una palabra
    $charsLength = strlen($word); // Cantidad de letras de la palabra
    $marginLeftRight = 10; // Margen izq derecho
    $marginTopBottom = 10; // Margen sup inf
    $fonts = array( // Arreglo de fuentes
        array('spacing' =>   -3, 'minSize' => 27, 'maxSize' => 30, 'font' => 'fonts/Quixley.ttf'),
        array('spacing' => -1.5, 'minSize' => 28, 'maxSize' => 31, 'font' => 'fonts/AntykwaBold.ttf'),
        array('spacing' =>   -2, 'minSize' => 24, 'maxSize' => 30, 'font' => 'fonts/Ding-DongDaddyO.ttf'),
        array('spacing' =>   -2, 'minSize' => 28, 'maxSize' => 30, 'font' => 'fonts/Duality.ttf')
    );
    
    $rgbs = array( // Arreglo de colores
      array(17,70,121),
      array(12,133,25),
      array(114,26,7),
      array(38,44,10),
      array(16,113,52),
      array(123,29,26)
    );
    
    // Generamos la palabra
    $_SESSION['captcha_secure'] = '';
    $chars = array();
    $imageWidth = 0;
    $imageHeight = 0;
    for ($i = 0; $i < $charsLength; $i++) {
    
        //
        $font = $fonts[mt_rand(0, count($fonts) - 1)];
        $char = array(
            'char'     => $word[$i],
            'font'     => $font['font'],
            'spacing'  => $font['spacing'],
            'size'     => rand($font['minSize'], $font['maxSize']),
            'angle'    => rand(-20, 20)
        );
        $coords = imagettfbbox ($char['size'], $char['angle'], $char['font'] , $char['char']);
        $imageWidth += ($coords[2] - $char['spacing']); // Sumamos el ancho del char actual
        $imageHeight = max($imageHeight, $char['size']);
    
        $_SESSION['captcha_secure'] .= $char['char']; // Concatenamos el char
        $chars[] = $char; // Guardamos la config del char
    }
    $imageWidth += $marginLeftRight * 2; // Sumamos el margen configurado
    $imageHeight += $marginTopBottom * 2; // Sumamos el margen configurado
    
    // Creamos la imagen
    $image = imagecreatetruecolor($imageWidth, $imageHeight); //Ancho y alto de la imagen
    
    // Fondo
    $white = imagecolorallocate($image, 255, 255, 255); // Color de fondo de la imagen
    imagecolortransparent($image, $white); // Transpartente
    imagefill($image, 0, 0, $white);
    
    // Color palabra
    list($r, $g, $b) = $rgbs[mt_rand(0, count($rgbs) - 1)];
    $wordColor = imagecolorallocate($image, $r, $g, $b);
    
    // Palabra
    $x = $marginLeftRight;
    $y = ($imageHeight / 2) + $marginTopBottom;
    foreach ($chars as $char) {
    
        // Color del char
        $coords = imagettftext($image, $char['size'], $char['angle'], $x, $y, $wordColor, $char['font'], $char['char']);
    
        $x += $coords[2] - $x - $char['spacing'];
    }
    
    header("content-type:image/png");
    imagepng($image);
    

    Archivo palabras.txt (sin renglones en blanco)

     globo
     chapuza
     varar
     poisa
     follar
     gozar
     cochina
     barbado
    

    Archivo index.php

    <div style="background: #ccc; display: inline-block;">
       <img src="captcha.php" />
    </div>
    

    Resultados:

  • Para hacer una imagen similar a la de Google

    Te recomiendo que leas indagues sobre la librería Imagen Magick. Este articulo te puede dar un par de ideas.

    Aquí un snippet a modo de ejemplo:

    <?php
    
    /* Creamos un objeto Imagick */
    $image = new Imagick();
    
    /* Creamos un objeto ImagickPixel para el fondo */
    $bg = new ImagickPixel();
    $bg->setColor('white'); // Blanco
    
    /* Creamos un ImagickDraw para configurar la fuente, tamaño, color y posición */
    $draw = new ImagickDraw();
    $draw->setFont('fonts/Duality.ttf');
    $draw->setFontSize( 50 );
    $draw->setFillColor("navy");
    $draw->setGravity(Imagick::GRAVITY_CENTER);
    $fontWidth = 
    
    /* Texto */
    $string = 'gozar';
    
    /* Creamos la imagen */
    $image->newImage(120, 60, $bg); 
    
    /* Escribimos el texto en la imagen */
    $image->annotateImage($draw, 0, 0, 0, $string);
    
    /* Arremolinamos la imagen (swirl) */
    $image->swirlImage(45);
    
    /* Agregamos el dibujo. */
    $image->drawImage($draw);
    
    /* Seteamos el formato */
    $image->setImageFormat('png');
    
    
    header( "Content-Type: image/{$image->getImageFormat()}" );
    echo $image->getImageBlob();
    

    Resultado:

13
  • Hola @MarcosGallardo gracias por la respuesta, probe el ejemplo amigo funciona, pero sin embargo existe un pequeño error refresque la pagina para ver los tipo de impresión de la imagen en unas cuantas veces que refresque la página tomando en cuenta el número de veces que refresque la página 3 -> 4 -> 12 en una de ellas la imagen no imprime queda solo un marco blanco con el borde pero no imprime la imagen del texto del captcha al refrescar el número de veces ya mencionado. Pensé que el error era alguna fuente que no estaba en la carpeta fonts pero todas las fuentes están en la carpeta.
    – Otto
    Commented el 2 ene. 2017 a las 2:08
  • Amigo sobre el color de la fuente, como obtengo un solo color de la fuente en vez de un color diferente por cada letra.
    – Otto
    Commented el 2 ene. 2017 a las 2:21
  • Hola @MarcosGallardo con la nueva actualización de obtener una palabra desde un archivo .txt ya no muestra el error de la impresión de la imagen del antiguo código Un pequeño detalle es a la hora de actualizar la página la imagen del texto suele imprimirse seguidamente el mismo texto al actualizar. Sobre crear el texto similar a Google en texto curvados y Ondulación del texto verticales e horizontales encontré este código la documentación del codigo es algo similar al tema que estamos tratando en mi pregunta http://ideone.com/ustrYF
    – Otto
    Commented el 3 ene. 2017 a las 2:49
  • Puedes echarle un último vistazo a la documentación antes de seleccionar la pregunta, quizás la documentación pueda servir de algo para interactuar en el tema más a fondo :) Saludos.
    – Otto
    Commented el 3 ene. 2017 a las 3:02
  • @J.Doe, he actualizado mi pregunta. He añadido el calculo alto automático y corregido espacio entre letras. Con respecto a la probabilidad de que aparezca la misma palabra, se puede corregir si metes 1000 (mil) o mas palabras en el .txt. Respecto al snippet puedes publicar tu propia respuesta utilizando ese código.
    – Marcos
    Commented el 3 ene. 2017 a las 13:36
2

J. Doe, has intentado usar imagefill() y rellenarlo con el color asignado imagecolorallocatealpha() que puede tener un valor entre 0 y 127, es decir, 0 indica completamente opaco mientras que 127 indica completamente transparente.

Nota: imagecolorallocatealpha() se comporta de forma idéntica a imagecolorallocate() con la adición del parámetro de transparencia alpha.

Podría quedar algo así:

$white = imagecolorallocatealpha($image,255,255,255,80); //Fondo imagen.
imagefill($image,0,0,$white);//Rellenar.

Código fuente SO:

Manual imagecolorallocatealpha():

Manual imagefill():

0

si usas imagecolortransparent()?

aca te dejo un ejemplo:

<?php
// Crear una imagen de 55x30
$im = imagecreatetruecolor(55, 30);
$rojo = imagecolorallocate($im, 255, 0, 0);
$negro = imagecolorallocate($im, 0, 0, 0);

// Hacer el fondo transparente
imagecolortransparent($im, $negro);

// Dibujar un rectángulo rojo
imagefilledrectangle($im, 4, 4, 50, 25, $rojo);

// Guardar la imagen
imagepng($im, './imagecolortransparent.png');
imagedestroy($im);
?>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.