Canvasで画像をダウンロードしたい（keydownイベント）

Canvas（JavaScript）をいじっていると、たまに良いのができる。

そんなときは画像に残したい。

今まではHTMLでbuttonタグを作って、ボタンをクリックしてダウンロードしていました。

yuuuha.hatenablog.com

キーを押してダウンロードする

しかし、マウスを動かすことなしに、その場でダウンロードしたいときが多い。

今回はキーを押してダウンロードする方法を確認してみる。

調べてみると、keydownイベントを使うようです。

developer.mozilla.org

addEventListenerで[keydown]を指定して、event.keyでキーを取れるようです。

[s]キーを押すと、canvasの画像をダウンロードできるようにしてみました。

document.addEventListener('keydown', (e) => {
        if (e.key === 's') {
            let a = document.createElement('a')
            a.href = canvas.toDataURL('image/png', 1.0)
            a.download = 'canvas_0717-1'
            a.click()
        }
    })