एचटीएमएल 5 कैनवास getImageData और समान उत्पत्ति नीति

Question

मेरे पास pixie.strd6.com पर चल रही साइट है और छवियों.pixie.strd6.com के लिए एक CNAME के ​​साथ अमेज़ॅन S3 के माध्यम से होस्ट की गई छवियां हैं।

मैं एक HTML5 कैनवास के लिए इन छवियों को आकर्षित और getImageData विधि कॉल करने में सक्षम होना चाहते हैं, लेकिन यह Error: SECURITY_ERR: DOM Exception 18

मैं window.domain = "pixie.strd6.com" स्थापित करने की कोशिश की है फेंकता है, लेकिन यह है कि कोई प्रभाव नहीं है।

साथ ही, $.get("http://dev.pixie.strd6.com/sprites/8516/thumb.png?1293830982", function(data) {console.log(data)}) भी एक त्रुटि फेंकता है: XMLHttpRequest cannot load http://dev.pixie.strd6.com/sprites/8516/thumb.png?1293830982 . Origin http://pixie.strd6.com is not allowed by Access-Control-Allow-Origin.

आदर्श रूप में एचटीएमएल 5 कैनवास उप डोमेन से getImageData बुला ब्लॉक नहीं होगा। मैंने एस 3 में एक्सेस-कंट्रोल-ऑब्जेक्ट-हेडर हेडर सेट करने की कोशिश की है, लेकिन सफल नहीं हुआ है।

कोई भी मदद या कामकाज की सराहना की जाती है।

Answer 1

Amazon recently announced CORS support

We're delighted to announce support for Cross-Origin Resource Sharing (CORS) in Amazon S3. You can now easily build web applications that use JavaScript and HTML5 to interact with resources in Amazon S3, enabling you to implement HTML5 drag and drop uploads to Amazon S3, show upload progress, or update content. Until now, you needed to run a custom proxy server between your web application and Amazon S3 to support these capabilities.

How to enable CORS

0 के लिए एक प्राप्त पैरामीटर हो सकता है

To configure your bucket to allow cross-origin requests, you create a CORS configuration, an XML document with rules that identify the origins that you will allow to access your bucket, the operations (HTTP methods) will support for each origin, and other operation-specific information. You can add up to 100 rules to the configuration. You add the XML document as the cors subresource to the bucket.

Answer 2

यह व्यवहार डिज़ाइन है। एचटीएमएल 5 spec के अनुसार, जैसे ही आप एक कैनवास में क्रॉस-मूल छवि खींचते हैं, यह गंदा है और अब आप पिक्सल नहीं पढ़ सकते हैं। उत्पत्ति-मिलान योजना, पूरी तरह से योग्य मेजबान, और गैर-आईई ब्राउज़र, बंदरगाह की तुलना करता है।

Answer 3

एक संभावित समाधान प्रॉक्सी के रूप में कार्य करने के लिए nginx का उपयोग करना है। यहां S3 तक जाने के लिए http://pixie.strd6.com/s3/ पर जाने वाले यूआरएल को कॉन्फ़िगर करने का तरीका बताया गया है, लेकिन ब्राउज़र अभी भी विश्वास कर सकता है कि यह गैर-क्रॉस डोमेन है।

location /s3/ { 
    proxy_pass http://images.pixie.strd6.com/; 
} 

Answer 4

हाल ही में, मैक्स नोवाकोविच द्वारा $.getImageData पर आया था। पृष्ठ में कुछ कोड उदाहरणों के साथ फ़्लिकर फ़ोटो पर लाने और संचालन के कुछ साफ-सुथरे डेमो शामिल हैं।

यह आपको एक मनमानी साइट से जावास्क्रिप्ट-मैनिपुलेट योग्य रूप में एक छवि लाने की अनुमति देता है। यह पृष्ठ पर एक स्क्रिप्ट संलग्न करके काम करता है। स्क्रिप्ट तब Google ऐप इंजन सर्वर से छवि का अनुरोध करती है। सर्वर अनुरोधित छवि प्राप्त करता है और इसे रिले में बेस 64 में परिवर्तित करता है। जब स्क्रिप्ट को बेस 64 प्राप्त होता है, तो यह डेटा को कॉलबैक में पास करता है, जो इसे कैनवास पर खींच सकता है और इसके साथ गड़बड़ करना शुरू कर सकता है।

Answer 5

बस एक ही समस्या में फंस गया। मुझे सीओआरएस के बारे में पता चला जो सहायक हो सकता है।

