dom-to-image vs html2canvas
DOM要素を画像に変換する
パッケージを検索...
dom-to-imagehtml2canvas類似パッケージ:

DOM要素を画像に変換する

DOM要素を画像に変換するライブラリは、ウェブページ上の特定の要素やコンテンツをキャプチャして画像ファイルとして保存するためのツールです。これらのライブラリは、ユーザーがインタラクティブなコンテンツを作成したり、スクリーンショットを取得したりする際に便利です。dom-to-imageは、指定したDOM要素を画像に変換し、データURLやBlobとして取得できるライブラリです。一方、html2canvasは、指定した要素をキャンバスに描画し、そのキャンバスから画像を生成するライブラリです。どちらも異なるアプローチでDOM要素を画像化しますが、用途や機能に応じて使い分けることができます。

npmのダウンロードトレンド

3 年

GitHub Starsランキング

統計詳細

パッケージ
ダウンロード数
Stars
サイズ
Issues
公開日時
ライセンス
dom-to-image010,777-3399年前MIT
html2canvas031,8463.38 MB1,051-MIT

機能比較: dom-to-image vs html2canvas

画像化のアプローチ

  • dom-to-image:

    dom-to-imageは、指定したDOM要素を画像化するために、要素のスタイルや内容を解析し、Canvas APIを使用して画像を生成します。特定の要素に焦点を当てて画像化するため、必要な部分だけをキャプチャすることができます。

  • html2canvas:

    html2canvasは、指定した要素をキャンバスに描画するために、DOMツリーを traversing し、要素のスタイルや背景画像を取得します。要素全体をキャプチャするため、スタイルや配置を忠実に再現しますが、特定の要素だけを選択することはできません。

画像フォーマット

  • dom-to-image:

    dom-to-imageは、生成された画像をデータURLやBlob形式で取得できます。これにより、画像を直接ダウンロードしたり、他の処理に渡したりすることができます。

  • html2canvas:

    html2canvasは、キャンバスから画像を生成し、データURL形式で取得します。生成された画像は、主にWebアプリケーション内で表示したり、ダウンロードしたりすることができます。

スタイルの再現

  • dom-to-image:

    dom-to-imageは、要素のインラインスタイルや外部スタイルシートを考慮して画像を生成します。ただし、特定のスタイルや背景画像が正しく再現されない場合があります。

  • html2canvas:

    html2canvasは、要素のスタイルや背景画像を忠実に再現します。特に、複雑なスタイルや擬似要素もキャプチャするため、より正確な画像を生成します。

クロスドメイン対応

  • dom-to-image:

    dom-to-imageは、クロスドメインの画像やコンテンツを扱う際に、CORS（Cross-Origin Resource Sharing）ポリシーに従う必要があります。CORSが適切に設定されている場合、問題なく画像を生成できます。

  • html2canvas:

    html2canvasも同様に、クロスドメインのコンテンツを扱う際にCORSポリシーに従う必要があります。CORSが設定されていない場合、画像の一部がキャプチャできないことがあります。

コード例

  • dom-to-image:

    dom-to-imageを使用した画像化の例

    import { toPng } from 'dom-to-image';
const node = document.getElementById('my-node');
toPng(node)
  .then((dataUrl) => {
    const img = new Image();
    img.src = dataUrl;
    document.body.appendChild(img);
  })
  .catch((error) => {
    console.error('画像化に失敗しました:', error);
  });
  • html2canvas:

    html2canvasを使用した画像化の例

    import html2canvas from 'html2canvas';
const element = document.getElementById('my-element');
html2canvas(element)
  .then((canvas) => {
    document.body.appendChild(canvas);
    const img = canvas.toDataURL();
    console.log(img);
  })
  .catch((error) => {
    console.error('画像化に失敗しました:', error);
  });

選び方: dom-to-image vs html2canvas

  • dom-to-image:

    dom-to-imageを選択する理由は、特定のDOM要素を画像化し、データURLやBlobとして取得できる点です。特に、画像化したデータを直接ダウンロードしたり、他の処理に渡したりする必要がある場合に便利です。

  • html2canvas:

    html2canvasを選択する理由は、指定した要素をキャンバスに描画し、そのキャンバスから画像を生成する点です。特に、要素全体をキャプチャしたい場合や、スタイルや背景画像を含めて忠実に再現したい場合に適しています。

dom-to-imageと類似したnpmパッケージ

