canvas.toDataURL（）がセキュリティ例外をスローするのはなぜですか？

十分な睡眠が取れなかったのですか？この次のコード

var frame=document.getElementById("viewer");
frame.width=100;
frame.height=100;

var ctx=frame.getContext("2d");
var img=new Image();
img.src="http://www.ansearch.com/images/interface/item/small/image.png"

img.onload=function() {
    // draw image
    ctx.drawImage(img, 0, 0)

    // Here's where the error happens:
    window.open(frame.toDataURL("image/png"));
}

このエラーをスローしています：

SECURITY_ERR: DOM Exception 18

これがうまくいかないはずはありません！誰かがこれを説明できますか？

ではスペックは言います：

origin-cleanフラグがfalseに設定されているキャンバス要素のtoDataURL（）メソッドが呼び出されるときは常に、このメソッドはSECURITY_ERR例外を発生させる必要があります。

画像が別のサーバーからのものである場合、toDataURL（）を使用することはできないと思います

画像オブジェクトにクロスオリジン属性を設定するとうまくいきました（私はfabricjsを使用していました）

    var c = document.createElement("img");
    c.onload=function(){
        // add the image to canvas or whatnot
        c=c.onload=null
    };
    c.setAttribute('crossOrigin','anonymous');
    c.src='http://google.com/cat.png';

fabricjsを使用している場合は、Image.fromUrlにパッチを適用する方法を以下に示します

// patch fabric for cross domain image jazz
fabric.Image.fromURL=function(d,f,e){
    var c=fabric.document.createElement("img");
    c.onload=function(){
        if(f){f(new fabric.Image(c,e))}
        c=c.onload=null
    };
    c.setAttribute('crossOrigin','anonymous');
    c.src=d;
};

イメージがAccess-Control-Allow-OriginまたはAccess-Control-Allow-Credentialsのいずれかを設定するホストでホストされている場合は、クロスオリジンリソースシェアリング（CORS）を使用できます。詳細については、ここ（crossorigin属性）を参照してください。

もう1つのオプションは、サーバーが画像をフェッチして提供するエンドポイントを持つことです。（例：http：// your_host / endpoint？url = URL）そのアプローチの欠点は、待ち時間と理論的には不要なフェッチであることです。

他に解決策がある場合は、それらについて聞いてみたいと思います。

画像ホスティングが画像リソースとブラウザーに次のHTTPヘッダーを提供できる場合にCORSをサポートする場合、それを防ぐ方法があるようです。

access-control-allow-origin：*
access-control-allow-credentials：true

ここに記載されています：http : //www.w3.org/TR/cors/#use-cases

最後に私は解決策を見つけました。funcのcrossOrigin3番目のパラメーターとしてasを追加するだけですfromURL

fabric.Image.fromURL(imageUrl, function (image) {
            //your logic
    }, { crossOrigin: "Anonymous" });

私は同じ問題を抱えていて、すべての画像が同じドメインでホストされています...したがって、誰かが同じ問題を抱えている場合は、ここで私が解決した方法です：

私には2つのボタンがありました。1つはキャンバスを生成するボタンで、もう1つはキャンバスから画像を生成するボタンです。最初のボタンにすべてのコードを書き込んだとき、それは私のためだけに機能し、なぜかわかりません。クリックすると、キャンバスと画像が同時に生成されます...

コードが異なる関数にある場合、私は常にこのセキュリティ問題を抱えています... = /

私はこれを使用してそれを機能させることができました：

.htaccessソースサーバーの最初の行にこれを書いてください

Header add Access-Control-Allow-Origin "*"

次に、<img>要素を作成するときに、次のようにします。

// jQuery
var img = $('<img src="http://your_server/img.png" crossOrigin="anonymous">')[0]

// or pure
var img = document.createElement('img');
img.src='http://your_server/img.png';
img.setAttribute('crossOrigin','anonymous');

IDにスペースを入れることはできません

更新

私の推測では、画像はスクリプトを実行しているサーバーとは異なるサーバー上にあります。自分のページで実行したときにエラーを再現することができましたが、同じドメインでホストされている画像を使用した瞬間、問題なく動作しました。だからそれはセキュリティ関連です-あなたのサイトに画像を置いてください。これが事実である理由を誰かが知っていますか？

キャンバスにいくつかの画像を単に描画する場合は、同じドメインから画像を読み込んでいることを確認してください。

www.example.comはexample.comとは異なります

したがって、画像とアドレスバーにあるURLが同じであるか、wwwかどうかを確認してください。

私はfabric.jsを使用しており、toDataURLの代わりにtoDatalessJSONを使用してこれを解決できます。

canvas.toDatalessJSON({ format: 'jpeg' }).objects[0].src

編集：気にしない。これにより、背景画像のみがJPGにエクスポートされ、上部に描画されないため、結局完全に有用ではありませんでした。