問題タブ [html2canvas]

Webページのスクリーンショットを取得してサムネイルとしてレンダリングするためにhtml2canvasを使用しています（正確にはサムネイルではなく、400x300です）。

Screenshot console codeに基づいて、サムネイル部分を除いてすべてがうまく機能します。

画像サイズを 400x300 に設定するにはどうすればよいですか? firebug では、属性を次のように見つけます<canvas style="width: 973px; height: 2184px;" width="973" height="2184"></canvas>。ただし、コード (以下) または html2canvas.js で 400x300 パラメーターをハードコーディングする場所がわかりません。

スクリーンショット.html:

これが私が使用しているスクリプトです

HTML

現在、html 本文コンテンツのスクリーンショットを生成しています

画像のサイズを変更し、ローカル サーバーに (保存/アップロード) する必要があります

クライアント側（ブラウザ）でWebページのスクリーンショットを撮ることができるhtml2canvas javascriptプラグインをダウンロードしましたが、それを使用するためにページのヘッダーに含めることになっているファイルがわかりません、使用方法の例を見てきましたが、どのファイルを含める必要がありますか？

html2canvasを使用したいのですが、ドキュメントでの使用方法が十分に明確ではありません。どのライブラリを含める必要がありますか？そして、このコードの平和は私が必要としているものだけですか？プロキシはどうですか？撮影後にスクリーンショットを保存するにはどうすればよいですか？

html2canvas0.34を使用してWebサイトのスクリーンショットを保存しようとしています。

しかし、スクリーンショットをどこに保存するか、スクリーンショットをデータベースに保存する方法、または新しいウィンドウで画像を開く方法がわかりません。

私のコードは以下の通りです：

画像のスクリーンショットをデータベースに保存するか、別のウィンドウで開きたい。

どうもありがとうございます。

ドラッグアンドドロップの結果のスクリーンショットを撮りたいのですが、どうすればよいかわかりません。

実際、私は2つのjavascriptを見つけ、html2canvasやcanvas2imageなどのHTML5を使用しています。

現在、それらを組み合わせていますが、canvas2imageでまだいくつかの問題が発生しています。

あなたが同じ経験をしているなら、私がこの問題を解決するのを手伝ってください、どうもありがとう。

私を助けてください、私はここに何日も在庫があります。

コードをドラッグアンドドロップします。

画像生成コード

HTMLコード

要素のスクリーンショットを作成し、base64でエンコードされた文字列として保存するjavascriptブックマークレットがあります。

次に、その画像/文字列を自分のサーバーに送信して保存する必要があります。唯一の問題は、それが6000文字以上、つまり約61 KBでありGET、サーバーに戻すのが非現実的であるということです。

どういうわけか私のサーバーにそれを取り戻すような外部サービスはありますか？この画像をサーバーに送信するにはどうすればよいですか？

この Web ページが画像として表示された新しいウィンドウが表示されますか? 私は何が欠けていますか？

jquery と codeigniter を使用してカスタム卒業ストール コンフィギュレーターを作成しています。私は今欲しいものをすべて手に入れました。私の計画は、html2canvas を使用して、カートに追加ボタンをクリックしたときに盗まれた div のスクリーンショットを撮ることです。この画像を非表示の入力値などに渡すだけで、画像をサーバーに書き込むことができます。

ストール コンフィギュレーターは、カスタム ストール コンフィギュレーターで確認できます。[カートに入れる] ボタンをクリックすると、現在、ストールの画像が生成され、かなりうまく機能しているように見えます。

その画像へのURLを非表示の入力に入れるか、何らかの方法で画像をフォルダーに移動してパスを書き込むための最良の方法または任意の方法に固執しています。

これを行う際の私のポイントは、ショッピング カートに「カスタム ストール プレビュー」へのリンクがあり、クリックするとこのキャンバス レンダリングが表示されるようにすることです。

これをどのように達成できるかについての助けは、非常に役立ちます。ありがとう。

ちなみに、スクリーンショットを行っているJSは次のとおりです。

});

編集：

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

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

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

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

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

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

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

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