Node.js를 HTML 요소를 screenshotting

Question

최근에 나는 http://www.futbin.com/

에서 플레이어 동전 값을 잡기 위해 불화 봇을 만들기 위해 질문을 받았다 일단 나는 또한 카드 사진을 포함 할 수 있다면 내가 질문을 받았다 완료 : http://www.futbin.com/17/player/15230/Hazard

심사를 카드 실제로 조각으로 만들어져 하나의 이미지가 아니라는 사실을 발견했습니다. 모든 조각이 모여서 특정 요소의 스크린 샷을 만드는 것이 더 어려워졌습니다.

Phantomjs은 내가 이것을 테스트하기 위해 몇 가지 코드를 쓰기 시작 이렇게 말했다 :

var page = new WebPage(); 
    page.open('http://www.futbin.com/17/player/15230/Hazard', function (status) { 
    console.log("Loaded"); 
    page.render('image.png'); 
    phantom.exit(); 
}); 

내 CONSOLE.LOG 끔찍한있는 실행하는 데 15-20 초 걸렸습니다. 내 Node.js http.request는 전체 웹 페이지를 가져 오는 데 1 초도 채 걸리지 않습니다.

두 번째 문제는 phantomjs가 discord.io 라이브러리 (https://www.npmjs.com/package/discord.io)를 좋아하지 않으므로 phantomjs.exe를 사용하여 실행하면 오류가 발생합니다.

나의 큰 질문은, 가능하다면 Phantomjs와 같은 것을 사용하지 않고 Node.js를 사용하여이 카드의 이미지를 얻는 가장 좋은 방법은 무엇입니까?

Answer 1

페이지를 올바르게 렌더링하려면 더 완벽한 브라우저 엔진이 필요합니다. Chrome을 실행하는 Selenium이 이에 적합합니다. 그가 실행의 일단

docker run -l scraper -d -p 127.0.0.1:4444:4444 selenium/standalone-chrome:latest

: 셀레늄 + 크롬 서버를 실행 얻을 수있는 빠른 방법에 대한

은 편리한 도커의 당신과 같이 새 컨테이너를 시작하는 데 사용할 수있는 사용 가능한 이미지있다 해당 스크립트를 실행 한 후에는 지정된 디렉토리에 스크린 샷으로 끝낼해야

let WebDriverIO = require('webdriverio'); 

let browser = WebDriverIO.remote({ 
    baseUrl: 'http://www.futbin.com', 
    host: 'localhost', 
    port: 4444, 
    waitforTimeout: 10 * 1000, 
    logLevel: 'silent', 
    desiredCapabilities: { 
    browserName: 'chrome', 
    } 
}); 

browser 
    .init() 
    .url('/17/player/15230/Hazard') 
    .saveScreenshot('/path/to/screenshot.png'); 

: 당신은 스크립트 등으로 통신 할 수 WebDriverIO 노드 패키지 (npm install webdriverio)를 사용할 수 있습니다 (즉, /path/to/screenshot.png).

docker stop `docker ps --filter label=scraper -q` 

이 도움이되지 않습니다 : (난 그냥 빨리 용기를 식별하기 위해 여기에 라벨을 사용하고 있습니다) http://webdriver.io/api.html

을 그리고 마지막으로 도커 컨테이너를 중지 - 기능의 전체 목록은 API 문서를 참조하십시오 당신이 필요로하는 페이지의 특정 부분만을 추출하지만, 아마 그 후 어떤 종류의 이미지 슬라이서를 통해 이미지를 푸시 할 수 있습니다 (imagemagick?).