Html2canvas: 画像タグがキャプチャされていません

それ自体が非同期である画像のプリロードが欠落しているため、コールバックでラップする必要があります。 おそらく古いバージョンも使用しているので、 https：//github.com/niklasvh/html2canvas/downloadsから最新バージョンを入手して、次のコマンドでテストすることをお勧めし

html2canvas( $('table'), {
   onrendered: function( canvas ) {
        var img = canvas.toDataURL();
        $('#calendar_to_canvas').attr('src', img);
   }
});

迅速な対応に感謝します。最新バージョンをダウンロードして上記のコードを試しましたが、レンダリングされたキャンバスに画像タグが表示されません。 何かが足りないので、html2canvas.js、jquery.plugin.html2canvasを追加し、jquery1.7を使用しました。 あなたの助けは大歓迎です。

画像は、レンダリングしているページと同じオリジンでホストされていますか？

logging: trueを設定し、コンソールが画像について何を言っているかを確認します。失敗していますか？

画像は完全に読み込まれています。以下のログをご覧ください。

html2canvas：プリロードが開始されます：背景画像の検索html2canvas.js：27
html2canvas：開始：画像：1/1（失敗：0）html2canvas.js：27
html2canvas：開始：画像：2/2（失敗：0）html2canvas.js：27
html2canvas：開始：画像：3/3（失敗：0）html2canvas.js：27
html2canvas：開始：画像：4/4（失敗：0）html2canvas.js：27
html2canvas：開始：画像：5/5（失敗：0）html2canvas.js：27
html2canvas：開始：画像：6/6（失敗：0）html2canvas.js：27
html2canvas：開始：画像：7/7（失敗：0）html2canvas.js：27
html2canvas：プリロード：画像の検索html2canvas.js：27
html2canvas：プリロード：完了。 html2canvas.js：27
html2canvas：開始：画像：8/18（失敗：0）html2canvas.js：27
html2canvas：開始：画像：9/18（失敗：0）html2canvas.js：27
html2canvas：開始：画像：10/18（失敗：0）html2canvas.js：27
html2canvas：開始：画像：11/18（失敗：0）html2canvas.js：27
html2canvas：開始：画像：12/18（失敗：0）html2canvas.js：27
html2canvas：開始：画像：13/18（失敗：0）html2canvas.js：27
html2canvas：開始：画像：14/18（失敗：0）html2canvas.js：27
html2canvas：開始：画像：15/18（失敗：0）html2canvas.js：27
html2canvas：開始：画像：16/18（失敗：0）html2canvas.js：27
html2canvas：開始：画像：17/18（失敗：0）html2canvas.js：27
html2canvas：開始：画像：18/18（失敗：0）html2canvas.js：27
画像の読み込みが完了しました：＃18（失敗：0）html2canvas.js：27

キャンバスがクロスオリジンデータによって汚染されているため、キャンバスから画像データを取得できません。

html2canvas：レンダラー：Canvasレンダラーが完了しました-canvasobjを返します

javascriptファイルと画像は、前のコメントに加えて同じディレクトリにあります。

こんにちはniklasvh、それは完全に同じ元のポリシーの問題で動作しました、私は以前file：//を使用してローカルで実行されていたwebseverでの実行を解決しましたこれはクロスドメインの問題と見なされます。 私を正しい方向に導いてくれてありがとう。 これは素晴らしいプラグインです:)

Niklashvh file：//を使用してローカルで実行されるAndroidハイブリッドアプリでこれを実行しようとしています。このクロスドメインの問題を解決するためのガイドを教えてください。

画像をどこにもエクスポートする必要がない場合は、いつでもallowTaint: true設定できます

画像をメモリにエクスポートし、PDFとしてメールで送信しています

私は同じ問題を抱えています、ログは次のとおりです：

html2canvas：プリロードが開始されます：html2canvas.jsの背景画像の検索：21
html2canvas：プリロード：画像の検索html2canvas.js：21
html2canvas：プリロード：完了。 html2canvas.js 21
html2canvas：開始：画像：1/2（失敗：0）html2canvas.js：21
html2canvas：開始：画像：2/2（失敗：0）html2canvas.js：21
画像の読み込みが完了しました：＃2（失敗：0）html2canvas.js：21
html2canvas：レンダラー：Canvasレンダラーが完了しました-objキャンバスを返します

画像はbackground-imageにあり、メイン画像divをロードするだけで、囚人は表示されません。

クロスする画像は同じドメインにあるため、問題ありません。

何か案が？

「background-size：cover;」を追加するとスタイルに、画像が表示されません...

どうやらこれが問題です

そしてそれはうまくいきました!!、私だけが「背景サイズ：100％100％;」を入れなければなりません。 「background-size：cover;」の代わりに

imgでオンラインURLを使用すると、 HTML @ Canvasがキャプチャされません。この問題の解決策は何ですか？
ありがとう