http://html5-demos.appspot.com/static/html5-whats-new/template/index.html#14

इसके बाद से मैं फ़्लिकर से एक छवि हेरफेर करने के लिए कोशिश कर रहा हूँ मेरे लिए काम नहीं किया। तो, मैं अभी भी समाधान की तलाश में हूं।

Answer 6

अतीत में अमेज़ॅन एस 3 ने आपको एक्सेस-कंट्रोल-अनुमति-उत्पत्ति और एक्सेस-कंट्रोल-प्रो-क्रेडेंशियल HTTP हेडर को संशोधित या जोड़ने की अनुमति नहीं दी है, इसलिए रैकस्पेस जैसी विभिन्न सेवाओं पर स्विच करना बेहतर हो सकता है क्लाउड फ़ाइलें या कुछ अन्य सेवा जो करता है।

जोड़ने या संशोधित इस तरह HTTP हेडर:

access-control-allow-origin: [your site] 
access-control-allow-credentials: true 

अधिक जानकारी के लिए http://www.w3.org/TR/cors/#use-cases देखें।

एक ऐसी सेवा का उपयोग करना जो आपको HTTP शीर्षकों को संशोधित करने की अनुमति देता है पूरी तरह से वही मूल समस्या हल करता है।

Answer 7

आप PHP का उपयोग कर रहे हैं, तो आप की तरह कुछ कर सकते हैं:

function fileExists($path){ 
     return (@fopen($path,"r")==true); 
    } 
    $ext = explode('.','https://cgdev-originals.s3.amazonaws.com/fp9emn.jpg'); 
    if(fileExists('https://cgdev-originals.s3.amazonaws.com/fp9emn.jpg')){ 
     $contents = file_get_contents('https://cgdev-originals.s3.amazonaws.com/fp9emn.jpg'); 
     header('Content-type: image/'.end($ext)); 
     echo $contents; 
    } 

और, कि php फ़ाइल का उपयोग करता है, तो फ़ाइल generateImage.php कहा जाता है आप <img src="http://GENERATEPHPLOCATION/generateImage.php"/> करते हैं और बाहरी छवि कर सकते हैं की तरह से छवि को एक्सेस यूआरएल फ़ाइल

Answer 8

जो लोग एस 3 का उपयोग नहीं करते हैं, वे छवि छवि को एन्कोड करने और इसे JSON ऑब्जेक्ट में लपेटने के लिए एक छवि प्रॉक्सी बनाने का प्रयास कर सकते हैं।

फिर आप JSONP का उपयोग कर सकते हैं जो JSON ऑब्जेक्ट लाने के लिए क्रॉस डोमेन का समर्थन करता है और छवि डेटा को img.src पर असाइन करता है।

मैंने Google App Engine के साथ छवि प्रॉक्सी सर्वर का नमूना कोड लिखा था। https://github.com/flyakite/gae-image-proxy

इस

{ 
    'height': 50, 
    'width' : 50, 
    'data' : 'data:image/jpeg;base64,QWRarjgk4546asd...QWAsdf' 
} 

'डेटा' की तरह प्रारूप में JSON ऑब्जेक्ट रिटर्न बेस 64 प्रारूप में छवि डेटा है। इसे एक छवि को सौंपें।

img.src = result.data; 

छवि अब आपके कैनवास के लिए "साफ" है।

Answer 9

अपने S3 बाल्टी अनुमतियों को संपादित करने के लिए:

1) एडब्ल्यूएस प्रबंधन कंसोल में प्रवेश करें और https://console.aws.amazon.com/s3/

2) बाल्टी सूची में से अमेज़न S3 कंसोल खोलें, बाल्टी जिसका गुण आप चाहते हैं खोलने देख सकते हैं और क्लिक करने के लिए

3 "CORS विन्यास जोड़ने") नियम आप टैग के बीच में जोड़ने के लिए तैयार हैं लिखें <CORSConfiguration>

<CORSConfiguration> 
    <CORSRule> 
    <AllowedOrigin>*</AllowedOrigin> 
    <AllowedMethod>GET</AllowedMethod> 
    <MaxAgeSeconds>3000</MaxAgeSeconds> 
    <AllowedHeader>*</AllowedHeader> 
    </CORSRule> 
</CORSConfiguration> 

आपको कम से नियमों के बारे में अधिक जान सकते हैं छवि पर = गुमनाम http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html

4) निर्दिष्ट करें crossorigin आप अपने कैनवास में इस्तेमाल करेंगे