¿Crear imagen con javascript?

publicado por: Anonymous

estoy creando un sistema tipo captcha con javascript, he creado el codigo para hacer un codigo aleatorio, y ahora lo que quiero hacer es mostrar ese codigo como una imagen, he buscado en google pero no encuentro nada, espero que me puedan ayudar, les dejo el codigo de lo que llevo.

index.php

<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   <title>Generar password</title>
   <script src="Sequre/Sequre-1.1.js" language="Javascript" type="text/JavaScript"></script>
</head>
<body onload="generateCode()">
    <form method="post" class="txtTexto2">
        <div id="Sequre"></div>
    </form>
</body>
</html>

sequre.js

function generateCode() {
var strCaracteresPermitidos = 'a,b,c,d,e,f,g,h,i,j,k,m,n,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,1,2,3,4,5,6,7,8,9';
var strArrayCaracteres = new Array(34);
var lon = 6;
strArrayCaracteres = strCaracteresPermitidos.split(',');
var length = lon, i = 0, j, tmpstr = "";
do {
    var randscript = -1
    while (randscript < 1 || randscript > strArrayCaracteres.length || isNaN(randscript)) {
        randscript = parseInt(Math.random() * strArrayCaracteres.length)
    }
    j = randscript;
    tmpstr = tmpstr + strArrayCaracteres[j];
    i = i + 1;
} while (i < length)
document.getElementById('Sequre').innerHTML = tmpstr + '<button onclick="generateCode">Actualizar</button><br><input type="text" name="inputCode" onKeyUp="checkCode">';

}

solución

Lo único que se me ocurre es que puedas utilizar un Canvas oculto y convertirlo a imagen usando toDataURL:

_x000D_

_x000D_

var ctxCanvas = document.getElementById('canvasOculto').getContext('2d'),_x000D_
    imagen = document.getElementById('image');_x000D_
_x000D_
_x000D_
var cadena = "HOLA CARACOLA";_x000D_
_x000D_
ctxCanvas.canvas.width = ctxCanvas.measureText(cadena).width;_x000D_
ctxCanvas.fillText(cadena, 0, 10);_x000D_
imagen.src = ctxCanvas.canvas.toDataURL();

_x000D_

canvas{_x000D_
    border: 1px white dotted;_x000D_
}_x000D_
#canvasOculto{_x000D_
    display: none;_x000D_
}

_x000D_

<canvas id='canvasOculto' height=15></canvas>_x000D_
<img id='image'>_x000D_
<br>

_x000D_

_x000D_

_x000D_


Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *