Node Puppeter 이미지 인식 바 이 두 지수 파충류 구현 예시

전에 뇌 동 이 크게 열 린 글 을 보고 각 공장 의 전단 반 파충류 기 교 를 소개 했다.그러나 바로 이런 글 에서 말 한 것 처럼 100%의 반 파충류 방법 이 없다.본 고 는 간단 한 방법 을 소개 하여 모든 전단 반 파충류 수단 을 돌아 가 는 것 을 소개 한다.
아래 의 코드 는 바 이 두 지 수 를 예 로 들 면,코드 는 이미 바 이 두 지수 파충류 노드 라 이브 러 리 로 봉인 되 었 다https://github.com/Coffcer/baidu-index-spider
노트:파충 류 를 남용 하여 다른 사람 에 게 폐 를 끼 치지 마 세 요.
바 이 두 지수의 반 파충류 전략.
바 이 두 지수의 인 터 페 이 스 를 관찰 하면 지수 데 이 터 는 하나의 트 렌 드 맵 입 니 다.마우스 가 어느 날 떠 있 을 때 두 가지 요청 이 발생 하여 결 과 를 부유 상자 에 표시 합 니 다.

일반적인 사고방식 에 따라 우 리 는 먼저 이 요구 의 내용 을 살 펴 보 자.
요청 1:
 
 
요청 2:

바 이 두 지수 가 실제로 전단 에서 일정한 반 파충류 전략 을 한 것 을 발견 할 수 있다.마우스 가 도표 로 이동 할 때 두 개의 요청 이 실 행 됩 니 다.하 나 는 html 로 되 돌아 가 고 하 나 는 생 성 된 그림 으로 되 돌아 가 기 를 요청 합 니 다.html 에는 실제 수치 가 포함 되 어 있 지 않 고 width 와 margin-left 를 설정 하여 그림 에 대응 하 는 문 자 를 표시 합 니 다.또한 요청 매개 변수 에 res,res 1 이라는 우리 가 어떻게 모 의 하 는 매개 변 수 를 가지 고 있 기 때문에 일반적인 모 의 요청 이나 html 로 기어 오 르 는 방식 으로 바 이 두 지수의 데 이 터 를 오 르 기 어렵다.
파충 사고
어떻게 바 이 두 라 는 반 파충류 방법 을 돌파 할 수 있 습 니까?사실 아주 간단 합 니 다.그 가 어떻게 반 파충류 인지 전혀 상관 하지 않 습 니 다.우 리 는 사용자 의 조작 을 모 의 해서 필요 한 수 치 를 캡 처 해서 이미지 인식 을 하면 된다.절 차 는 대략:
시 뮬 레이 션 로그 인
지수 페이지 열기
마우스 가 지 정 된 날짜 로 이동 합 니 다

요청 이 끝 날 때 까지 기다 리 고 수치 부분의 그림 을 캡 처 합 니 다

이미지 인식 획득 치4.567917.3~5 단 계 를 순환 하면 모든 날짜 에 대응 하 는 값 을 얻 을 수 있 습 니 다이런 방법 은 이론 적 으로 모든 사이트 의 내용 을 올 라 갈 수 있다.그 다음 에 우 리 는 파충 류 를 한 걸음 한 걸음 실현 하고 다음 에 사용 할 창고 이다.
puppeter 아 날로 그 브 라 우 저 조작
node-tesseract tesseract 의 패 키 징 은 이미지 인식 에 사 용 됩 니 다jimp 사진 재단
Puppeteer 설치,사용자 조작 시 뮬 레이 션
Puppeteer 는 Google Chrome 팀 이 만 든 Chrome 자동화 도구 로 Chrome 실행 명령 을 제어 합 니 다.사용자 조작 을 모 의 하여 자동화 테스트,파충류 등 을 할 수 있다.용법 이 매우 간단 해서 인터넷 에 많은 입문 강좌 가 있 는데 본문 을 보고 나 면 어떻게 사용 하 는 지 대충 알 수 있 을 것 이다.
API 문서:https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md
설치:

npm install --save puppeteer

Puppeteer 는 정상적으로 작 동 할 수 있 도록 설치 할 때 Chromium 을 자동 으로 다운로드 합 니 다.그러나 국내 네트워크 가 반드시 Chromium 을 성공 적 으로 다운로드 할 수 있 는 것 은 아니다.다운로드 에 실패 하면 cnpm 로 설치 하거나 다운로드 주 소 를 타 오 바 오의 미 러 로 바 꾸 어 설치 할 수 있다.

npm config set PUPPETEER_DOWNLOAD_HOST=https://npm.taobao.org/mirrors
npm install --save puppeteer

설치 할 때 Chromium 다운 로드 를 건 너 뛰 고 코드 를 통 해 Chrome 경 로 를 지정 하여 실행 할 수 있 습 니 다.

// npm
npm install --save puppeteer --ignore-scripts

// node
puppeteer.launch({ executablePath: '/path/to/Chrome' });

