canvas タグで作成した画像をダウンロードさせるボタンを作る(透過あり/透過なしも選べる実装)

JavaScript 周りってホントにネタが尽きないなと思う今日このごろ

canvas タグで表示した図は、
画像ホバー => 右クリック => 画像を保存
で画像としてダウンロードすることができます。

これは jsfiddle の Chartjs の例です

result のグラフで実際に確認することができます

今回は、このグラフをボタンクリックでダウンロードできるようにしようというお話です。

コツが3つあって

・canvas にはtoDataURLというメソッドがあり、リソースを普通に吐き出しするとBASE64のデータイメージで返してくれる
・背景透過 => 背景ありにする方法
・擬似的にリンクをクリックしてファイルダウンロードする(JS側で何かダウンロードしてもらう時によく使う)

この辺りを踏まえてコードを読んでいただけるといいかもです

上の例にボタンと関数を追加していきます

    <button onClick="downloadImage()">
    透過PNG
    </button>
    
    <button onClick="downloadImage(false)">
    透過なしPNG
    </button>

const downloadImage = (transparent = true) => {
  const canvas = document.querySelector('#chartJSContainer');
  
  let targetCanvas = canvas; 
  if(!transparent) {
    // 透過なしの場合、ここで背景指定した別のcanvasを用意して上書きしてあげる!
    
    const dummyCanvas = document.createElement("canvas");
    dummyCanvas.width = canvas.width
    dummyCanvas.height = canvas.height

    const dummyCtx = dummyCanvas.getContext('2d');

    dummyCtx.fillStyle = "#FFFFFF";
    dummyCtx.fillRect(0, 0, canvas.width, canvas.height);

    dummyCtx.drawImage(canvas, 0, 0);
    targetCanvas = dummyCanvas
  }
  
  // dummy のaタグを用意して疑似クリック
  const dummyLink = document.createElement("a");
  dummyLink.type = 'application/octet-stream';
  dummyLink.download = `test.png`
  dummyLink.href = targetCanvas.toDataURL('image/png')
  dummyLink.click()
}

これらを埋め込んだ jsfiddle はこちら

面白いですね!

ではでは〜