Я пытаюсь загрузить изображение в элемент 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 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);
}
Но это не было отправкой заголовка источника. Поэтому я решил попробовать ajax через jquery
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, ПК и iPhone. Никаких кубиков ни на одном из них.
-Спасибо -