フロントエンドマップスクリーンショットスキーム

スクリーンショットは従来、クライアントの特許であり、ブラウザ側にはどうしようもない.
でも、canvasが出てきてから、違います.
HTML 5のcanvasの方法では、toDataURL()はcanvasの内容を画像として保存することができる.
canvasピクチャを簡単に保存するコードは以下の通りです.

function convertCanvasToImage(canvas) {
    var image = new Image();
    image.src = canvas.toDataURL("image/png");
    return image;
}

通常のcanvasスクリーンショットでは問題ありません.DOMツリー全体でもcanvasに変換してからスクリーンショットに変換できます.業界には成熟した類似のクラスライブラリhtml 2 canvasがあります.
に質問
仕事の中で、地図のスクリーンショットを必要として、多くの問題に出会って、長い間振り回して、ここで記録します.
原図:
最後のスクリーンショットコード:
JS Bin on jsbin.com
問題のドメイン間
スクリーンショットに失敗しました.ブラウザのヒント:

`Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.`

ドメイン間で問題が発生するのはなぜですか?よく考えてみると、地図にはいくつかの画像があり、地図サービス業者のサーバーに保存されており、toDataURLのときに画像データが取れず、ドメインをまたいで考えることができます.
解決策は,一時的にドメイン間ピクチャを取得せず,直接try catchを削除する.一時的にスクリーンショットでき、表示される効果:
問題2フィレットブラー
上の図のように、円形の真ん中にフォークが1つ増えているので、原因はしばらく分かりませんが、解決策はカット前にフィレットを除去することです.
問題3画像は表示されません
実は問題が残る問題で、スクリーンショットの左下に、高徳の画像が表示されていません.問題の解決方法は迂回していますが、問題は解決しなければなりません.
サーバ側では、ドメイン間では存在しません.したがって、問題3の解決策として、ローカルにエージェントサーバを構築し、エージェントは画像を取得し、setHeader('Access-Control-Allow-Headers', '*’);を設定してローカルブラウザに使用することができます.
プロキシサーバーコード:
JS Bin on jsbin.com
サーバを介してドメインにまたがり、すべてのアクセスピクチャを許可することで、ドメインにまたがることができます.
問題4地理名は表示されません
上の図を見ると、地図の断面図にはすべての地理的位置名がありません.logを開くと、問題はドメイン間で発生していることがわかります.地図のすべての地理的位置名も画像によって実現され、画像は地図サービス業者のサーバに存在し、canvasでレンダリングされ、問題3の単純な画像とは異なる.
この問題を解決するには、地図サーバが「Access-Control-Allow-Headers:*」に設定する必要があります.会社関係を通じて、高徳製品マネージャー、開発に連絡したところ、これを設置できないと答え、安全上の考慮にあった.そこで、この問題は解けなかった.
最終効果:
オリジナルの文章、転載を歓迎します.転載は明記してください:Fs 21's Homeから転載して、ありがとうございます!原文リンクアドレス:フロントエンドマップスクリーンショット方式