मैं एक छवि को कैनवास तत्व में लोड करने की कोशिश कर रहा हूं और बाद में डेटा को डेटाडेटा() में खींचता हूं।मेरे सभी ब्राउज़र मूल शीर्षलेख नहीं भेज रहे हैं
मैं मैं एडब्ल्यूएस S3 से की सेवा मेरी छवियों ऑन रेल्स 2.3
मेरी साइट रूबी के साथ चल रहा है।
<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>
ठीक है, तो कुछ पृष्ठभूमि मैं सेटअप CORS है। मैं मूल रूप से इस तरह के कोड के साथ कोशिश कर रहा था जहां drawing_image छवि के लिए सिर्फ एक यूआरएल है।
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
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 राज्यों है मूल, फिर भी यह अनुरोध हेडर में नहीं है।
यह स्टैक ओवरफ्लो प्रश्न here कहता है कि वह मूल शीर्षलेख को हटाना चाहता है। वैसे वह एक ही तरह का कॉल कर रहा है, मैं jquery AJAX के साथ हूं और इसे प्राप्त कर रहा हूं। कोई विचार क्यों मैं नहीं हूँ?
यदि मैं पृष्ठ को फिर से लोड करता हूं, तो यह कैश की गई छवि को पकड़ता है और इसे ठीक करता है (मूल हेडर दिमाग के साथ) और DataURL() को ठीक कहता है। कैश साफ़ करने के बाद यह फिर से उस लोड को तब तक काम नहीं करेगा जब तक कि छवि कैश न हो जाए।
मैंने यह सोचना शुरू कर दिया कि क्या रेल कुछ कर रहा था, लेकिन मुझे नहीं पता कि यह एक अजाक्स कॉल के बाद से कैसे होगा। लेकिन कौन जानता है, किसी को पता है कि रेल यह कर सकता है या नहीं?
मैंने विभिन्न प्लेटफ़ॉर्म पर कई ब्राउज़रों में इसे आजमाया है। क्रोम, फ़ायरफ़ॉक्स, सफारी, आईई 9 & 10. मेरे मैक, पीसी और आईफोन पर। उनमें से किसी पर कोई पासा नहीं।
-Thanks-
धन्यवाद! एक बार जब मुझे पता चला कि क्या हो रहा था, तो मैं यूआरएल में थोड़ी सी कैश-बस्टिंग 'जीईटी' विशेषता जोड़कर इस पर काम करने में कामयाब रहा। – user1618143
अभी भी अटक गए लोगों के लिए कुछ जोड़ना चाहिए। आपका उत्तर सही है, लेकिन कैश किए गए संसाधनों को प्राप्त करते समय, उसी छवि को दूसरी बार, यह मूल शीर्षलेख को हटा देता है। इसलिए यदि आपको किसी छवि को कैश करने की आवश्यकता है, तो इसे जावास्क्रिप्ट में संग्रहीत रखें और फिर से अनुरोध करने का प्रयास न करें। मुझे लगता था कि कुशल होने का मेरा प्रयास कैश किए गए सामानों पर त्रुटियों को फेंक रहा था। –
आह, आदमी! आपने मेरा शुक्रवार बचा लिया! यह व्यवहार काफी बोझिल है। –