iOSデバイスのシェア画像（SVG）をローカルに保存する

# はじめに
`As measured by the App Store`のSVGで表示されているコレを取得して画像として保存したい
![image.png](https://qiita-image-store.s3.amazonaws.com/0/12362/b3a05a29-6825-55ee-43a6-733f7a50d034.png)

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

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

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

```html
<div class="pie-chart padding-top-small padding-bottom-small"></div>
```
ない。
HTMLが参照しているJSでappendされている模様。

# ChromeのDevTools
ブラウザを使うか。。。
## Elementタブ
取得したSVGタグの要素を見てみる

<img width="1056" alt="スクリーンショット 2016-01-04 9.14.29.png" src="https://qiita-image-store.s3.amazonaws.com/0/12362/2e808f1f-5089-4a8d-2154-9735fcaa5ed4.png">

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

<img width="1035" alt="スクリーンショット 2016-01-04 9.21.29.png" src="https://qiita-image-store.s3.amazonaws.com/0/12362/197cc40a-a7f4-f342-8a1d-6fc1c13a919a.png">

```js

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

##コード

```js: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 の行がない場合
![appstore.png](https://qiita-image-store.s3.amazonaws.com/0/12362/bbbad967-aafc-5292-e469-5ebb4d577245.png)

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

### page.clipRect の行を追加

![appstore.png](https://qiita-image-store.s3.amazonaws.com/0/12362/4185dca0-c8d5-12b7-1d6f-7a2da2a6a391.png)

これですね。

ここにかいてあるままでよかったかと
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/