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

DOM要素を画像に変換する

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

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

3 年

GitHub Starsランキング

統計詳細

パッケージ
ダウンロード数
Stars
サイズ
Issues
公開日時
ライセンス
html2canvas11,177,37931,8253.38 MB1,048-MIT
dom-to-image266,46110,781-3378年前MIT

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

画像化のアプローチ

  • html2canvas:

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

  • dom-to-image:

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

画像フォーマット

  • html2canvas:

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

  • dom-to-image:

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

スタイルの再現

  • html2canvas:

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

  • dom-to-image:

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

クロスドメイン対応

  • html2canvas:

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

  • dom-to-image:

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

コード例

  • 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:

    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 vs dom-to-image

  • html2canvas:

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

  • dom-to-image:

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

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と類似した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 のREADME

html2canvas

Homepage | Downloads | Questions

Gitter CI NPM Downloads NPM Version

JavaScript HTML renderer

The script allows you to take "screenshots" of webpages or parts of it, directly on the users browser. The screenshot is based on the DOM and as such may not be 100% accurate to the real representation as it does not make an actual screenshot, but builds the screenshot based on the information available on the page.

How does it work?

The script renders the current page as a canvas image, by reading the DOM and the different styles applied to the elements.

It does not require any rendering from the server, as the whole image is created on the client's browser. However, as it is heavily dependent on the browser, this library is not suitable to be used in nodejs. It doesn't magically circumvent any browser content policy restrictions either, so rendering cross-origin content will require a proxy to get the content to the same origin.

The script is still in a very experimental state, so I don't recommend using it in a production environment nor start building applications with it yet, as there will be still major changes made.

Browser compatibility

The library should work fine on the following browsers (with Promise polyfill):

  • Firefox 3.5+
  • Google Chrome
  • Opera 12+
  • IE9+
  • Safari 6+

As each CSS property needs to be manually built to be supported, there are a number of properties that are not yet supported.

Usage

The html2canvas library utilizes Promises and expects them to be available in the global context. If you wish to support older browsers that do not natively support Promises, please include a polyfill such as es6-promise before including html2canvas.

To render an element with html2canvas, simply call: html2canvas(element[, options]);

The function returns a Promise containing the <canvas> element. Simply add a promise fulfillment handler to the promise using then:

html2canvas(document.body).then(function(canvas) {
    document.body.appendChild(canvas);
});

Building

You can download ready builds here.

Clone git repository:

$ git clone git://github.com/niklasvh/html2canvas.git

Install dependencies:

$ npm install

Build browser bundle

$ npm run build

Examples

For more information and examples, please visit the homepage or try the test console.

Contributing

If you wish to contribute to the project, please send the pull requests to the develop branch. Before submitting any changes, try and test that the changes work with all the support browsers. If some CSS property isn't supported or is incomplete, please create appropriate tests for it as well before submitting any code changes.

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.