이루어지다
지면 을 깨끗하게 하기 위해 아래 에 주요 부분 만 열거 되 어 있 습 니 다.코드 가 selector 와 관련 된 부분 은 모두...대체 되 었 습 니 다.전체 코드 는 글 상단 의 github 창 고 를 참조 하 십시오.
바 이 두 지수 페이지 를 열 고 로그 인 시 뮬 레이 션
여기 서 하 는 것 은 사용자 조작 을 모 의 하고 한 걸음 한 걸음 클릭 하고 입력 하 는 것 이다.로그 인 인증 코드 를 처리 하지 않 은 경우,인증 코드 를 처리 하 는 것 은 또 다른 화제 입 니 다.만약 당신 이 이 컴퓨터 에서 바 이 두 에 로그 인 한 적 이 있다 면,일반적으로 인증 코드 가 필요 하지 않 습 니 다.

//      ，
// headless       true，Puppeteer       Chromium，                
//   false   ，           ，         。
const browser = await puppeteer.launch({headless:false});
const page = await browser.newPage();

//       
await page.goto(BAIDU_INDEX_URL);

//     
await page.click('...');
await page.waitForSelecto('...');
//             
await page.type('...','username');
await page.type('...','password');
await page.click('...');
await page.waitForNavigation();
console.log(':white_check_mark:     ');

마 우 스 를 모 의 이동 하여 필요 한 데 이 터 를 가 져 옵 니 다.
트 렌 드 맵 의 영역 으로 페이지 를 스크롤 한 다음 특정한 날짜 로 마 우 스 를 이동 하여 요청 이 끝 날 때 까지 기 다 려 야 합 니 다.tooltip 은 수 치 를 표시 하고 그림 을 캡 처 하여 저장 해 야 합 니 다.

//   chart      
const position = await page.evaluate(() => {
 const $image = document.querySelector('...');
 const $area = document.querySelector('...');
 const areaRect = $area.getBoundingClientRect();
 const imageRect = $image.getBoundingClientRect();

 //           
 window.scrollBy(0, areaRect.top);

 return { x: imageRect.x, y: 200 }；
});

//     ，  tooltip
await page.mouse.move(position.x, position.y);
await page.waitForSelector('...');

//   tooltip  
const tooltipInfo = await page.evaluate(() => {
 const $tooltip = document.querySelector('...');
 const $title = $tooltip.querySelector('...');
 const $value = $tooltip.querySelector('...');
 const valueRect = $value.getBoundingClientRect();
 const padding = 5;

 return {
 title: $title.textContent.split(' ')[0],
 x: valueRect.x - padding,
 y: valueRect.y,
 width: valueRect.width + padding * 2,
 height: valueRect.height
 }
});

캡 처
수 치 를 계산 하 는 좌 표를 캡 처 하고 jimp 로 그림 을 자 릅 니 다.

await page.screenshot({ path: imgPath });

//        ，       
const img = await jimp.read(imgPath);
await img.crop(tooltipInfo.x, tooltipInfo.y, tooltipInfo.width, tooltipInfo.height);
//        ，         
await img.scale(5);
await img.write(imgPath);

이미지 인식
여기 서 우 리 는 Tesseract 로 이미지 인식 을 합 니 다.Tesseracts 는 구 글 이 오픈 한 OCR 도구 로 이미지 의 문 자 를 식별 하고 훈련 을 통 해 정확 도 를 높 일 수 있 습 니 다.github 에 간단 한 node 패키지 가 있 습 니 다.node-teseract 는 Tesseract 를 설치 하고 환경 변 수 를 설정 해 야 합 니 다.

Tesseract.process(imgPath, (err, val) => {
if (err || val == null) {
 console.error(':x:     ：' + imgPath);
 return;
}
console.log(val);

실제로 훈련 되 지 않 은 Tesseracts 를 식별 하면 몇 가지 오류 가 있 을 수 있다.예 를 들 어 9 로 시작 하 는 숫자 를'3'으로 식별 하 는 것 이다.여 기 는 훈련 을 통 해 Tesseracts 의 정확 도 를 높 여야 한다.만약 에 식별 과정 에서 발생 하 는 문제 가 모두 같다 면 정규 로 이런 문 제 를 간단하게 복원 할 수 있다.
포장 하 다
상기 몇 가 지 를 실현 한 후,조합 하기 만 하면 바 이 두 지수 파충류 노드 라 이브 러 리 로 봉 할 수 있다.물론 많은 최적화 방법 도 있다.예 를 들 어 대량으로 기어 오 르 고 지 정 된 일수 로 기어 오 르 는 등 이 를 바탕 으로 실현 하기 만 하면 어렵 지 않다.

const recognition = require('./src/recognition');
const Spider = require('./src/spider');

module.exports = {
 async run (word, options, puppeteerOptions = { headless: true }) {
 const spider = new Spider({ 
 imgDir, 
 ...options 
 }, puppeteerOptions);

 //     
 await spider.run(word);

 //         ，     
 const wordDir = path.resolve(imgDir, word);
 const imgNames = fs.readdirSync(wordDir);
 const result = [];

 imgNames = imgNames.filter(item => path.extname(item) === '.png');

 for (let i = 0; i < imgNames.length; i++) {
 const imgPath = path.resolve(wordDir, imgNames[i]);
 const val = await recognition.run(imgPath);
 result.push(val);
 }

 return result;
 }
}

파충류
마지막 으로 이런 파충 류 를 어떻게 막 을 수 있 을 까?개인 적 으로 마우스 이동 궤적 을 판단 하 는 것 이 방법 이 라 고 생각한다.물론 전단 에는 100%파충류 반대 수단 이 없다.우리 가 할 수 있 는 일 은 파충류 에 게 약간의 어려움 을 줄 뿐이다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.