htmltoimageダウンロード - htmltoimageソースコードのダウンロード

htmltoimage

その他のソースコード

rc-0.1

ダウンロード

htmlから画像へ

HTML5 キャンバスと SVG を使用して DOM ノードから画像を生成します。
より保守しやすいコードといくつかの新機能を備えた dom からイメージへのフォーク。

インストール

npm install --save html-to-image

使用法

/* ES6 */import * as htmlToImage from 'html-to-image';import { toPng, toJpeg, toBlob, toPixelData, toSvg } from 'html-to-image';/* ES5 */var htmlToImage = require(' html から画像へ');

すべてのトップレベル関数は DOM ノードとレンダリングオプションを受け入れ、対応する dataURL で満たされた Promise を返します。

toSvg
toPng
JPEGへ
toBlob
toピクセルデータ

次の例に進んでください。

PNG 画像の Base64 エンコードされたデータ URL を取得して、すぐに表示します。

 var node = document.getElementById('my-node');htmlToImage.toPng(node)
  .then(function (dataUrl) {var img = new Image();img.src = dataUrl;document.body.appendChild(img);
  })
  .catch(function (error) {console.error('おっと、何か問題が発生しました!', error);
  });

PNG 画像の Base64 でエンコードされたデータ URL を取得し、ダウンロードします (ダウンロードを使用)。

 htmlToImage.toPng(document.getElementById('my-node'))
  .then(function (dataUrl) {download(dataUrl, 'my-node.png');
  });

PNG 画像 BLOB を取得してダウンロードします (FileSaver を使用):

 htmlToImage.toBlob(document.getElementById('my-node'))
  .then(関数 (blob) {window.saveAs(blob, 'my-node.png');
  });

圧縮 JPEG 画像を保存してダウンロードします。

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

SVG データ URL を取得しますが、すべての<i>要素をフィルターで除外します。

関数フィルター (ノード) {
  return (node.tagName !== 'i');}htmlToImage.toSvg(document.getElementById('my-node'), { filter: filter })
  .then(function (dataUrl) {/* 何かを実行します */
  });

ピクセルの RGBA データを表す 4 つの配列要素ごとに生のピクセルデータを Uint8Array として取得します。

 var node = document.getElementById('my-node');htmlToImage.toPixelData(node)
  .then(関数 (ピクセル) {for (var y = 0; y < node.scrollHeight; ++y) { for (var x = 0; x < node.scrollWidth; ++x) {pixelAtXYOffset = (4 * y) *node.scrollHeight)+(4*x);/*pixelAtXY は、範囲内の (x, y) にあるピクセルの RGBA 値を含む Uint8Array[4] です。 0..255 */pixelAtXY = ピクセル.スライス(ピクセルAtXYOffset, ピクセルAtXYOffset + 4);
  });

HTMLCanvasElement を取得して、すぐに表示します。

 htmlToImage.toCanvas(document.getElementById('my-node'))
  .then(関数 (キャンバス) {document.body.appendChild(canvas);
  });

オプション

フィルター

DOM ノードを引数として取る関数。渡されたノードを出力に含める必要がある場合は true を返す必要があります。ノードを除外すると、その子も除外されます。

ルートノードでは呼び出されません。

背景色

背景色の文字列値、任意の有効な CSS カラー値。

幅、高さ

レンダリング前にノードに適用される幅と高さ (ピクセル単位)。

スタイル

レンダリング前にプロパティがノードのスタイルにコピーされるオブジェクト。 CSS プロパティの JavaScript 名については、このリファレンスを確認してください。

品質

JPEG 画像の画質を示す0 ～ 1の数値 (例: 0.92 => 92% )。

デフォルトは1.0 ( 100% )

キャッシュバスト

true に設定すると、現在時刻がクエリ文字列として URL リクエストに追加され、キャッシュ無効化が有効になります。

デフォルトはfalse

画像プレースホルダー

画像の取得に失敗したときに使用されるプレースホルダー画像のデータ URL。

デフォルトは空の文字列で、失敗したイメージの空の領域がレンダリングされます。

ブラウザ

最新の Chrome と Firefox (執筆時点ではそれぞれ 49 と 45) でテストされており、大きな DOM ツリーでは Chrome のパフォーマンスが大幅に向上しています。これはおそらく、よりパフォーマンスの高い SVG サポートと、 CSSStyleDeclaration.cssTextプロパティをサポートしているためと考えられます。

Internet Explorer は SVG の<foreignObject>タグをサポートしていないため、サポートされません (そして今後もサポートされません)。

Safari は、 <foreignObject>タグでより厳格なセキュリティモデルを使用しているため、サポートされていません。推奨される回避策は、 toSvg使用してサーバー上でレンダリングすることです。

依存関係

ソース

現在は標準ライブラリのみが使用されていますが、ブラウザが以下をサポートしていることを確認してください。

約束
SVG <foreignObject>タグ

仕組み

HTML の一部を画像にエクスポートする簡単で標準的な方法がいつか存在するかもしれません (あるいはすでに存在しているのでしょうか?) (そして、このスクリプトは、そのようなものを取得するために私が乗り越えなければならなかったすべての困難の証拠としてのみ役立ちます)明らかなことは完了しました）しかし、今のところ見つかっていません。

このライブラリは、 <foreignObject>タグ内に任意の HTML コンテンツを含めることができる SVG の機能を使用します。したがって、その DOM ノードをレンダリングするには、次の手順を実行します。

元の DOM ノードを再帰的にクローン作成します
ノードと各サブノードのスタイルを計算し、対応するクローンにコピーします。

もちろん、疑似要素は決して複製されないので、忘れずに再作成してください。

Web フォントを埋め込む

Web フォントを表す可能性のあるすべての@font-face宣言を検索します
ファイルの URL を解析し、対応するファイルをダウンロードする
Base64 エンコードおよびデータ URL としてのインラインコンテンツ
処理されたすべての CSS ルールを連結して 1 つの<style>要素に入れ、それをクローンにアタッチします。

画像を埋め込む

<img>要素に画像 URL を埋め込む
フォントと同様の方法で、 background CSS プロパティで使用されるインライン画像

クローン作成されたノードを XML にシリアル化します。
XML を<foreignObject>タグにラップし、次に SVG にラップして、それをデータ URL にします
オプションで、PNG コンテンツまたは生のピクセルデータを Uint8Array として取得するには、ソースとして SVG を使用して Image 要素を作成し、それを同じく作成したオフスクリーンキャンバス上にレンダリングしてから、キャンバスからコンテンツを読み取ります。
終わり！