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问题here表明他想要删除原始标头。好吧，他正在和jquery ajax做同样的调用并得到它。任何想法，为什么我不是？

如果我重新加载页面，它会抓取缓存的图像并加载它（原始标题会介意你）并调用toDataURL（）就好了。清除缓存后，在缓存图像之前，它将再次无法正常加载。

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

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

-Thanks -

Answer 1

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

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

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

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

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

是的，重构的时间......

Answer 2

我收到此CORS错误，并且在服务器端没有发送原始标头。

我的问题是我在我的图片标记中设置了crossOrigin = Anonymous。删除它解决了我的问题，CORS错误消失了。

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

2 个答案: