web-dev-qa-db-ja.com

html2canvasオフスクリーン

Html2canvasを使用する際に、個々のサムネイルを作成したいDOMオブジェクト（さまざまなものを含む相対的な位置にあるdiv）のstackがあります。したがって、divが10個ある場合は、サムネイルを10個作成します。

これらのオブジェクトの一部は画面外に表示されます。これらの各divは、「mainDiv」と呼ばれる単一のdivを含みます。 mainDiv内のdivを繰り返し処理し、それぞれに対してhtml2canvasを個別に実行します。

画面に表示されているものの場合、これは問題なく機能します。画面外にあるものはそうではありません-それらは空白に戻ります。オブジェクトをmainDivの一番上までスクロールする回避策を作成しましたが、これは厄介で視覚的に魅力的ではありません。

表示されていないDOMオブジェクトを指定することはできますか？理想的には、含むdivを指定し、html2canvasに親の可視性を無視させて、非表示のオブジェクトをスクリーンキャプチャできるようにしたいのですが、それを除けば、次のようなオブジェクトをスクリーンキャプチャできるようにしたいと思います。画面からスクロールするだけです。

何か考え、アイデアはありますか？ありがとう！

----ここにいくつかのサンプルコードがあります。基本的に、div内に多数のdivがある場合は、それらを繰り返し処理します。私は実際にこれをrecursivelyして、一度に1つだけが処理され、コールバックが再帰関数を呼び出すようにしているので、次のようになります。

  function recurser(anIndex, callback) {
    if (anIndex == -1) {
        callback();
        return;
    }
    $(myDivs[anIndex]).html2canvas({
        onrendered : function(canvas) {
            var img = canvas.toDataURL();
            // store the image in an array, do stuff with it, etc.
            recurser(--anIndex, callback);

        }
    })

}

再帰呼び出しが完了すると、コールバック関数が実行されます。コールバック関数は、画像を処理する関数です。

繰り返しますが、オブジェクトが#mainDiv内のすべてのdivを含むスクロールdiv内に表示されている限り、これはすべて正常に機能します。ただし、divのいずれかの部分がスクロールオフされると、黒になります。実際、2つのdivの半分（1つの上半分、次の下半分）をスクロールオフすると、両方とも完全に黒くなります。

javascripthtmlhtml2canvas
22
sneuf

これは古い質問だと思いますが、ちょっと面白そうです。私のテストによると、ビューポートの外にあるposition: absolute要素とposition:fixed要素だけがこの問題を引き起こしたように見えました。私はその問題の解決策を見つけました。

私がやっていることは、要素のクローンを作成することです。クローンのスタイルをleft = 0、top = window.innerHeight（ウィンドウ内に表示されないようにするため）およびposition = 'relative'に設定します。次に、クローンを本体に追加し、クローンでhtml2canvasを使用して、本体からクローンを削除します。このソリューションは、IE、Firefox、およびChromeで機能します。

JSBinの例はこちら を作成しました。主なJavaScriptコードは次のとおりです。

function hiddenClone(element){
  // Create clone of element
  var clone = element.cloneNode(true);

  // Position element relatively within the 
  // body but still out of the viewport
  var style = clone.style;
  style.position = 'relative';
  style.top = window.innerHeight + 'px';
  style.left = 0;

  // Append clone to body and return the clone
  document.body.appendChild(clone);
  return clone;
}

var offScreen = document.querySelector('.off-screen');

// Clone off-screen element
var clone = hiddenClone(offScreen);

// Use clone with htm2canvas and delete clone
html2canvas(clone, {
    onrendered: function(canvas) {
      document.body.appendChild(canvas);
      document.body.removeChild(clone);
    }
});
26
pseudosavant

すべての親要素に対して「オーバーフロー」を表示するように設定します。レンダリングした後、それを削除します

CSS

.overflowVisible{
    overflow:visible !important;
}

JS

$("#container").parents().each(function(ind,elem){
    $(elem).addClass("overflowVisible");
});

html2canvas($("#container"), {
    onrendered: function(canvas) {
        var img =canvas.toDataURL("image/png");
        $('body').append(img);
        $("#container").parents().each(function(ind,elem){
            $(elem).removeClass("overflowVisible");
        });
    }
});
3
Anbu

最新バージョンのhtml2canvasを使用できます。これにより、すべての画像のピクセル化の問題とレンダリングオブジェクトの問題が解決されます。私はErikkoopmansによるバージョン0.5.0-beta4を使用しました これを参照 そして以下のようにhtml2canvasと呼びました：

$('html,body').scrollTop(0); // Take your <div> / html at top position before calling html2canvas

     html2canvas( $("#my_div"), {
         useCORS: true,
         dpi: 200,

          onrendered:function(canvas) {

              var str = canvas.toDataURL("image/png");
              var contentType = 'image/png';
              console.log(str);
              b64Data =str;
              $('#uploadedImage').val(b64Data); // set image captured by html2canvas
              imgFrameSave(); // Call a function to save your image at server side.
          }
        })
1
Maulik

ああ、Div表示を試しましたか：なし。およびDiv表示：絶対; （またはdivをどのように表示するか-おそらくz-index）

    arrow1.onclick = (event){
arrow1.style.display = none;
arrow2.style.display = absolute;
}

    arrow2.onclick = (event){
arrow2.style.display = none;
arrow1.style.display = absolute;
}
0
Harry