【解決】httml 2 canvas.jsスクリーンショットは現在の可視領域のみを切り取ります.
3120 ワード
前にEchartsチャートを書いてPDFファイルを作成しました.http://blog.csdn.net/zt_fucker/articale/detail/7160362
簡単なデモ例です.写真と文字を含めて、最近の需要は広範囲の文字とajax動的に取得した入れ子データです.
httml 2 canvas 0.4.1.
元のページコードは非常に複雑で、コードを完全に元に戻すことができません.ページコードには、iframe、easyUI、tabタグが含まれています.
理由:tabタグの分類表示を使用していた場合、現在選択されているモジュールは内容を表示し、モジュールの内容が選択されていません.隠し状態に設定されています.httml 2 canvasプラグインは、隠しているdom要素を識別することができません.
アイデア:スクリーンショットを生成する必要があるdomノードを見つけ、ページレンダリングが完了したら、バックアップノードをクローンし、bodyの後に追加します.このバックアップノードは隠し状態ではなく、バックアップノードの絶対位置とレイヤーレベルを設定します.
注:ajaxはデータを動的にロードするので、ページローディング時にクローンコピーノードを実行できません.ボタントリガを設定したほうがいいです.
簡単なデモ例です.写真と文字を含めて、最近の需要は広範囲の文字とajax動的に取得した入れ子データです.
httml 2 canvas 0.4.1.
元のページコードは非常に複雑で、コードを完全に元に戻すことができません.ページコードには、iframe、easyUI、tabタグが含まれています.
理由:tabタグの分類表示を使用していた場合、現在選択されているモジュールは内容を表示し、モジュールの内容が選択されていません.隠し状態に設定されています.httml 2 canvasプラグインは、隠しているdom要素を識別することができません.
アイデア:スクリーンショットを生成する必要があるdomノードを見つけ、ページレンダリングが完了したら、バックアップノードをクローンし、bodyの後に追加します.このバックアップノードは隠し状態ではなく、バックアップノードの絶対位置とレイヤーレベルを設定します.
注:ajaxはデータを動的にロードするので、ページローディング時にクローンコピーノードを実行できません.ボタントリガを設定したほうがいいです.
$("#downpdf").on("click", function() {
// , 。
var height = $(TargetNode).height()
// , false, , true 。
var cloneDom = $(TargetNode).clone(true);
// css , 0, 。
cloneDom.css({
"background-color": "white",
"position": "absolute",
"top": "0px",
"z-index": "-1",
"height": height
});
// body 。
$("body").append(cloneDom);
// base64img 。
html2canvas(cloneDom, {
//Whether to allow cross-origin images to taint the canvas
allowTaint: true,
//Whether to test each image if it taints the canvas before drawing them
taintTest: false,
onrendered: function(canvas) {
var img = canvas.toDataURL('image/jpeg', 1.0);
// :data:image/jpeg;base64,/9j/4AAQSkZJRg....
// chrome
console.log(img);
}
});
});
注:ドメインをまたぐ問題があったら、headerまたは代理を使って修正してみてください.