अमेज़न S3 छवि,, एचटीएमएल 5 कैनवास का उपयोग कर सहेजा नहीं जा सकता दूषित कैनवस त्रुटि देता है

Question

खैर परेशानी हो रही कैनवास का उपयोग कर दोनों (Chrome, Firefox और सफारी) में छवि को बचाने के लिए,

जब मैं html5 कैनवास में एक की मेजबानी की छवि को लोड, एक त्रुटि कैनवास में दिखाया गया है (हालांकि केवल Chome नहीं फ़ायरफ़ॉक्स में), छवि अमेज़न S3 सर्वर से है:

Image from origin 'https://xxx.s3.amazonaws.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9015' is therefore not allowed access.

और जब मैं छवि के रूप में कैनवास को बचाने की कोशिश,

Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

खैर हाँ, मैं CORS config,

<?xml version="1.0" encoding="UTF-8"?> 
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> 
    <CORSRule> 
     <AllowedOrigin>*</AllowedOrigin> 
     <AllowedMethod>GET</AllowedMethod> 
     <AllowedHeader>*</AllowedHeader> 
    </CORSRule> 
</CORSConfiguration> 

और

img.crossOrigin = 'something' 

की स्थापना की है और मैं Respond Proxy Js देखा, लेकिन नहीं समझ सकता है कि यह कैसे उपयोग करने के लिए।

मैंने बहुत सी पोस्ट और अन्य संदर्भों को देखा है लेकिन समस्या का समाधान नहीं कर सकते हैं। क्या कोई मुझे कोई समाधान प्रदान कर सकता है।

@Update: अगर मैं लाइन <AllowedOrigin>*</AllowedOrigin> =><AllowedOrigin>http://localhost:9015</AllowedOrigin> बदलने के लिए, समाधान क्रोम कैनवास छवि को बचाने के लिए अनुमति देने के लिए लगता है, लेकिन समस्या अभी भी Firefox और Safari

Answer 1

फ़ायरफ़ॉक्स और IE के लिए अपनी जरूरत में लगातार है जैसे

<img src="https://platform3-preit-image.s3.amazonaws.com/components/fireside2.png" crossOrigin="anonymous" class="draggable-image" /> 

क्रोम में यह crossOrigin बिना रहने की जरूरत है। यदि आप क्रोम में crossOrigin विशेषता शामिल करते हैं तो यह असफल हो जाएगा।

<img src="https://platform3-preit-image.s3.amazonaws.com/components/fireside2.png" class="draggable-image" /> 

तो मूल रूप से आपको ब्राउज़र पर दो अलग-अलग HTML आउटपुट बेस प्रस्तुत करने की आवश्यकता है।