html2canvasとは？
HTML の Element を画像に変換するライブラリです。実際にスクリーンショットを撮っているのではなく、ブラウザのレンダリングエンジンに近い挙動になる。
構文
|
1 2 3 |
html2canvas(キャプチャの対象要素,オプション).then(function(データURL){ データURLの出力処理 }); |
オプション
| 設定値 | デフォルト値 | 説明 |
|---|---|---|
| allowTaint | false |
クロスオリジンの画像によるキャンバスの汚染を許可するかどうか |
| backgroundColor | #ffffff | DOM で何も指定されていない場合は、キャンバスの背景色。null透明に設定 |
| canvas | null | canvas描画のベースとして使用する既存の要素 |
| foreignObjectRendering | false | ブラウザがサポートしている場合、ForeignObject レンダリングを使用するかどうか |
| imageTimeout | 15000 | 画像読み込みのタイムアウト (ミリ秒単位)。タイムアウトを無効にするには、 に設定します0。 |
| ignoreElements | (element) => false | 一致する要素をレンダリングから削除する述語関数。 |
| logging | true | デバッグ目的でロギングを有効にする |
| onclone | null | Document がレンダリングのために複製されたときに呼び出されるコールバック関数を使用して、元のソース ドキュメントに影響を与えることなく、レンダリングされるコンテンツを変更できます。 |
| proxy | null | クロスオリジン イメージのロードに使用されるプロキシへの URL 。空のままにすると、クロスオリジン イメージは読み込まれません。 |
| removeContainer | true | html2canvas が一時的に作成する複製された DOM 要素をクリーンアップするかどうか |
| scale | window.devicePixelRatio | レンダリングに使用するスケール。デフォルトはブラウザのデバイスのピクセル比です。 |
| useCORS | false | CORS を使用してサーバーから画像をロードしようとするかどうか |
| width | Element width | canvasの幅 |
| height | Element height | canvasの高さ |
| x | Element x-offset | キャンバスの x 座標をトリミング |
| y | Element y-offset | キャンバスの y 座標をトリミング |
| scrollX | Element scrollX | 要素をレンダリングするときに使用する x スクロール位置 (たとえば、要素が を使用する場合position: fixed) |
| scrollY | Element scrollY | 要素をレンダリングするときに使用する y スクロール位置 (たとえば、要素が を使用する場合position: fixed) |
| windowWidth | Window.innerWidth | レンダリング時に使用するウィンドウ幅Element。メディア クエリなどに影響を与える可能性があります。 |
| windowHeight | Window.innerHeight | レンダリング時に使用するウィンドウの高さElement。メディア クエリなどに影響を与える可能性があります。 |
jsPDFとは？
画像をPDFとして書き出せます。html2canvasと同時に使われることが多いです。
addImageメソッド
| オプション名 | 説明 |
|---|---|
| imageData | base64でエンコードされたDataUrlまたはImage-HTMLElementまたはCanvas-HTMLElementとしてのimageData |
| format | JPEGなどの画像ファイル形式です。 |
| x | PDFのページのx座標（横方向）です。 |
| y | PDFのページのy座標（縦方向）です。 |
| width | PDFの幅 |
| height | PDFの高さ |
| alias | 画像のエイリアス（複数回使用する場合） |
| compression | 生成されたJPEGの圧縮には、「NONE」、「FAST」、「MEDIUM」、「SLOW」の値を指定できる。 |
| rotation | 画像を回転させる場合に使う。 |
この記事へのコメントはありません。