【解決】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はデータを動的にロードするので、ページローディング時にクローンコピーノードを実行できません.ボタントリガを設定したほうがいいです.
        $("#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または代理を使って修正してみてください.