@ Elgamal10はプロキシを使用します

https://github.com/brcontainer/html2canvas-php-proxy（phpを使用したhtml2canvasプロキシ）
https://github.com/brcontainer/html2canvas-asp-vbscript-proxy（asp-classic-vbを使用したhtml2canvasプロキシ）
https://github.com/brcontainer/html2canvas-csharp-proxy（asp.netを使用したhtml2canvasプロキシ-csharp）

注：ファイルREADME.mdを読み取ります

お返事ありがとうございます。スクリーン撮影はうまくいきましたが、次のようなエラーがあります。

html2canvas_5が定義されていません
html2canvas_0が定義されていません
html2canvas_5が定義されていません
html2canvas_4が定義されていません
html2canvas_1が定義されていません
html2canvas_5が定義されていません

@ Elgamal10はプロジェクトに問題を作成します
https://github.com/brcontainer/html2canvas-csharp-proxy/issues?state=open

C＃（ASP.NET）を使用していると思いますが、正しいですか？

こんにちはニクラス、

私はあなたのAPIを使い始めました、そしてそれは素晴らしいです..しかし、私は立ち往生しています。あなたが助けてくれませんか。

コードを使用してhtmlをキャンバスに変換しようとしています：
jQuery（ 'html'）。html2canvas（{
プロキシ： " http：//localhost/myproject/proxy.jsp "、
userCORS：true 、
onrendered：function（canvas）{
alert（キャンバス）;
var url = canvas.toDataURL（ "image / png"）;
window.open（url、 '_ blank'）;
}、
}）;

これで、パス〜/ tomcat / myproject / images /にすべてのクロスオリジンイメージを保存するproxy.jspというファイルができました。 "

その後、コンソールにこれが表示されます
スクリプトとして解釈されたが、MIMEタイプimage / jpegで転送されたリソース： " http：//localhost/myproject/proxy.jsp？url = http％3A％2F％2Fi.ebayi …QYEAAMXQVERSuVtL％2F％24_1.JPG％3Fset_id％3D8800004005＆callback = html2canvas_64 "。 html2canvas.js：2264

結局、コールバック関数が実行されず、キャンバスを作成できません。

何ができるの？ 手伝ってもらえますか？

どうもありがとう

@ himakshi89 proxy:とuserCORS:を同時に使用することはできません。

プロキシを使用することをお勧めします。
注：体をキャプチャしてみてください。

コード内にコンマが残っています：

},//this is wrong.

});

html2canvasのどのバージョンですか？

これを試して：

jQuery('body').html2canvas({
    "onrendered": function(canvas) {
    }
});

動作しない場合は、このhttps://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.jsをダウンロードして次のコードを使用してみて

html2canvas($("body").get(0), {
    "logging": true,
    "proxy": "http://localhost/myproject/proxy.jsp",
    "onrendered": function(canvas) {
        alert(canvas);
        var url = canvas.toDataURL("image/png");
        window.open(url, "_blank");
    }
});

@brcontainer
やあ

コードを変更しましたが、proxy.jspからの応答を次のように送信しています。
（{"html2canvas_67"：http：//localhost/myproject/0.1651487380333363.jpg "}）

現在、コンソールにエラーは表示されていません。
しかし、今は何も起こりません。何が起こるべきか、または変更する必要がある場所はありますか？

助けてください

しかし、コンソールは何も表示できないため
2番目のサンプルコードを使用しましたか？ ログをコンソールに送信します。

コードをオンラインでテストする方法を提供してみてください。

提案されているように、useCORSを削除し、htmlをbodyに置き換えました

jQuery（ 'body'）。html2canvas（{
プロキシ： " http://nisquare.dyndns.org：8087 / facebook / proxy.jsp"、
ロギング：true 、
onrendered：function（canvas）{
var url = canvas.toDataURL（ "image / png"）;
window.open（url、 '_ blank'）;
}
}）;

私もこれを受け取っていますこれは私のコンソールです
html2canvas：読み込みエラー ： http： //cmsip.tradus.ibcdn.com/MOBMKXE29ULYUMKH_4902586_320x360.jpg html2canvas.js：21

取得したもののスクリーンショットを添付しました

https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.jsをダウンロードしてみました

そしてこのコード：

html2canvas($("body").get(0), {
    "logging": true,
    "proxy": "http://localhost/myproject/proxy.jsp",
    "onrendered": function(canvas) {
        alert(canvas);
        var url = canvas.toDataURL("image/png");
        window.open(url, "_blank");
    }
});

か否か？

注： http://nisquare.dyndns.org:8087/facebook/proxy.jspは壊れています！

最新バージョンをダウンロードしました

コードを次のように置き換えます

html2canvas（$（ "body"）。get（0）、{
プロキシ： " http://nisquare.dyndns.org：8087 / facebook / proxy.jsp"、
ロギング：true 、
onrendered：function（canvas）{
var url = canvas.toDataURL（ "image / png"）;
window.open（url、 '_ blank'）;
}
}）;

リンクテストを送ってください

私はこれを使用していますクローム拡張機能であり、拡張機能はまだ開発モードです

JSPを使用した「Chrome拡張機能」？

jspはプロキシ部分にのみ使用されています。あなたによると、より好ましいものは何ですか？

Chrome拡張機能は他の「プロトコル」と「フレーム」で実行され、proxy.jspはHTTPプロトコルを使用します。

Chrome拡張機能はプロキシを必要としないと思います。 次のように使用します。

html2canvas($("body").get(0), {
    "logging": true,
    "onrendered": function(canvas) {
        alert(canvas);
        var url = canvas.toDataURL("image/png");
        window.open(url, "_blank");
    }
});

読む： http ： //developer.chrome.com/extensions/tut_debugging.html

@brcontainer
アイデアに感謝します。現在、chrome自体が提供するAPIを使用しています。 それは非常に簡単に解決または問題を解決する関数chromecapturevisibletabを持っています:)

