問題タブ [html2canvas]

私はhtml2canvasで作業しており、次の機能があります

今、データ値を返したいので、これを試しました

しかし、コンソールを見ると「未定義」になります。console.log(data);関数内に配置imgBase64すると、画像の base64 が取得されますがdata 、その関数を使用して別の作業を行うには、その関数を使用する必要があります。何か案は？ありがとう。

Javascript でブロッキングを行うべきではないことはわかっていますし、そうしなければならないことからリファクタリングできなくなったことは一度もありません。しかし、コールバックで処理する方法がわからないことに遭遇しました。html2canvas で Downloadify を使用しようとしています (これは IE 専用です。データ URI のダウンロードは IE では機能しません)。Flash オブジェクトが何をダウンロードするかを認識できるように、データ関数を指定する必要があります。残念ながら、html2canvas は非同期です。データ URI を取得する前に、onrendered イベントが入力されるまで待機できる必要があります。

これを行う他の方法についての提案は受け付けていますが、行き詰まっています。

編集- いくつかのコメントにより、Downloadify に関する詳細情報が必要であるように思われました ( https://github.com/dcneiner/Downloadify )。Downloadify は、ブラウザーの [名前を付けて保存] ウィンドウをトリガーするために使用できる Flash オブジェクトです。downloadify() 関数は、Flash オブジェクトを初期化<object/>し、要素にタグを付けるだけです。これは Flash オブジェクトであるため、セキュリティ違反を引き起こさずに Javascript からイベントをトリガーすることはできません。

Canvas要素の画像をダウンロードするためだけにIEに使用しています。他のすべてのブラウザーでは、データ URI を使用できますが、IE は特別な花です。

html2canvasを使用してキャンバス上のdivを変換しています。このような：

html2canvas.jsで次のエラーが発生します："Uncaught Error：IndexSizeError：DOM Exception 1"：

誰かが何が起こっているのかについて考えていますか？

html ページに複数の画像があります。html2canvas を使用してページを画像に変換したいです。画像はローカルで同じソースからのものです。常にエラー メッセージ 「 Unable to get image data from canvas because the canvas has hasクロスオリジンデータによって汚染されています。」

同じコードは、1 つの画像または同じ画像の複数のコピーに対して機能します。

エラーメッセージの意味がわかりません。また、複数の画像でこれを機能させる方法を誰かが教えてくれれば、非常に役に立ちます

divの画像を取得するために使用html2canvasしています。コンテンツは同じページ、同じドメインからのものですが、アラビア文字が切断されていることを示しています.html2canvasはアラビア語をサポートしていないようです.

ウェブページで入手可能な詳細を読んでいる間、有用な情報は見つかりませんでした.

使用した簡単なコードは次のとおりです。

どんな手掛かり？

html2canvasに変換するために使用しdivていますimage/png。選択したテキストがある場合は正常に機能しますが、divその中に画像があります。そのため、ボタンをクリックすると、作成されたbase64画像に画像が表示されませんhtml2canvas。

私のコードはこのようなものです;

これは私のスクリプトです：

これは私の体です：

キャンバスを生成し、それを php に渡します。

image.php:

ダウンロード.php:

ダウンロードリンクをクリックすると、画像が生成されます

私は何が欠けていますか？

ここでテストできます: http://toniweb.us/div2img/

有効な HTML 文字列を html2canvas に渡すにはどうすればよいですか?

例えば

http://html2canvas.hertzen.com/screenshots.htmlで行う方法

Html2canvas は非常に優れていますが、文書化が不十分です。

for ループで html2canvas スクリプトを実装しようとすると、少し問題が発生します。

データの配列を使用して要素のグループのスタイルを変更し、コンテナの div をキャンバスとしてキャプチャし、それを画像に変換し、それをドキュメントの本文に追加してから次の処理に進む Javascript 関数を作成しています。配列のインデックス。

問題が発生している部分は、ループの最後にあります。

スクリプトを段階的に実行することで、 for ループの次の反復に進む前にキャンバスがレンダリングされるのを待っていないことがわかりました。これにより、キャプチャしようとしている要素が変化しますが、すべて画像はまったく同じようにレンダリングされます (配列の最終インデックスと同じです)。

キャンバスのレンダリング中にスクリプトを 1 秒間遅らせる方法はありますか? 私は使用してみましたがsetTimeout()、スクリプトを遅らせる他の方法を見つけることができないようですonrendered。コードの一部がどのように機能するのかよくわかりません。

私の説明が不明確な場合は、すぐに適切な例をいくつか用意します。

html2canvas.jsプロジェクトで、要素(本体)をキャンバスに変換してから、キャンバスを画像に変換するために使用しました。私の要素には、クロスドメインから読み込まれる画像が含まれています。Canvas create from element は完全に機能していますが、試してみるとcanvas.toDataURL("image/png");エラーが発生しますSecurityError: The operation is insecure この問題を解決するのを手伝ってください。 canvas.toDataURL("image/png");クロスドメインから画像がロードされない場合、正常に動作しています。

前もって感謝します。