dom-to-imageは、HTML要素を画像に変換するためのJavaScriptライブラリです。このライブラリを使用すると、DOMノードを簡単にキャプチャし、PNGやJPEG形式の画像として保存できます。特に、ユーザーが生成したコンテンツを画像として保存したい場合や、レポートやダッシュボードのスクリーンショットを取得したい場合に便利です。しかし、dom-to-imageにはいくつかの代替ライブラリもあります。以下にいくつかの選択肢を紹介します。

  • html-to-imageは、HTML要素を画像に変換するためのシンプルで使いやすいライブラリです。このライブラリは、DOMノードをキャプチャし、PNGやJPEG形式の画像としてエクスポートする機能を提供します。html-to-imageは、特に使いやすさとシンプルさを重視しているため、簡単なプロジェクトや迅速なプロトタイピングに適しています。
  • html2canvasは、HTML要素をキャンバスに描画し、そのキャンバスを画像としてエクスポートするライブラリです。html2canvasは、DOMノードのスタイルやコンテンツを忠実に再現するため、複雑なレイアウトやスタイルを持つ要素のキャプチャに非常に適しています。ただし、特定のCSSスタイルや外部リソースの処理に制限がある場合があります。
  • screenshot-desktopは、デスクトップアプリケーションやウェブアプリケーションからスクリーンショットを取得するためのライブラリです。このライブラリは、ユーザーの画面全体をキャプチャし、画像として保存する機能を提供します。screenshot-desktopは、特にデスクトップ環境でのスクリーンショット取得に特化しているため、ウェブアプリケーションの特定の要素をキャプチャする場合には適していません。

これらのライブラリの比較については、以下のリンクを参照してください: dom-to-image vs html-to-image vs html2canvas vs screenshot-desktop。

html2canvasと類似したnpmパッケージ

html2canvasは、ウェブページの特定の部分をキャプチャし、画像として保存するためのJavaScriptライブラリです。このライブラリは、HTML要素をキャンバスに変換し、そのキャンバスを画像としてエクスポートすることができます。これにより、ユーザーはウェブページのスクリーンショットを簡単に取得できるようになります。特に、ユーザーインターフェースのプレビューやレポート作成など、さまざまな用途に役立ちます。

html2canvasの代替として、dom-to-imageがあります。dom-to-imageは、DOM要素を画像に変換するためのライブラリで、SVGやCanvasを含むさまざまな形式で出力することができます。html2canvasと同様に、ウェブページの特定の部分をキャプチャすることができますが、dom-to-imageは、より多様な出力形式をサポートしている点が特徴です。

html2canvasとdom-to-imageの比較を確認するには、こちらを参照してください: html2canvas vs dom-to-imageの比較。

dom-to-image のREADME

DOM to Image

Build Status

What is it

dom-to-image is a library which can turn arbitrary DOM node into a vector (SVG) or raster (PNG or JPEG) image, written in JavaScript. It's based on domvas by Paul Bakaus and has been completely rewritten, with some bugs fixed and some new features (like web font and image support) added.

Installation

NPM

npm install dom-to-image

Then load

/* in ES 6 */
import domtoimage from 'dom-to-image';
/* in ES 5 */
var domtoimage = require('dom-to-image');

Bower

bower install dom-to-image

Include either src/dom-to-image.js or dist/dom-to-image.min.js in your page and it will make the domtoimage variable available in the global scope.

<script src="path/to/dom-to-image.min.js" />
<script>
  domtoimage.toPng(node)
  //...
</script>

Usage

All the top level functions accept DOM node and rendering options, and return promises, which are fulfilled with corresponding data URLs.
Get a PNG image base64-encoded data URL and display right away:

var node = document.getElementById('my-node');

domtoimage.toPng(node)
    .then(function (dataUrl) {
        var img = new Image();
        img.src = dataUrl;
        document.body.appendChild(img);
    })
    .catch(function (error) {
        console.error('oops, something went wrong!', error);
    });

Get a PNG image blob and download it (using FileSaver, for example):

domtoimage.toBlob(document.getElementById('my-node'))
    .then(function (blob) {
        window.saveAs(blob, 'my-node.png');
    });

Save and download a compressed JPEG image:

domtoimage.toJpeg(document.getElementById('my-node'), { quality: 0.95 })
    .then(function (dataUrl) {
        var link = document.createElement('a');
        link.download = 'my-image-name.jpeg';
        link.href = dataUrl;
        link.click();
    });

