javascript - 我的所有浏览器都没有发送原始 header

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);
}

但这并没有发送原始 header 。所以我想我应该尝试通过 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 应该发送原始 header 吗？

我查看请求 header ，这就是我在图像上得到的内容:

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 声明了来源，但它不在请求 header 中。

这个 stackoverflow 问题 here表示他想删除原始 header 。嗯，他正在做与我使用 jquery ajax 相同的调用并得到它。有什么想法为什么我不是？

如果我重新加载页面，它会抓取缓存的图像并加载它(注意原始 header )并调用 toDataURL() 就可以了。清除缓存后，在图像被缓存之前，第一次加载将无法工作。

我开始怀疑 Rails 是否对它做了什么，但我不明白它会如何，因为这是一个 ajax 调用。但谁知道呢，有人知道 Rails 是否可以做到这一点吗？

我已经在不同平台上的多个浏览器中尝试过此操作。 Chrome、Firefox、Safari、IE 9 和 10。在我的 Mac、PC 和 iPhone 上。他们中的任何一个都没有骰子。

-谢谢-

Answer 1

经过一番绞尽脑汁，我明白了为什么我的浏览器不发送原始 header 。

首先介绍一下背景。这是针对 LMS 的，是测验的一部分。当老师编写测验时，他们会将问题文本和图像添加到绘图 Canvas 中，以便学生用绘图解释他们的答案。

正如您所猜测的，该图像首先被加载。它在学生 View 中是隐藏的，我从该图像中获取 src url，并尝试使用 javascript 将其放入 Canvas 元素中。

问题是第一次加载图像时，它没有加载 crossorigin 属性。因此没有原始 header 。当 Canvas 元素尝试加载图像时，它会被缓存，而其中没有原始 header 。当它试图让cors运行时它就会呕吐。在我看来，这也许是所有浏览器都需要修复的错误。但也许不是。

因此，简而言之，在执行 cors 时，请确保图像的第一次加载具有 crossorigin 属性，以包含原始 header 。让我...

是的，是时候重构了......