効果
- ブラウザのスクリーンショットのラインが、改善すべきショットの精度によって、純粋なJSによってhtml2canvasは、いくつかのCSSが特定されないので、キャンバスは、元の画像のスタイルを完璧に表現することはできません
サポートされているブラウザ
- Firefoxの3.5+
- グーグルクローム
- オペラ12+
- IE9 +
- サファリ6+
基本的な構文
// 二つのパラメータ：最後キャンバスキャンバスのスクリーンショットが返された後に必要な要素のスクリーンショットのID、テーマ機能が実行される 。html2canvasを（のdocument.getElementById（「ID」））を（機能（キャンバス）{文献。 body.appendChild（キャンバス）;}）;
利用可能なパラメータ
| パラメーター名 | タイプ | デフォルト値 | 説明 |
|---|---|---|---|
| allowTaint | ブーリアン | 偽 | ---キャンバスを汚染チェックするために、クロスオリジンの画像を許可するかどうか允许跨域 |
| バックグラウンド | 弦 | #FFF | 何もDOMに指定されていない場合はキャンバスの背景色、。デフォルトなし透明ならばセット、---透明背景色のためのキャンバスを未定義 |
| 高さ | 数 | ヌル | ピクセル単位でキャンバスのheigtを定義します。nullの場合は、ウィンドウの完全な高さでレンダリング.---キャンバスを高度设定 |
| letterRendering | ブーリアン | 偽 | 個別に各文字をレンダリングするかどうか。必要な文字間隔が使用されている場合.---便利な単語の間隔を設けた場合 |
| ロギング | ブーリアン | 偽 | console.logでコンソールにイベントをログに記録するかどうか---（）の出力情報 |
| 代理 | 弦 | 未定義 | クロス原点画像をロードするために使用されるプロキシのURL。空のままにすると、クロスオリジンのイメージがロードされません.---代理地址 |
| taintTest | ブーリアン | 真 | それはそれらを描画する前に、キャンバスは汚染場合は、各画像をテストするかどうか---かどうかのテスト画像をレンダリングする前に、 |
| タイムアウト | 数 | 0 | ミリ秒単位で、画像をロードするためのタイムアウト。タイムアウトなし.---画像の読み込み遅延になります0に設定、デフォルトの遅延は0ミリ秒です |
| 幅 | 数 | ヌル | ピクセル単位でキャンバスの幅を定義します。nullの場合は、ウィンドウ.---キャンバスの幅いっぱいにレンダリング宽度 |
| useCORS | ブーリアン | 偽 | CORSを務めたとして、なぜこれをproxy--に戻って戻る前に、私は知らない、クロスオリジンの画像をロードしようとするかどうか |
してくださいFudawuqi環境ビュー
生成した後：
HTMLキャンバスはbase64で写真を生成canvas.toDataURL生成
図小さな底4は、クロスドメインので、両者が発生することができない、クロスドメインは、図1に発生させることができる可能にするために設けられています。
html2canvas（のdocument.getElementById（「htmlDom」）、{ useCORS：trueに、// このプロパティを設定するには、画像要求ヘッドバンドのアクセス制御-許可起源： * 301の要求ジャンプの画像でない場合、生成されてもよいです生成 onrendered：機能（キャンバス）{ window.can = キャンバス; にconsole.log（キャンバス）; $（ "#tarPic"）ATTR（ "SRC" 、canvas.toDataURL（）） document.body.appendChild（キャンバス）。 } // 幅：300、 // 高さ：300 }）;
サンプルコード：https://files.cnblogs.com/files/zhidong123/htmlToCanvas.rar
https://github.com/zhidong10/solutions/tree/master/htmlToCanvas