21

イメージをキャンバス要素にロードし、後で toDataURL() でデータを取得しようとしています。

Ruby on Rails 2.3 でサイトを実行しています

aws s3 から画像を提供しています。私はcorsをセットアップしました：

<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
  <CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
  </CORSRule>
</CORSConfiguration>

キャンバス要素があります:

<canvas id="explain_canvas"></canvas>

では、背景をいくつか。私はもともとこのようなコードでこれを試していましたが、drawing_image は画像への単なる URL です。

var outlineImage = new Image();
outlineImage.crossOrigin = '';
outlineImage.src = drawing_image;
outlineImage.onload = function() {
  var canvas = document.getElementById('explain_canvas');
  var context = canvas.getContext("2d");
  context.drawImage(outlineImage, 10, 10, 600, 150);
}

しかし、それは発信元ヘッダーを送信していませんでした。だから私はjquery経由でajax呼び出しをしようと思った

var outlineImage = new Image();
$(outlineImage).attr('crossOrigin', '');
$.ajax({
    type: 'get',
    url : drawing_image,
    contentType: 'image/png',
    crossDomain: 'true',
    success: function() {
        $(outlineImage).attr("src", drawing_image);
    },
    error: function() {
        console.log('ah crap');
    }
});

outlineImage.onload = function() {
 var canvas = document.getElementById('explain_canvas');
 var context = canvas.getContext("2d");

 context.drawImage(outlineImage, 10, 10, 600, 150);
}

しかし、まだ運がありません。私は間違っていますか？そのjquery ajaxはオリジンヘッダーを送信する必要がありますか?

リクエストヘッダーを見ると、これが画像に表示されるものです：

Accept:*/*
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Host:em2-images.s3.amazonaws.com
Referer:http://localhost:3000/courses/18/quizzes/22/take
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_5) AppleWebKit/537.11 (KHTML, like Gecko) Chrome/23.0.1271.101 Safari/537.11

そして、これでjqueryエラー：

XMLHttpRequest cannot load http://em2-images.s3.amazonaws.com/EM2_LF_A_5_item6.png. Origin http://localhost:3000 is not allowed by Access-Control-Allow-Origin.
ah crap

私にとって奇妙なのは、jquery が発信元を示しているにもかかわらず、リクエスト ヘッダーに含まれていないことです。

このスタックオーバーフローの質問は、元のヘッダーを削除したいと述べています。まあ、彼は私がjquery ajaxで行っているのと同じ種類の呼び出しを行っており、それを取得しています。私がそうでない理由はありますか？

ページをリロードすると、キャッシュされた画像が取得されて正常にロードされ (origin ヘッダーが気になります)、toDataURL() が正常に呼び出されます。キャッシュをクリアした後、画像がキャッシュされるまで、最初のロードは再び機能しません。

Rails が何かをしているのではないかと思い始めましたが、これは ajax 呼び出しであるため、どうなるかわかりません。しかし、Rails がこれを実行できるかどうかは誰にもわかりません。

さまざまなプラットフォームのいくつかのブラウザーでこれを試しました。Chrome、Firefox、Safari、IE 9 & 10。私の Mac、PC、iPhone で。それらのいずれにもサイコロはありません。

-ありがとう-

4

2 に答える 2

32

多くの頭脳を壊した後、私は私のブラウザがオリジンヘッダーを送信しない理由を理解しました。

最初に少し背景。これはLMS用であり、クイズの一部です。教師がクイズを作成するとき、生徒が絵で答えを説明できるように、質問のテキストと画像を絵のキャンバスに追加します。

ご想像のとおり、その画像が最初に読み込まれます。それは学生のビューから隠されており、私はその画像からsrc urlを取得し、javascriptを使用してそれをcanvas要素に入れようとします。

それに関する問題は、画像が初めてロードされるときに、crossorigin属性がロードされないことです。したがって、オリジンヘッダーはありません。そして、canvas要素が画像を読み込もうとするときまでに、originヘッダーがない状態で画像がキャッシュされます。そして、corsを実行しようとすると、barfsになります。多分これはすべてのブラウザが修正する必要があるバグであるように私には思えます。しかし、おそらくそうではありません。

したがって、一言で言えば、corsを実行するときは、画像の最初のロードがクロスオリジン属性を使用して、オリジンヘッダーが含まれていることを確認してください。私の間に...

うん、リファクタリングの時間...

于 2013-01-09T15:12:13.697 に答える
3

この CORS エラーが発生しましたが、サーバー側でオリジン ヘッダーが送信されていませんでした。

私にとっての問題はcrossOrigin = Anonymous、イメージタグを設定したことでした。それを削除すると問題が解決し、CORSエラーはなくなりました。

于 2016-12-22T03:24:25.100 に答える