1

マップのスクリーンショットをキャプチャする方法についてしばらく試してみました。最後に、Html2Canvas を使用して Chrome で作業を開始し、スクリーンショット機能をキャプチャしました。

            $('#map_canvas').html2canvas({                 
               proxy: "server.js",
               useCORS: true,
               onrendered: function (canvas) {
                    //Set hidden field's value to image data (base-64 string)
                    $('#img_val').val(canvas.toDataURL("image/png"));                    
                }
            });

最初はプロキシと useCORS プロパティがありませんでした。問題は、ベース マップのみがキャプチャされ、そこにプロットされているマーカーがキャプチャされないことです。地図上のオーバーレイも同様です。それらもキャプチャされません。どうすればこれを機能させることができますか???? どんな助けでも素晴らしいでしょう!!!

前もって感謝します、

4

1 に答える 1

2

server.jsは、 node.jsを使用するサーバー専用です(クライアント側ではなくサーバー側のテクノロジです)。

useCORS: true動作しませんproxy: "proxy-script-server"。

または、使用useCORS:または使用proxy:

proxyの使用をお勧めします。プロキシを使用する 3 つのスクリプトを作成しました。すべて同じことを行いますが、それぞれ異なるプログラミング言語を使用しています。

プロキシ スクリプト:

ASP.NET (C#) : https://github.com/brcontainer/html2canvas-csharp-proxy

PHP : https://github.com/brcontainer/html2canvas-php-proxy

ASP クラシック (vbscript) : https://github.com/brcontainer/html2canvas-asp-vbscript-proxy

Python (あらゆるフレームワークで動作) : https://github.com/brcontainer/html2canvas-proxy-python

PHP の例:

html2canvas( [ document.body ], {
    "proxy":"html2canvasproxy.php",
    "onrendered": function(canvas) {
        var uridata = canvas.toDataURL("image/png");
        window.open(uridata);
    }
});

注:現在のGoogle Chrome (バージョン 29) では、SVG 画像をCANVASに追加してエクスポートすることはできません。.toDataURL()

于 2013-09-06T22:43:21.157 に答える