Konwertuj Google Geochart na obraz (JPEG, PNG itp.) Lub PDF w przeglądarce

Question

Używam Google GeoCharts (https://developers.google.com/chart/interactive/docs/gallery/geochart#Overview) dynamicznie generować kolorowe mapy w przeglądarce. Api geochart rysuje mapy za pomocą javascript/svg ... jakiejkolwiek porady do generowania eksportowanego pliku obrazu? (pdf, obraz rastrowy itp.)

Czy można to zrobić za pomocą geolokalizacji google? Jeśli nie, czy istnieje inna usługa, którą możesz polecić?

* Wcześniej używaliśmy GeoMaps, ale rozdzielczość nie była odpowiednia.

Answer 1

Można to zrobić, wykonując kroki podane na stronie this page. Zauważ, że kod w artykule opiera się na starej wersji Google Visualization, która używała elementów iframe, i nie będzie działać tak, jak została opublikowana. Można jednak zrobić to samo za pomocą następującego kodu (znaleziono w komentarzach):

var svg = $(chartContainer).find('svg').parent().html(); 
var doc = chartContainer.ownerDocument; 
var canvas = doc.createElement('canvas'); 
canvas.setAttribute('style', 'position: absolute; ' + ''); 
doc.body.appendChild(canvas); 
canvg(canvas, svg); 
var imgData = canvas.toDataURL("image/png"); 
canvas.parentNode.removeChild(canvas); 
return imgData; 

Uwaga: Nie tworzyć ten kod, został pierwotnie stworzony przez autora powyższego miejscu (Riccardo GOVONI) i zaktualizowany w sekcji komentarzy przez użytkownika Thomas.

Answer 2

Jest to bardzo dobrze możliwe; Robię to wykorzystując SVG do konwertera obrazów z Highcharts. Po prostu znajdź kod svg na stronie i POST na serwerze eksportującym highcharts wraz z parametrem typu (np. Image/jpeg), jako szerokość i nazwą pliku, aby zapisać go jako.

Jedynym minusem: IE nie renderuje SVG, ale VML dla wizualizacji Google. Nie ma jeszcze rozwiązania, ale wydaje się, że Highcharts ma również problemy z konwersjami IE i VML do SVG. Więc nie ma szczęścia, obawiam się.

<form method="post" action="http://export.highcharts.com/" id="imageGetForm"> 
<input type="hidden" name="filename" value="savedFromGoogleVisualization" /> 
<input type="hidden" name="type" id="imageGetFormTYPE" value="" /> 
<input type="hidden" name="width" value="900" /> 
<input type="hidden" name="svg" value="" id="imageGetFormSVG" /> 
</form> 

i wykonać następujące skrypt:

przykład

var svg=document.getElementById('chart_div').getElementsByTagName('svg')[0].parentNode.innerHTML; 
$('#imageGetFormTYPE').val('image/jpeg');//e.g. image/jpeg application/pdf etc 
$('#imageGetFormSVG').val(svg); 
$('#imageGetForm').submit(); 

pracy tutaj: http://jsfiddle.net/P6XXM/