De texto a una imagen en ASP.NET

Introducción

Hola a tod@s, primero hare una breve reseña del objetivo de este articulo, pues como dice Jack el destripador "Vamos por partes" :). Como habran podido observar muchos sitios al momento de realizar cambios de passwords, enviar mensajes desde un formulario, etc. usan una imagen en la cual se ven caracteres pero estos se muestran como una imagen y por ultimo se pide escribir lo que observa en la imagen, porque esto???? pues muchas veces sitios fueron bombardeados y ante esta infiltracion por sistemas de bombardeo, tuvieron que hacer algo al respecto, y la solucion fue generar una imagen con texto de forma que el usuario antes de continuar tenia que confirmar el texto que veia en la imagen, de esta forma los sistemas de bombardeo fueron detenidos.

Como dicen del dicho al hecho hay mucho trecho :), ya se tenia la solucion, pero ahora el problema era como implementar esa funcionalidad, y comenzaron las posibles soluciones: ¿Sera que el diseñador grafico se anima a crear n cientos graficos con una serie de caracteres que en cada grafico sean distintos?, ¿Ah colocaremo unas 5 imagens y que se muestren de manera aleatoria? ... etc... pues esas soluciones nos traerian mas problemas, la primera el diseñador se aburriria de crear lo mismo(si es que antes no se vuelve l@c@ jeje :)), aparte tendriamos un Path para la imagen que la referenciaria (esto seria una vulnerabilidad) ahora si nos conformariamos con pocas fotos uno muy facilmente realizaria un seguimiento y realizaria un bombardeo teniendo su diccionario con las posibles respuestas analizadas anteriormente, etc....

La solucion que nos quedaba por ejemplo en el clasico ASP 3.0 era usar componentes de terceras partes, luego instalar esos componentes en el servidor y luego posteriormente usarlas, pero comprar esa funcionalidad :S pues no todos tienen servidor propio como para darse el lujo de instalar cualquier componente, los servicios de hosting gran parte no te deja instalar componentes, y si tienen esos componentes te cobran algo extra por utilizarlos.

.NET gracias que existes pues como a todo esta y muchas cosas similares son muy faciles de resolver con .NET pues por su amplia libreria de clases que coloca a nuestra disposicion los libera de esa gran cruz que cargabamos, bueno ya no los aburro mas, vamos al codigo como veran el codigo no necesita mayor explicacion ya que intente comentar cada paso.

'En el evento Clic del Boton btnGenerar realizamos todo el proceso
Private Sub btnGenerar_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnGenerar.Click
    'Creamos un objeto Bitmap y especificamos las dimensiones ancho y alto, sera como nuestro lienzo :)
    'Nota.- El color por defecto de un nuevo Bitmap es negro
    Dim objLienzo As Bitmap = New Bitmap(400, 100)
    'Creamos un objecto Graphics que nos permitira graficar sobre nnuestro anterior objeto Bitmap
    'establecemos que trabajara sobre nuestro lienzo
    Dim objGraficar As Graphics = Graphics.FromImage(objLienzo)
    'Creamos un objeto de tipo Color que contendra el color que usaremos como fondo(background)
    Dim objColor As System.Drawing.Color
    'De acuerco al item seleccionado en nuestro DropDownList establecemos el valor del fondo
    Select Case ddlColores.SelectedItem.Value
        Case 1
            objColor = Color.Red
        Case 2
            objColor = Color.Yellow
        Case 3
            objColor = Color.Green
    End Select
    'Creamos un objeto tipo Font el cual usaremos para establecer el tipo de fuente
    'que tendra nuestro texto, esto podriamos colocarlo en un DropDownList, pero 
    'ese creo que se dan cuenta como hacerlo asi que no perdamos mas tiempo
    Dim objFont As New Font("Verdana", 12)
    'Definimos las coordenadas que usaremos a la hora de pintar nuestro texto
    Dim objCoordenadas As New PointF(5, 5)
    'Creamos un objeto tipo SolidBrush para pintar el fondo de nuestra imagen
    Dim objPincelFondo As New SolidBrush(objColor)
    'Creamos otro objeto SolidBrush para pintar el texto introducido en el formulario
    'establecemos que el color del texto sera negro
    Dim objPincelTexto As New SolidBrush(Color.Black)

    '/--------------/
    '/ PINTAR FONDO /
    '/--------------/
    'Comenzamos a pintar el fondo de nuestra imagen
    'como pueden ver estamos usando el Pincel para el fondo 
    'y las dimensiones de nuestro lienzo
    objGraficar.FillRectangle(objPincelFondo, 0, 0, 400, 100)

    '/--------------/
    '/ PINTAR TEXTO /
    '/--------------/
    'Comenzamos a pintar el texto
    objGraficar.DrawString(txtTexto.Text.ToString, objFont, objPincelTexto, objCoordenadas)

    '/-------/
    '/ FINAL /
    '/-------/
    '/----------------------/
    '/ 1 Opcion - GUARDANDO /
    '/----------------------/
    'Ahora como ay tenemos nuestra imagen terminada solo nos queda guardarla
    'ahora tu puedes guardar tu imagen definiendo el tipo sea JPG, PNG, GIF, TIFF, etc
    'bueno eso dependera de ti, para tal accion debes colocar la extension del archivo y 
    'como segundo parametro usar ImageFormat y seleccionar el tipo de archivo a generar
    '--- Para usar esta opcion solo quita el comentario de la siguiente instruccion y comenta 
    'las lineas de la segunda opcion
    'objLienzo.Save(Server.MapPath("ImageByKev.jpg"), ImageFormat.Jpeg)
    '/--------------------------------/
    '/ 2 Opcion - MOSTRAR SIN GUARDAR /
    '/--------------------------------/
    Context.Response.ContentType = "image/jpeg"
    objLienzo.Save(Context.Response.OutputStream, ImageFormat.Jpeg)
End Sub

Aca el codigo HTML del formulario:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
    <HEAD>
        <title>Images</title>
        <meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
        <meta name="CODE_LANGUAGE" content="Visual Basic .NET 7.1">
        <meta name="vs_defaultClientScript" content="JavaScript">
        <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
    </HEAD>
    <body>
        <form id="Form1" method="post" runat="server">
            <P>
                <asp:TextBox id="txtTexto" runat="server"></asp:TextBox>
                <asp:DropDownList id="ddlColores" runat="server">
                    <!-- Aca colocas los colores que quieras, pero ojo que luego tienes que validarlos,
                     yo use los colores de mi pais Bolivia :p -->
                    <asp:ListItem Value="1">Rojo</asp:ListItem>
                    <asp:ListItem Value="2">Amarillo</asp:ListItem>
                    <asp:ListItem Value="3">Verde</asp:ListItem>
                </asp:DropDownList></P>
            <P>
                <asp:Button id="btnGenerar" runat="server" Text="Button"></asp:Button></P>
        </form>
    </body>
</HTML>

 

Nota.- En el ejemplo anterior presento dos posibles salidas, una es generar la imagen y mostrarla directamente al usuario, la otra es generar la imagen y luego guardarla fisicamente (ustedes ya pueden ver la forma de realizar mantenimiento si la imagen se desea guardar), me despido y espero les sea de utilidad.

Salu2

 

---

Espacios de nombres usados en el código de este artículo:

System.Drawing.Color
System.Drawing.Imaging

Fichero con el código de ejemplo: Kev_TextoAImagen.zip - 25 KB