html5 캔버스를 사용하여 간단한 확인 코드를 해독하고 ImageData 인터페이스 application_html5 튜토리얼 기술 얻기

우리 학교의 학사관리 시스템(우리 학교뿐만 아니라 여러 곳에서 사용하는 것 같습니다)과목 선택 시 아무런 설명 없이 서버가 충돌하는 경우가 가끔 있습니다. 수천 명의 대학생들이 인증번호를 입력하고 시간을 낭비하는 것을 생각하면 인류를 구해야 할 의무가 있다는 것을 느꼈습니다.

검색해 보니 3년 전에 쓴 글이더군요. 전반부를 참고하여 TamperMonkey 플러그인을 사용하여 대략 원하는 효과를 얻었습니다. 이 스크립트는 Userscript에서 얻을 수 있으며 GitHub에서도 사용할 수 있습니다. 코드가 보기 흉합니다. 디버그해 주세요. 조언을 부탁드립니다.
아이디어에 대해 이야기해 보겠습니다: HTML 5의 캔버스에는 인증 코드 이미지에서 픽셀 데이터를 얻는 데 사용할 수 있는 getImageData 인터페이스가 있습니다. 각 픽셀에는 r, g, b, a에 해당하는 4가지 값이 있습니다. r, g, b는 빨간색, 녹색, 파란색의 세 가지 색상이고 a는 투명도입니다.

교육관리시스템의 인증코드가 5자리이고, 글자크기는 그대로인 것을 관찰했는데, 배경에 간섭이 있긴 하지만 확실히 글자색과 많이 다르기 때문에 사용했습니다. 대략적인 방법: 색상이 밝을수록 RGB 값이 커지고, 색상이 어두울수록 RGB 값이 작아집니다. 그래서 각 픽셀을 판단했는데, RGB의 합이 350(이 값이 측정된 값임)보다 작으면 관찰의 편의를 위해 해당 RGB 값을 255로 설정하고 그렇지 않으면 글꼴에 속하는 픽셀로 설정합니다. 0. 이렇게 하면 검정색 배경에 흰색 텍스트가 있는 사진이 얻어집니다.

코드 복사

코드는 다음과 같습니다.

var ctx = canvas.getContext ('2d');
ctx.drawImage(img,0,0);
var c = ctx.getImageData(0,0,img.width,img.height)
for(i= 0; ifor(j=0; jvar 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
}
else{
c.data[x] = c; .data[ x 1] = c.data[x 2] = 255;
}
}
}　

그런 다음 그리기 도구를 사용하여 그림을 확대하고 관찰했습니다. 그리고 각 A 숫자는 12*8 픽셀의 직사각형이라는 결론을 내렸습니다. 그러면 각 숫자에 해당하는 픽셀 수를 찾아 0과 8, 6과 9의 픽셀 수는 동일하다는 것을 알 수 있습니다. 특별한 판단을 내립니다. (예: 중앙에 픽셀이 있는 경우 0이 아닌 8이어야 합니다.) 그런 다음... 각 숫자에 해당하는 행렬의 좌표를 관찰하고... 다음 함수를 작성하세요.

코드 복사

코드는 다음과 같습니다.

function getNum(imgData,x1,y1,x2,y2){
var num = 0
for(i=y1; i< ;y2; i ){
for(j=x1; jvar x = (i*4)*imgData.width (j*4); data[x] == 255)num ;
}
}
스위치(num)
{
case 56:{
j = (x1 x2)/2; >i = ( y1 y2)/2;
var x = (i*4)*imgData.width (j*4)
if(imgData.data[x] == 255)
return 8;
else
return 0;
case 30:return 1;
case 51:return 3; 4;
return 5;
case 58:{
i = y2-2;
j =
var x = (i*4)*imgData.width j*4) ; if(imgData.data[x] == 255)
return 9; else
return 6; 🎜>default: return 0;
}
}


원본 기사에서는 판단을 위해 신경망을 사용했는데 사용법이 크게 향상되었습니다. 그거, 그러니까 쓸모가 없어...
사용해요 이 방법으로 얻은 인증코드의 정확도는 95% 이상이라 당분간은 충분합니다. 시간이 나면 신경망에 대해 다시 공부해 봅시다.
필요한 학생은 사용할 수 있습니다. Chrome 브라우저에서 TamperMonkey를 먼저 설치하고, Firefox에서 GeaseMonkey를 설치한 후 이 스크립트를 설치하면 됩니다.