dom-to-imageで画像の大きさと質を設定する

2024年3月4日

dom-to-imageを使ってdomを画像にすると、出力される画像は大きさがそのままの大きさの画像が出力されます。

そのため、出力された画像の用途によっては

画像が小さい
画像が荒い

と感じるので、画像の大きさと質の設定方法を紹介します。

画像の大きさと質の設定方法

dom-to-imageを使って画像の大きさと質の設定方法は以下の通りです。

import domtoimage from 'dom-to-image';

const domNode = document.getElementById("domId");

if (domNode) {
  const scale = 3;
  const dataUrl = await domtoimage.toPng(domNode, {
  width: domNode.clientWidth * scale,
  height: domNode.clientHeight * scale,
  style: {
    transform: "scale(" + scale + ")",
    transformOrigin: "top left",
  },
});

widthとheightでdomの何倍の大きさにするかを指定します。

styleでは左上を起点として、何倍に拡大するかを指定します。

参考

GitHub

How to improve the image quality? · Issue #310 · tsayen/dom-to-image domtoimage.toBlob(shareContent).then(function(blob) { FileSaver.saveAs(blob, _this.fileName + ‘.png’) }) Hello, I has a problem,the picture is not really clear….