数字を3桁カンマで表示する方法」でも書きましたけど、HTML5のcanvasを使ってグラフを描く開発をしてます。canvasは久しぶりにさわりましたけど、よく考えたらこれって結構使い勝手いいですよね。chart.jsがやってるみたいに可変的に画像を変更できますし、速度も遅くはありませんので。その後キャンバスを画像で保存する必要がでてきたんで色々と探ってみた結果、なんと(DL部分は)たった8行で実現できることが分かったんで、シェアをしたいと思います。合わせて読みたいいきなり完成版コード今回はコードが少ないんで先に完全版コードから紹介します。jQueryを使ってなくてもOKですし、あなたがReactフリークでも動きますよ!(※ちなみに最近海外のサイトを見るとドンドン「脱jQuery」が進んでるみたいです。あと、やっぱりES6が急激に増えている印象ですね。};</script></body></html>中身を説明まずHTML側に必要なのは以下の3つです。クリックイベントでダウンロードを実行します。キャンバスを画像で保存するときに必要になってきます。JavaScript側の流れはこんなカンジです。ページロードが完了したら処理を開始(テストのために)キャンバスを描画ボタンをクリックしたときに起動するイベントを設定そして、ダウンロードの本体部分はこちら。downloadLink.click();}1行目にいきなりifがきてるのは、(問題児の^^;)IE、Edgeに対応するためです。ifの中身はマイクロソフト用、elseはChromeなど他社用ってことになります。それにしても、ウェブ開発を初めて十年余。マイクロソフトはいつまでインターネットの発展を阻害し続けるんでしょうか・・・・・・。設定する方法があるのかもしれませんけど、僕の中ではもう彼等は見限っているのでパスします・・・(笑)では、その他のブラウザ用のコードがどんな流れで動くのか見ていきましょう。画像データ、downloadプロパティにファイル名を設定リンクがクリックされたことにするというものです。IE、edgeでは<a>タグのdownloadプロパティが使えないので、ダメみたいですね。my...ということで、今回のテクニックはキャンバス描画ライブラリ「JimmyJS」にも使われています。マイクロソフト製ブラウザには対応してませんし、対応する予定は今の所ありません。(こういうのをやっていかないとマイクロソフトも重い腰をあげないと思うんですよね。まー、もうPC用ブラウザはほぼみんな使わなくなってきてますけどね。)ということで今回は以上です。開発スキルプログラム開発は15年以上。Laravel、Vue.jsをメインとしてPython(機械学習)やElectronの開発もお引き受けしております。過去2度カナダのバンクーバーに滞在していました。開発状況によりましては開発をお待ちいただく可能性がございますが、いつでもご相談は受けさせていただいております。お気軽にご連絡ください!お問い合わせフォーム開発してほしい機能を募集中!MITライセンスで公開します。詳しくはこちらの記事をご覧ください。ぷれりり・プレスリリース掲載無料のプレスリリース・スタンド!播磨孤道(はりまこどう)兵庫周辺のゆったり自転車一人旅の記事を書いていきます。