DOMをPNGに変換してリサイズしてからダウンロードする

必要なライブラリをインストール

Copied!

yarn add dom-to-image
yarn add file-saver

• dom-to-image
  • https://github.com/tsayen/dom-to-image
  • 名前の通りDOMを投げると画像に変換してくれるすごいやつ。
  • ただリサイズとかはできないので別にやる必要あり。
• file-saver
  • https://github.com/eligrey/FileSaver.js/
  • 非対応のブラウザでもsaveAs()を使えるようにしてくれる。
  • blobとファイル名を渡してファイルをダウンロードする。

変換、リサイズ、ダウンロード

Copied!

import domtoimage from 'dom-to-image';
import FileSaver from 'file-saver';

// DOM要素をdomtoimageのtoPNGに渡すと結果がPromiseで返ってくる
domtoimage.toPng(element)
  .then(function (dataUrl) {

    // dataUrlが返ってくるのでImageを生成し生成した画像を読み込む
    const img = new Image();
    img.src = dataUrl;

    // 読み込みが終わったらリサイズのために、canvasを生成しimgを描画する
    img.onload = () => {
      const canvas = document.createElement('canvas');
      canvas.width = 128;
      canvas.height = 128;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

      // canvasをblobに変換し、FileSaverでダウンロードを行う
      canvas.toBlob((blob) => {
        FileSaver.saveAs(blob, "image.png");
      });
    };
  })
  .catch((error) => {
    console.log(error);
  });

• dom-to-imgaeは画像のリサイズに対応していないので、dataUrlを一度img要素に入れ、それをcanvasに描画することでリサイズを行なう。