Canvasで画像をダウンロードしたい

JavaScriptのCanvasで画像を制作したあと、もちろん画像をダウンロードしたくなります。
私もダンロードをしようとしました。しかし、情報が少なくてダウンロードができませんでした。
そこで調べてみました。

ダウンロード方法

いろいろ調べてみて、やっとダウンロードできました。
正しいかどうかはわかりませんが、とりあえずダウンロードすることができたコードは以下です。

btn = document.getElementById('btn')
btn.addEventListener('click', () => {
    let a = document.createElement('a')
    a.href = canvas.toDataURL('image/png', 1.0)
    a.download = 'canvas-download'
    a.click()
})

このコードでpngがダウンロードできます。 jpgをダウンロードしたい場合は、4行目をpngからjpegに変更します。

a.href = canvas.toDataURL('image/jpeg', 1.0)

サンプル

サンプルとして、クリックすると円が表示されるものを作りました。 Canvasの画像をダウンロード

▼メインのJavaScript

ダウンロードをする際に背景はcssで作るのではなく、Rectなどで作る必要がありそうです。
cssで作ると背景が真っ黒になってしまいます。

function setup() {
    ctx.fillStyle = 'lightskyblue'
    ctx.fillRect(0, 0, screenWidth, screenHeight)
}

function touchStart() {
    ctx.beginPath()
    ctx.arc(curYubiX, curYubiY, 100, 0, Math.PI * 2)
    ctx.stroke()
}

▼ベースとなるJavaScript

let canvas, ctx
let screenWidth, screenHeight
let curYubiX, curYubiY
let btn

onload = () => {
    canvas = document.getElementById('canvas')
    ctx = canvas.getContext('2d')

    screenWidth = canvas.width
    screenHeight = canvas.height

    setup()

    canvas.addEventListener('mousedown', (e) => {
        let rect = canvas.getBoundingClientRect()
        let bai = screenWidth / rect.width
        curYubiX = (e.clientX - rect.left) * bai
        curYubiY = (e.clientY - rect.top) * bai
        touchStart()
    })

    btn = document.getElementById('btn')
    btn.addEventListener('click', () => {
        let a = document.createElement('a')
        a.href = canvas.toDataURL('image/png', 1.0)
        a.download = 'canvas-download'
        a.click()
    })
}

▼HTML

<canvas id="canvas" width="1280px" height="1280px"></canvas>
<script src="script.js"></script>
<br />
<button id="btn">Download</button>

▼CSS

html,body{
    text-align: center;
    margin: 0 auto;
}

#canvas{
    background-color: lightskyblue;
    width: 100%;
    height: auto;
    max-width: 640px;
}

Canvasでgenerative artの作品を作りたいなと思ってます。 yuuuha.hatenablog.com

隅歩つ

書いて理解を深める