Create image with javascript?

Question

Create image with javascript?

Navigation

#1 by (3 votes)

-1

I am creating a captcha system with javascript, I have created the code to make a random code, and now what I want to do is show that code as an image, I have searched in Google but I can not find anything, I hope you can help me , I leave the code of what I wear.

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">';

}

javascript html

asked by OrlandoVC 17.03.2017 в 18:06

source

1 answer

Send mail from Ionic In Ruby on Rails how to insert several records at once with ActiveRecord

score 3 · Accepted Answer

The only thing that occurs to me is that you can use a hidden Canvas and convert it to an image using toDataURL :

var ctxCanvas = document.getElementById('canvasOculto').getContext('2d'),
    imagen = document.getElementById('image');


var cadena = "HOLA CARACOLA";

ctxCanvas.canvas.width = ctxCanvas.measureText(cadena).width;
ctxCanvas.fillText(cadena, 0, 10);
imagen.src = ctxCanvas.canvas.toDataURL();

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

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