我的所有浏览器都没有发送原始标题

Question

我正在尝试将图像加载到canvas元素中,然后将数据拉出到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元素:

<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声明了原点,但它不在请求标题中.

这个stackoverflow问题在这里说他想要删除原始标题.好吧,他正在和jquery ajax做同样的调用并得到它.任何想法为什么我不是？

如果我重新加载页面,它会抓取缓存的图像并加载它(原始标题让你注意)并调用toDataURL()就好了.在我清除缓存之后,在缓存图像之前,它将再次无法工作.

我开始想知道Rails是否正在做些什么,但我不知道它会如何,因为这是一个ajax调用.但谁知道,有人知道Rails是否可以做到这一点？

我在不同平台上的几个浏览器中试过这个.Chrome,Firefox,Safari,IE 9和10.在我的Mac,PC和iPhone上.任何一个都没有骰子.

-谢谢-

Answer 1

经过多次大脑粉碎,我已经弄明白为什么我的浏览器没有发送原始标题.

首先是一点背景.这是一个LMS,是测验的一部分.当教师编写测验时,他们会将问题文本和图像添加到绘图画布中,供学生用绘图解释他们的答案.

你可以猜到,该图像首先被加载.它隐藏在学生视图中,我从该图像中获取src url并尝试使用javascript将其放入canvas元素中.

那么问题是第一次加载图像时,它没有加载crossorigin属性.因此没有原始标题.当canvas元素尝试加载图像时,它会被缓存,而不会有原始标题.当它试图让cors去吧barfs.在我看来,这可能是所有浏览器都需要修复的错误.但也许不是.

所以在坚果壳中,当做cors时,确保图像的第一次加载具有crossorigin属性以包含原始头.我...

是的,重构的时间......