はじめに

As measured by the App StoreのSVGで表示されているコレを取得して画像として保存したい

画面キャプチャでいいといえばいいんですが・・・画像の大きさが均一でなかったりもするので

2016-01-25
phamtomjsでの取得・切り出しを追加しました。

CUIで取得したい

http://qiita.com/laiso/items/d5a8a14631025da61bb5
svgの画像として保存ででもよかったんですが、

<div class="pie-chart padding-top-small padding-bottom-small"></div>

ない。
HTMLが参照しているJSでappendされている模様。

ChromeのDevTools

ブラウザを使うか。。。

Elementタブ

取得したSVGタグの要素を見てみる

Consoleタブ

scriptを貼り付けてリターンキーで実行


var svg = document.querySelector(".chart svg");
var svgData = new XMLSerializer().serializeToString(svg);
var canvas = document.createElement("canvas");
canvas.width = svg.width.baseVal.value;
canvas.height = svg.height.baseVal.value;

var ctx = canvas.getContext("2d");
var image = new Image;
image.onload = function(){
    ctx.drawImage( image, 0, 0 );
    var a = document.createElement("a");
    a.href = canvas.toDataURL("image/png");
    a.setAttribute("download", "storechart.png");
    a.dispatchEvent(new CustomEvent("click"));
}
image.src = "data:image/svg+xml;charset=utf-8;base64," + btoa(unescape(encodeURIComponent(svgData)));

Phantomjs

fastlaneでも使われていますし、そこそこメジャーになってきてはいますが
js部分を直接いじるのは初めて！

環境

Mac OS X Yosemite
Phantomjs 2.0

コード

AppStore.js


page.onConsoleMessage = function(msg) {
  console.log(msg);
}

page.open(url, function(status) {
    // Check for page load success
    if (status !== "success") {
        console.log("Unable to access network");
    } else {
        console.log("page get Success!");
        page.evaluate(function() {
            var svg = document.querySelector(".chart svg");
            var svgData = new XMLSerializer().serializeToString(svg);
            document.body.innerHTML = svgData;
            //console.log(svgData);
        });
	page.viewportSize = { width: 200, height : 200 };
	page.clipRect = { top: 0, left: 0, width: 200, height: 200 };
	page.render('appstore.png');
	phantom.exit();
    }
});

実行

$ bin/phantomjs examples/appstore.js

補足

今回Phantomjsのサイトからダウンロードしたバージョンはまともにうごかず
当初、Killed: 9 と表示されるだけの結果となりました。

そのため下記を参考に

http://stackoverflow.com/questions/28267809/phantomjs-getting-killed-9-for-anything-im-trying/28268419

こちらからダウンロードしたモジュールを使っています。
https://github.com/eugene1g/phantomjs/releases

取得した画像

page.clipRect の行がない場合

768 x 207 (px)な画像が取得できました。おもってたのと違う。

page.clipRect の行を追加

これですね。

ここにかいてあるままでよかったかと
http://phantomjs.org/screen-capture.html

さいごに

var svgData = new XMLSerializer().serializeToString(svg);のあたりのこととか
image.src = "data:image/svg+xml;charset=utf-8;base64," + btoa(unescape(encodeURIComponent(svgData)));
サーバ側で自動で取得とかどうしたら・・・
- 方針はたちました

ちゃんと書いた方がよさげなところは端折っています。追記した方が良いなと思いつつ一旦おわります。

参考

http://qiita.com/skryo777/items/a37455bef54321a6195a
https://developers.google.com/web/tools/chrome-devtools/debug/console/
https://developer.apple.com/support/app-store/