@ jgab-netありがとうございます。 エラーを検索する時間が長すぎます

@ Sumit8 （Y）どういたしまして

@gitbala問題は解決しましたか？ @niklasvhこの問題を

@usmonsterは必ず続行し、未解決の問題をすべて確認する時間を節約します:)

はい、解決しました:)

4:11で月、2014年9月1日には、usmonster [email protected]は書きました：

@gitbala https://github.com/gitbala問題は解決しましたか？ @niklasvh
https://github.com/niklasvhこの問題を解決できますか？ （私はで停止します
バグトリアージはこれが迷惑です.. :)

—
このメールに直接返信するか、GitHubで表示してください
https://github.com/niklasvh/html2canvas/issues/145#issuecomment -54047596
。

html2canvasを使用しています-ローカル画像がPDFでレンダリングされていません。 これに対する解決策は何ですか？

@niklasvh plshelp -htmlのロゴ画像がpdfでレンダリングされていません

インラインimage.howの使用方法 "proxy"の変換に失敗しました： " http：//localhost/myproject/proxy.jsp "、vueを使用します。このjspを配置する場所ですが、

同じ問題を抱えている@qiuyaofanは解決策を得ましたか？ 私はangular2でそれを使用していて、他のサーバーから画像を取得しています。 @gitbala解決策はありましたか？

+1ところで、ログは良好に見えますが（ html2canvas: Images loaded, starting parsing ）、PDFに画像が表示されません。

私は使用しています

allowTaint：true、
useCORS：true、
taintTest：false、

@NikhilRadadiya @qiuyaofanみんな、クライアントサイドのソリューションも探していました。 vue jsを使用し、giphyから画像を取得します。 だからここに私のためにうまくいったものがあります：

html2canvas(element, {
        "logging": true, //Enable log (use Web Console for get Errors and Warings)
        useCORS: true,
        taintTest: false,
        onrendered: function(canvas) {
          var img = new Image();
          img.onload = function() {
            document.body.appendChild(img);
          };
          img.error = function() {
            if(window.console.log) {
              window.console.log("Not loaded image from canvas.toDataURL");
            } else {
              alert("Not loaded image from canvas.toDataURL");
            }
          };
          img.src = canvas.toDataURL("image/png");
        }
      });

したがって、プロキシは使用されませんでした。

@creepteedキャンバスに変換してpdfに保存する必要がある他の要素があります。私のhtmlには画像だけが含まれていません。その場合、投稿した上記の関数をどのように使用できますか？

こんにちは@niklasvh 、
htmltocanvasを使用してWebページをキャプチャしたいのですが、すべて正常に機能していますが、Webページをキャプチャしようとすると、画像が取得されません。
手伝って頂けますか？
これが私のコードです：
function capture(div_id=null) { jQuery(".screenshot_row_target").html2canvas({ logging: true, //taintTest : true, //proxy: "https://skeleton-21.myshopify.com", onrendered: function (canvas) { jQuery('#screenshot_img_val').val(canvas.toDataURL("image/png")); //document.getElementById("screenshot_html_form").submit(); } }); }

コンソールで、私はこれを取得します
html2canvas: Preload starts: finding background-images html2canvas.js:19 html2canvas: Preload: Finding images html2canvas.js:19 html2canvas: Preload: Done. html2canvas.js:19 html2canvas: start: images: 0 / 0 (failed: 0) html2canvas.js:19 Finished loading images: # 0 (failed: 0) html2canvas.js:19 html2canvas: Error loading <img>://cdn.shopify.com/s/files/1/2186/4293/files/user2_300x300.png?v=1503661428 html2canvas.js:19 html2canvas: Error loading background: html2canvas.js:19 html2canvas: Error loading <img>://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_300x300.gif html2canvas.js:19 html2canvas: Renderer: Canvas renderer done - returning canvas obj
ありがとう。