15

私は pixie.strd6.com でサイトを運営しており、画像は images.pixie.strd6.com の CNAME で Amazon S3 を介してホストされています。

これらの画像を HTML5 キャンバスに描画して getImageData メソッドを呼び出せるようにしたいのですが、スローされますError: SECURITY_ERR: DOM Exception 18

を設定してみwindow.domain = "pixie.strd6.com"ましたが、効果がありません。

さらに、$.get("http://dev.pixie.strd6.com/sprites/8516/thumb.png?1293830982", function(data) {console.log(data)})エラーもスローします。XMLHttpRequest cannot load http://dev.pixie.strd6.com/sprites/8516/thumb.png?1293830982. Origin http://pixie.strd6.com is not allowed by Access-Control-Allow-Origin.

理想的には、HTML5 キャンバスはサブドメインからの呼び出しをブロックしませんgetImageData。S3 で Access-Control-Allow-Origin ヘッダーを設定することを検討しましたが、成功していません。

どんな助けや回避策も大歓迎です。

4

9 に答える 9

6

Amazon は最近、CORS のサポートを発表しました

Amazon S3 での Cross-Origin Resource Sharing (CORS) のサポートを発表できることを嬉しく思います。JavaScript と HTML5 を使用して Amazon S3 のリソースとやり取りするウェブ アプリケーションを簡単に構築できるようになりました。これにより、Amazon S3 への HTML5 ドラッグ アンド ドロップ アップロードの実装、アップロードの進行状況の表示、またはコンテンツの更新が可能になります。これまで、これらの機能をサポートするには、ウェブ アプリケーションと Amazon S3 の間でカスタム プロキシ サーバーを実行する必要がありました。

CORS を有効にする方法

クロスオリジン リクエストを許可するようにバケットを設定するには、CORS 設定、バケットへのアクセスを許可するオリジンを識別するルールを含む XML ドキュメント、各オリジンでサポートされる操作 (HTTP メソッド)、およびその他の操作を作成します。 -特定の情報。構成には最大 100 個のルールを追加できます。XML ドキュメントを cors サブリソースとしてバケットに追加します。

于 2012-11-02T17:30:39.857 に答える
4

考えられる解決策の 1 つは、nginx を使用してプロキシとして機能させることです。http://pixie.strd6.com/s3/にアクセスする URL を S3 にパススルーするように設定する方法を次に示しますが、ブラウザはそれが非クロス ドメインであると認識できます。

location /s3/ {
  proxy_pass http://images.pixie.strd6.com/;
}
于 2011-02-05T09:04:48.600 に答える
3

PHPを使用している場合は、次のようなことができます。

    function fileExists($path){
        return (@fopen($path,"r")==true);
    }
    $ext = explode('.','https://cgdev-originals.s3.amazonaws.com/fp9emn.jpg');
    if(fileExists('https://cgdev-originals.s3.amazonaws.com/fp9emn.jpg')){
        $contents = file_get_contents('https://cgdev-originals.s3.amazonaws.com/fp9emn.jpg');
        header('Content-type: image/'.end($ext));
        echo $contents;
    }

そして、そのphpファイルを使用して画像にアクセスします。たとえば、ファイルがgenerateImage.phpと呼ばれる場合は<img src="http://GENERATEPHPLOCATION/generateImage.php"/>、外部画像のURLをファイルのgetパラメーターにすることができます。

于 2012-06-27T19:53:15.940 に答える
2

これまで、Amazon S3 では access-control-allow-origin および access-control-allow-credentials HTTP ヘッダーの変更または追加が許可されていなかったため、Rackspace Cloud Files などの別のサービスに切り替えたほうがよい場合があります。する他のサービス。

次のように HTTP ヘッダーを追加または変更します。

access-control-allow-origin: [your site]
access-control-allow-credentials: true

詳細については、 http://www.w3.org/TR/cors/#use-casesを参照してください。

HTTP ヘッダーを変更できるサービスを使用すると、同じオリジンの問題が完全に解決されます。

于 2012-02-15T04:54:04.577 に答える
2

S3 バケットのアクセス許可を編集するには:

1) AWS マネジメント コンソールにサインインし、 https://console.aws.amazon.com/s3/で Amazon S3 コンソールを開きます。

2) [バケット] リストで、プロパティを表示するバケットを開き、[CORS 構成を追加] をクリックします。

アマゾンスクリーンショット

3) タグの間に追加したいルールを書きます<CORSConfiguration>

<CORSConfiguration>
  <CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
  </CORSRule>
</CORSConfiguration>

ルールの詳細については、http: //docs.aws.amazon.com/AmazonS3/latest/dev/cors.htmlをご覧ください。

4) キャンバスで使用する画像に crossorigin='anonymous' を指定します

于 2013-11-12T20:13:38.297 に答える
2

S3 を使用しない場合は、画像ファイルをエンコードして JSON オブジェクトにラップする画像プロキシを構築してみてください。

次に、クロスドメインをサポートする JSONP を使用して JSON オブジェクトをフェッチし、画像データを img.src に割り当てます。

Google App Engine でイメージ プロキシ サーバーのサンプル コードを作成しました。 https://github.com/flyakite/gae-image-proxy

JSON オブジェクトは次のような形式で返されます

{ 
  'height': 50, 
  'width' : 50, 
  'data'  : 'data:image/jpeg;base64,QWRarjgk4546asd...QWAsdf'
}

「data」はbase64形式の画像データです。画像に割り当てます。

img.src = result.data;

キャンバスの画像が「きれい」になりました。

于 2013-03-27T12:14:04.757 に答える
2

$.getImageData最近、マックス・ノバコビッチのに出くわしました。このページには、Flickr の写真を取得して操作するためのいくつかの優れたデモと、いくつかのコード例が含まれています。

任意のサイトから JavaScript で操作可能な形式の画像を取得できます。ページにスクリプトを追加することで機能します。次に、スクリプトは Google App Engine サーバーから画像をリクエストします。サーバーはリクエストされた画像を取得し、base64 に変換してスクリプトに渡します。スクリプトが base64 を受け取ると、そのデータをコールバックに渡します。これにより、データがキャンバスに描画され、いじり始めることができます。

于 2011-03-07T04:58:53.253 に答える
1

この動作は仕様です。HTML5 仕様によると、クロスオリジンの画像をキャンバスに描画するとすぐに汚れてしまい、ピクセルを読み取ることができなくなります。オリジン マッチングでは、スキーム、完全修飾ホスト、および IE 以外のブラウザではポートが比較されます。

于 2011-01-12T18:46:12.647 に答える
1

同じ問題にぶつかっただけです。役立つかもしれないCORSについて知りました。

http://html5-demos.appspot.com/static/html5-whats-new/template/index.html#14

Flickr の画像を操作しようとしているので、うまくいきませんでした。だから、私はまだ解決策を探しています。

于 2011-12-12T15:17:24.433 に答える