소개

As measured by the App Store SVG에 표시된 수집을 가져 와서 이미지로 저장하고 싶습니다.


화면 캡처로 좋다고 말하면 좋지만 이미지의 크기가 균일하지 않기 때문에

2016-01-25
phamtomjs에서의 취득·컷을 추가했습니다.

CUI에서 얻고 싶습니다.

ぃ tp // 이 m/아이소/있어 ms/d5 아8아 14631025다
svg의 이미지로 저장하는 것이 좋았습니다.

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

아니.
HTML이 참조하고 있는 JS로 append 되고 있는 모양.

Chrome의 DevTools

브라우저를 사용하는가? . .

요소 탭

얻은 SVG 태그의 요소를 살펴보십시오.

콘솔 탭

스크립트를 붙여 넣고 리턴 키로 실행

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 라고 표시되는 것만의 결과가 되었습니다.

따라서 다음을 참고로

h tp : / / s tac ゔ ぇ rf ぉ w. 코 m / 쿠에 s 치온 s / 28267809 / p 밥과 mjs

여기에서 다운로드한 모듈을 사용하고 있습니다.
htps : // 기주 b. 코 m / 에우게네 1g / p 밥과 mjs / ぇ 아세 s

획득한 이미지

page.clipRect 의 행이 없는 경우

768 x 207 (px) 이미지를 얻을 수 있습니다. 생각했던 것과 다르다.

page.clipRect 행 추가

이것이군요.

여기에있는 상태로 좋았습니까?
htp : //p 밥과 mjs. rg / sc Reen-p 얽힌. HTML

사이고에게

var svgData = new XMLSerializer().serializeToString(svg); 의 근처라든지

image.src = "data:image/svg+xml;charset=utf-8;base64," + btoa(unescape(encodeURIComponent(svgData)));

서버측에서 자동으로 취득이라든가 어떻게 하면···

정책은 도달했습니다

제대로 쓰는 것이 좋은 곳은 끝이 접혀 있습니다. 추가하는 것이 좋다고 생각하면서 일단 끝납니다.

참고

h tp : // 쿠이타. m / sk 777 / ms / a 37455 f54321 a 6195 a
htps : //에서 ゔぇぺぺrs. 오, ぇ. 코 m / ぇ b / 와 ls / ch 로메에서 v 와 ls / 데부 g / 안녕하세요 /
htps : //에서 ゔぇぺぺr. 아 ぇ. 코 m / 쏘 rt / 아 ps 잡아 /