html5 캔버스를 사용하여 간단한 확인 코드를 해독하고 ImageData 인터페이스 application

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

WBOY

풀어 주다： 2016-05-16 15:50:10

원래의

1535명이 탐색했습니다.

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

검색해 보니 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이어야 합니다.) 그런 다음... 각 숫자에 해당하는 행렬의 좌표를 관찰하고... 다음 함수를 작성하세요.

코드 복사

코드는 다음과 같습니다.