[解決済み] canvas.toDataURL() SecurityError

質問

グーグルマップを使っているのですが、このような画像が表示されます。

<img id="staticMap"
        src="http://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap
&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318
&markers=color:red%7Ccolor:red%7Clabel:C%7C40.718217,-73.998284&sensor=false">

保存したいのですが これを発見しました。

function getBase64FromImageUrl(URL) {
    var img = new Image();
    img.src = URL;
    img.onload = function() {

        var canvas = document.createElement("canvas");
        canvas.width = this.width;
        canvas.height = this.height;

        var ctx = canvas.getContext("2d");
        ctx.drawImage(this, 0, 0);

        var dataURL = canvas.toDataURL("image/png");

        alert(dataURL.replace(/^data:image\/(png|jpg);base64,/, ""));

    };
}

しかし、私はこの問題を得る。

Uncaught SecurityError: HTMLCanvasElement' で 'toDataURL' の実行に失敗しました: 汚染されたキャンバスはエクスポートされない可能性があります。

修正方法を検索してみました。ここにサンプルがありました。 CORSの使用方法 が、それでも私はこの2つのコード片を結びつけて動作させることができません。多分私はそれを行うには間違った方法と、それを行うには、より簡単な方法があるのでしょうか？私は私のサーバーにデータを転送することができるように、この写真を保存しようとしています。だから、多分誰かがこのようなことをしたし、どのように作るかを知っている .toDataURL() は私がそれを必要とするように動作する方法を知っていますか？

どのように解決するのですか？

googleがこの画像を正しい Access-Control-Allow-Origin ヘッダを付けて提供しない限り、canvas でその画像を使用することはできません。これは CORS の承認がないためです。これについては はこちら をご覧ください。しかし、本質的には

キャンバスで CORS の承認なしに画像を使用することはできますが、そのようなことをするとキャンバスが汚染されます。 を使用すると、canvas が汚染されます。canvas が汚染されると、次のことができなくなります。 canvas からデータを引き出すことができなくなります。たとえば、次のようなことができなくなります。 たとえば、canvas の toBlob()、toDataURL()、getImageData() メソッドは使用できなくなります。 メソッドは使用できません。使用すると、セキュリティ エラーが発生します。

これにより、ユーザーが画像を使って遠隔の Web サイトから情報を取得する際に、個人情報が漏えいするのを防ぐことができます。 を使用して許可なくリモート Web サイトから情報を取得することにより、個人データが公開されることを防ぎます。

サーバーサイドの言語にURLを渡して、画像をダウンロードするためにcurlを使用することをお勧めします。しかし、これをサニタイズするのに注意してください!

EDITです。

この回答はまだ受け入れられている回答なので、以下を確認してください。 shadyshrif さんの回答 を使用することです。

var img = new Image();
img.setAttribute('crossOrigin', 'anonymous');
img.src = url;

これは だけです。 は正しい権限を持っている場合にのみ動作しますが、少なくともあなたが望むことを可能にします。