2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

phantomjsで特定部分のキャプチャ取得

Posted at

phantomjsでウェブページの特定箇所のキャプチャ
取得したい領域の位置(X,Y,縦,横)を取得してキャプチャを取得。
(macであればbrew install phantomjsで簡単にインストール可能)

sample.js
var page = require('webpage').create();
var clipUrl = 'http://www.****.com/*****';

var imageName = 'capture.png';

page.open(clipUrl, function(status) {
    if (status !== 'success') {
        console.log('Unable to load the address!');
    } else {
    setTimeout(function(){
        var clipRect = page.evaluate(function () { 
            var imageClassName = 'classname';
            // document.querySelector('.viewSide').click();
            // document.querySelector('.changeRandom').click();
            return document.getElementsByClassName(imageClassName)[0].getBoundingClientRect(); 
        });
        page.clipRect = {
            top:    clipRect.top,
            left:   clipRect.left,
            width:  clipRect.width,
            height: clipRect.height
        };
        page.render(imageName);
        phantom.exit();
    },5000);
    }
});

後は、ローカルから
phantomjs sample.js

特にsetTimeoutは無くてもよいが、サイトによっては表示がでそろうまでに時間がかかる場合があるため。
(コメント部分はなんらかの画面の部品をクリックした上でデータを取りたい場合に操作)

2
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?