1

Blur.js (http://blurjs.com/) を使用して、Rails アプリ内で画像をぼかしています。最近、ファイルシステムではなく、Amazon S3 にイメージを保存するようになりました。ここで、blur.js が画像をぼかしようとすると、Chrome コンソールに次のエラーが表示されます。

Unable to get image data from canvas because the canvas has been tainted by cross-origin data.
Uncaught Error: unable to access image data: Error: unable to access local image data: ReferenceError: netscape is not defined
4

2 に答える 2

2

blur.js にバグがあります。イメージをキャンバスに描画し、キャンバスからイメージのバイナリ データを取得する場合、ソース イメージに CORS 操作を許可する特別な属性があることを確認する必要があります。

blur.js では、

tempImg = new Image();
if(formattedSource.match(/http:\/\/|https:\/\//)){
    tempImg.setAttribute('crossorigin', 'anonymous');
}
于 2013-09-11T08:24:50.800 に答える
0

Javascript で操作したい画像を含む S3 バケットに対してCORSを有効にする必要があります。上記のドキュメントから

Cross-Origin Resource Sharing (CORS) は、あるドメインにロードされたクライアント Web アプリケーションが別のドメインのリソースと対話する方法を定義します。Amazon S3 での CORS サポートにより、Amazon S3 を使用してリッチなクライアント側 Web アプリケーションを構築し、Amazon S3 リソースへのクロスオリジン アクセスを選択的に許可できます。

S3 バケットとドメイン (Blur.js が使用されている場所) の間でリソース共有を設定することにより、質問に記載されている警告/エラーは解消されます。

于 2012-12-06T02:30:43.580 に答える