web-dev-qa-db-ja.com

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,/, ""));

    };
}

しかし、私はこの問題を取得します：

不明なSecurityError：「HTMLCanvasElement」で「toDataURL」の実行に失敗しました：汚染されたキャンバスはエクスポートできません。

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

javascriptcanvascors
71
user3074343

Googleが正しいAccess-Control-Allow-Originヘッダーでこの画像を提供しない限り、キャンバスで画像を使用することはできません。これは、CORSの承認がないためです。これについてもっと読むことができます here ですが、本質的には次のことを意味します：

キャンバスでCORSの承認なしで画像を使用できますが、そうするとキャンバスが汚染されます。キャンバスが汚染されると、キャンバスからデータを取得することはできなくなります。たとえば、キャンバスのtoBlob（）、toDataURL（）、またはgetImageData（）メソッドは使用できなくなりました。これを行うと、セキュリティエラーがスローされます。

これにより、ユーザーが許可なくリモートWebサイトから情報を引き出すために画像を使用して個人データが公開されるのを防ぎます。

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

編集：

この答えはまだ受け入れられている答えなので、 @ shadyshrif's answer をチェックアウトする必要があります。

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

これはだけが適切な権限を持っている場合に機能しますが、少なくとも必要なことを行うことができます。

92
Prisoner

crossOrigin属性 を使用し、2番目のパラメーターとして'anonymous'を渡すだけです

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

この方法により、アクセスしているサーバーから「Access-Control-Allow-Origin」エラーを取得できなくなります。

var img = new Image();
var timestamp = new Date().getTime();
img.setAttribute('crossOrigin', 'anonymous');
img.src = url + '?' + timestamp;
4
Karuban

以下のコードを試してみてください...

<img crossOrigin="anonymous"
     id="imgpicture" 
     fall-back="images/penang realty,Apartment,house,condominium,terrace house,semi d,detached,
                bungalow,high end luxury properties,landed properties,gated guarded house.png" 
     ng-src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" 
     height="220"
     width="200"
     class="watermark">
3
ct.tan

私の場合、WebBrowserコントロールを使用して（IE 11を強制）、エラーを通過できませんでした。 Chromeを使用するCefSharpに切り替えると解決しました。

0
Brad Mathews