Tôi đang cố tải hình ảnh vào phần tử canvas và sau đó kéo dữ liệu ra trongDataURL().tất cả các trình duyệt của tôi không gửi tiêu đề gốc
Tôi có trang web của mình đang chạy với Ruby on Rails 2.3
Tôi có hình ảnh phục vụ từ aws s3. Tôi có CORS thiết lập:
<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>
Tôi có một yếu tố canvas:
<canvas id="explain_canvas"></canvas>
Được rồi, vì vậy một số nền. Ban đầu tôi đã cố gắng này với mã như thế này, nơi drawing_image chỉ là một url cho hình ảnh.
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);
}
Nhưng điều đó không gửi tiêu đề gốc. Vì vậy, tôi nghĩ rằng tôi muốn thử gọi ajax qua 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);
}
Nhưng vẫn không có may mắn. Tôi có nhầm không? Nên jquery ajax gửi tiêu đề gốc?
tôi nhìn vào tiêu đề yêu cầu và đây là những gì tôi nhận được vào hình ảnh:
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
Và jquery lỗi với điều này:
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
gì là lạ với tôi là các bang jquery nguồn gốc, nhưng nó không có trong tiêu đề yêu cầu.
Câu hỏi về ngăn xếp xếp chồng này here nói rằng anh ấy muốn xóa tiêu đề gốc. Vâng, anh ấy đang thực hiện cùng một loại cuộc gọi với jquery ajax và nhận được nó. Bất kỳ ý tưởng tại sao tôi không?
Nếu tôi tải lại trang, nó sẽ lấy hình ảnh được lưu trong bộ nhớ cache và tải nó tốt (với đầu đề gốc bạn) và gọi tớiDataURL() tốt. Sau khi tôi xóa bộ nhớ cache nó một lần nữa sẽ không làm việc mà tải đầu tiên cho đến khi hình ảnh được lưu trữ.
Tôi bắt đầu tự hỏi nếu Rails đang làm gì đó với nó, nhưng tôi không thấy nó sẽ như thế nào vì đây là một cuộc gọi ajax. Nhưng ai biết được, có ai biết nếu Rails có thể làm được điều này không?
Tôi đã thử điều này trong một số trình duyệt trên các nền tảng khác nhau. Chrome, Firefox, Safari, IE 9 & 10. Trên máy Mac, PC và iPhone của tôi. Không có súc sắc trên bất kỳ người trong số họ.
-Cảm ơn-
Cảm ơn bạn! Tôi đã cố gắng giải quyết vấn đề này bằng cách thêm một thuộc tính 'GET' ẩn bộ nhớ cache vào url một khi tôi biết điều gì đang xảy ra. – user1618143
Phải thêm một cái gì đó cho những người vẫn còn bị mắc kẹt. Câu trả lời của bạn là chính xác, nhưng khi có được tài nguyên được lưu trong bộ nhớ cache, để cùng một hình ảnh lần thứ hai, nó đã xóa tiêu đề gốc. Vì vậy, nếu bạn cần lưu vào bộ nhớ cache một hình ảnh, hãy giữ nó trong javascript và đừng cố yêu cầu lại nó. Tôi đã tìm thấy rằng nỗ lực của tôi là hiệu quả đã ném lỗi trên các mục được lưu trong bộ nhớ cache. –
Ah, người đàn ông! Bạn đã cứu thứ sáu của tôi! Hành vi này khá cồng kềnh. –