2016-04-20 53 views
1

私はJSとHTMLで非常に初心者です。 私は、特定のプロジェクトで円グラフを生成するために取り組んでいます。私はHTML APIを使用してgooglechartsを使用しています。画像URLから画像ファイルを保存javascript html

私はチャートの作成と画像URLの取得を管理しました。 私はこの行を呼び出したときそれは window.open(URL); 画像を含む新しいウィンドウが開きます。 私の質問は、URLを受け取り、プロジェクトフォルダにイメージをダウンロードする同様の型のメソッドがありますか? ダウンロードのようなもの(URL、 'PNG');またはダウンロード(URL);?

答えて

0

あなたがその画像をダウンロードするには、エンドユーザーを許可するようにしようとしている場合は、この質問を参照してください: Download image with JavaScript

ページで使用する画像をダウンロードしようとしているなら、なぜタグを使用しないと、リモートでそれを参照します?

<img src="[url retrieved from the api]"> 

Javascriptはクライアント側で実行されるため、ダウンロード機能はプロジェクトフォルダではなくエンドユーザーにダウンロードされます。

EDIT:使用されたコードでフィドルを作り実装しました。

The fiddle

Google Chartのドキュメント「Printing PNGs」から取得しました。彼らのやり方は次のとおりです:

//Your data and options initialization up here 
.... 

//Event listener 
google.visualization.events.addListener(chart, 'ready', function() { 
    chart_div.innerHTML = '<img src="' + chart.getImageURI() + '" download="chart.png">'; 
    console.log(chart_div.innerHTML); 
}); 

//Actually draw the chart 
chart.draw(data, options); 

他のSOのリンクを使用してダウンロード手順を完了してください。

+0

私はエンドユーザーにダウンロードさせても問題ないと思うので、HTMLを使ってチャートを生成しています。 これは私のHTMLコードです。 https://drive.google.com/file/d/0BzIX54uDTFnXNG96WjJNRU5yNWs/view?usp=sharing 私もそう画像のURLを埋め込む方法IDKのMarkdownで初心者だ:D –

+0

には、Googleから、これをチェックしてくださいChartsドキュメント:[PNGチャートの印刷](https://developers.google.com/chart/interactive/docs/printing) –

+0

ソリューションで自分の回答を更新しました。 –

-1

私が知っている限り、Javascriptでこれを行う方法はありません(私は完全に間違っている可能性があります)。代わりにHTML5で行うことができます。

HTML5:http://caniuse.com/#feat=download

0

http://pixelscommander.com/en/javascript/javascript-file-download-ignore-content-type/(あなたがここhttp://codepen.io/jelmerdemaat/pen/brjKG?editors=0010作業を参照することができます)この記事を読んで

あなた:あなたがここにこのタグのためにサポートされているブラウザのリストを取得することができます

<a href="website.com/imageurl.png" download="ImageNameHere">click here</a>

downloadFile(URL);と呼ぶことができます。ユーザーは画像をどこに保存するかを選択できます