Comentario: El lienzo en HTML 5 tiene una interfaz GetImagedata que se puede usar para obtener datos de píxeles de la imagen del código de verificación. Cada píxel tiene cuatro valores: R, G, B, A. R, G, B son rojos, verdes y azules, y A es transparencia. Después de observar, hablemos sobre las ideas y el código de implementación. Si estás interesado, no te vayas.
El sistema de gestión de asuntos académicos de nuestra escuela (parece ser más que solo para nuestra escuela) no se explica cuando el servidor de tiempo de selección del curso colapsa. A veces, para elegir un curso, debe ingresar repetidamente el código de verificación. Cuando pienso en miles de estudiantes universitarios que pierden el tiempo al ingresar al código de verificación, siento que tengo la obligación de salvar a la humanidad.Busqué y vi este artículo, fue de hace 3 años. Me referí a la primera mitad y usé el complemento Tampermonkey para lograr aproximadamente el efecto deseado. Puede obtener este script en UserScript, que también está disponible en GitHub. El código es feo, por favor depugga y dame consejos.
Hablemos sobre la idea: el lienzo en HTML 5 tiene una interfaz getImagedata que se puede usar para obtener datos de píxeles de la imagen del código de verificación. Cada píxel tiene cuatro valores: R, G, B, A. R, G, B son rojos, verdes y azules, y A es transparencia.
Se observó que el código de verificación del sistema de gestión de asuntos académicos es de 5 números, y el tamaño de la fuente permanece sin cambios. Aunque el fondo está perturbado, obviamente es muy diferente del color de la fuente, por lo que se usó un método muy duro: sabemos que cuanto más claro es el color, mayor es el valor RGB, más oscuro es el color y el menor valor de RGB. Entonces juzgué cada punto de píxel. La suma de RGB es inferior a 350 (este valor se mide) son los píxeles que pertenecen a la fuente. En aras de la observación fácil, el valor RGB se establece en 255, de lo contrario se establece en 0. Esto le da una imagen con fondo negro y caracteres blancos.
var ctx = canvas.getContext ('2d');
ctx.DrawImage (img, 0,0);
var c = ctx.getImageData (0,0, img.width, img.height);
para (i = 0; i <c.height; i ++) {
para (j = 0; j <c.width; j ++) {
var x = (i*4)*C.Width+(j*4);
var r = c.data [x];
var g = c.data [x+1];
var b = c.data [x+2];
if (r+g+b> 350) {
C.Data [x] = C.Data [x+1] = C.Data [x+2] = 0;
}
demás{
C.Data [x] = C.Data [x+1] = C.Data [x+2] = 255;
}
}
}
Luego usé la herramienta de dibujo para ampliar la imagen, la observé y descubrí que cada número es un rectángulo de 12*8 píxeles, y luego descubrí que el número de píxeles correspondientes a cada número es el mismo, por lo que hice un juicio especial (por ejemplo, si hay píxeles en el medio, debe ser 8 en lugar de 0). Entonces ... observaré ... las coordenadas de la matriz correspondiente a cada número ... escriba esta función:
función getNum (imgdata, x1, y1, x2, y2) {
var num = 0;
para (i = y1; i <y2; i ++) {
para (j = x1; j <x2; j ++) {
var x = (i*4)*imgdata.width+(j*4);
if (imgdata.data [x] == 255) num ++;
}
}
interruptor (num)
{
Caso 56: {
j = (x1+x2)/2;
i = (y1+y2)/2;
var x = (i*4)*imgdata.width+(j*4);
if (imgdata.data [x] == 255)
regresar 8;
demás
regresar 0;
}
Caso 30: retorno 1;
Caso 50: retorno 2;
Caso 51: retorno 3;
Caso 48: retorno 4;
Caso 57: retorno 5;
Caso 58: {
i = y2-2;
j = x1;
var x = (i*4)*imgdata.width+(j*4);
if (imgdata.data [x] == 255)
regresar 9;
demás
regresar 6;
}
Caso 37: retorno 7;
predeterminado: devolver 0;
}
}
El texto original utiliza una red neuronal para juzgar, y la tasa de precisión se mejora enormemente. No sé cómo usarlo, por lo que es inútil ...
La precisión del código de verificación que obtuve usando este método también es más del 95%, lo cual es suficiente para el momento. Si tiene tiempo, puede estudiar la red neuronal.
Los estudiantes que lo necesitan pueden usarlo. El navegador Chrome primero debe instalar Tampermonkey, y Firefox es Geasemonkey, y luego instalar este script.