Get an SVG data URL, but filter out all the <i> elements:

function filter (node) {
    return (node.tagName !== 'i');
}

domtoimage.toSvg(document.getElementById('my-node'), {filter: filter})
    .then(function (dataUrl) {
        /* do something */
    });

Get the raw pixel data as a Uint8Array with every 4 array elements representing the RGBA data of a pixel:

var node = document.getElementById('my-node');

domtoimage.toPixelData(node)
    .then(function (pixels) {
        for (var y = 0; y < node.scrollHeight; ++y) {
          for (var x = 0; x < node.scrollWidth; ++x) {
            pixelAtXYOffset = (4 * y * node.scrollHeight) + (4 * x);
            /* pixelAtXY is a Uint8Array[4] containing RGBA values of the pixel at (x, y) in the range 0..255 */
            pixelAtXY = pixels.slice(pixelAtXYOffset, pixelAtXYOffset + 4);
          }
        }
    });

All the functions under impl are not public API and are exposed only for unit testing.

Rendering options

filter

A function taking DOM node as argument. Should return true if passed node should be included in the output (excluding node means excluding it's children as well). Not called on the root node.

bgcolor

A string value for the background color, any valid CSS color value.

height, width

Height and width in pixels to be applied to node before rendering.

style

An object whose properties to be copied to node's style before rendering. You might want to check this reference for JavaScript names of CSS properties.

quality

A number between 0 and 1 indicating image quality (e.g. 0.92 => 92%) of the JPEG image. Defaults to 1.0 (100%)

cacheBust

Set to true to append the current time as a query string to URL requests to enable cache busting. Defaults to false

imagePlaceholder

A data URL for a placeholder image that will be used when fetching an image fails. Defaults to undefined and will throw an error on failed images

Browsers

It's tested on latest Chrome and Firefox (49 and 45 respectively at the time of writing), with Chrome performing significantly better on big DOM trees, possibly due to it's more performant SVG support, and the fact that it supports CSSStyleDeclaration.cssText property.

Internet Explorer is not (and will not be) supported, as it does not support SVG <foreignObject> tag

Safari is not supported, as it uses a stricter security model on <foreignObject> tag. Suggested workaround is to use toSvg and render on the server.`

Dependencies

Source

Only standard lib is currently used, but make sure your browser supports:

Tests

Most importantly, tests depend on:

  • js-imagediff, to compare rendered and control images

  • ocrad.js, for the parts when you can't compare images (due to the browser rendering differences) and just have to test whether the text is rendered

How it works

There might some day exist (or maybe already exists?) a simple and standard way of exporting parts of the HTML to image (and then this script can only serve as an evidence of all the hoops I had to jump through in order to get such obvious thing done) but I haven't found one so far.

This library uses a feature of SVG that allows having arbitrary HTML content inside of the <foreignObject> tag. So, in order to render that DOM node for you, following steps are taken:

  1. Clone the original DOM node recursively

  2. Compute the style for the node and each sub-node and copy it to corresponding clone

    • and don't forget to recreate pseudo-elements, as they are not cloned in any way, of course

  3. Embed web fonts

    • find all the @font-face declarations that might represent web fonts

    • parse file URLs, download corresponding files

    • base64-encode and inline content as data: URLs

    • concatenate all the processed CSS rules and put them into one <style> element, then attach it to the clone

  4. Embed images

    • embed image URLs in <img> elements

    • inline images used in background CSS property, in a fashion similar to fonts

  5. Serialize the cloned node to XML

  6. Wrap XML into the <foreignObject> tag, then into the SVG, then make it a data URL

  7. Optionally, to get PNG content or raw pixel data as a Uint8Array, create an Image element with the SVG as a source, and render it on an off-screen canvas, that you have also created, then read the content from the canvas

  8. Done!

Things to watch out for

  • if the DOM node you want to render includes a <canvas> element with something drawn on it, it should be handled fine, unless the canvas is tainted - in this case rendering will rather not succeed.

  • at the time of writing, Firefox has a problem with some external stylesheets (see issue #13). In such case, the error will be caught and logged.

Authors

Anatolii Saienko, Paul Bakaus (original idea)

License

MIT

npm-compare.com is an independent website designed to help developers choose the most suitable npm packages. We are not affiliated with npm, Inc, the official website for the npm registry. Note that npm is a registered trademark of npm, Inc. Please share your feedback via our GitHub repository. For more details, please refer to our Terms & Privacy.