作品例・キャンバスを画像としてダウンロード
adminファイル名：js-web/quest_07565.html
「クリックされたところに円を描く」に、キャンバスを画像としてダウンロードするプログラムを追加しました。
ソースコード
<p><a href="#" id="link" download="circle.png">キャンバスを画像としてダウンロード</a></p>
<script type="text/javascript">
/*
クリックされたところに円を描くコード
*/
//リンクをクリックすると画像をダウンロードする
const link = document.getElementById('link')
link.addEventListener('click', (e) => {
e.currentTarget.href = canvas.toDataURL('image/png');
});
</script>
解説
toDataURL()を使うとキャンバスから画像データを作成できます。
お手本コードでは「circle」という名前のpng形式の画像ファイルにしています。
名前を変えたりjpg形式などにするにはどうすればよいでしょうか？ 調べてみましょう。