html2canvasを使用する際に、stack個々のサムネイルを作成したいDOMオブジェクト（さまざまなものを含む相対位置のdiv）があります。したがって、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つの上半分、次の下半分）をスクロールオフすると、両方とも完全に黒くなります。