1

別のドメインから画像をロードし、それをキャンバスに配置し、他の情報をオーバーレイして最終画像を生成する HTML キャンバス (KineticJS を使用しますが、キャンバス愛好家は引き続き参加する必要があります) があります。canvas.toDataURL() を使用してファイルを出力しようとすると、明らかにクロスドメインの制限により、「The operation is insecure.」というメッセージが表示されます。

このエラーを回避する方法を誰かが知っているかどうか疑問に思っていました (できればクロスブラウザー互換性があります)。解決策は、スクリーンショットのような別のキャンバスにキャンバスをコピーすることだと思っていましたが、すべてのキャンバス プロパティを一緒にコピーすると思うので、エラーを回避する方法が見つかりません。それ。

誰にもアイデアはありますか？

4

1 に答える 1

2

画像が管理していないドメインからのものである場合、CORS の制限に悩まされています。

独自のサーバーの構成にアクセスできる場合は、この見出しを設定してクロスオリジン共有を有効にすることができます (これを行うときは、サーバー セキュリティの詳細を参照してください)。

Access-Control-Allow-Origin: <origin> | *

または、www.dropbox.com などの CORS 対応サイトで画像をホストする場合、次のようなセキュリティ エラーなしで画像を取得できます。

var image1=new Image();
image1.onload=function(){
    context.drawImage(image1,0,0);
}
image1.crossOrigin="anonymous";
image1.src="https://dl.dropboxusercontent.com/u/99999999/yourCORSenabledPic.jpg";
于 2013-07-21T15:50:16.317 に答える