HTML5 Canvas getImageData i ta sama polityka Origin

Question

Mam stronę uruchomioną na pixie.strd6.com i obrazy hostowane przez Amazon S3 z CNAME dla images.pixie.strd6.com.

Chciałabym móc wyciągnąć te obrazy na płótnie HTML5 i wywołać metodę getImageData ale rzuca Error: SECURITY_ERR: DOM Exception 18

Próbowałem ustawienie window.domain = "pixie.strd6.com", ale to nie ma znaczenia.

Dodatkowo $.get("http://dev.pixie.strd6.com/sprites/8516/thumb.png?1293830982", function(data) {console.log(data)}) rzuca również błąd: 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.

Idealnie HTML5 canvas nie będzie blokować powołanie getImageData z subdomen. Przyjrzałem się ustawianiu nagłówka Access-Control-Allow-Origin w S3, ale nie udało się.

Każda pomoc lub obejście są mile widziane.

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

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

To zachowanie jest w toku. Zgodnie ze specyfikacją HTML5, po narysowaniu obrazu krzyżowego na kanwie, jest on brudny i nie można już odczytać pikseli. Dopasowanie do początku porównuje schemat, w pełni kwalifikowany host, a także w przeglądarkach innych niż IE - port.

Answer 3

Jednym z możliwych rozwiązań jest użycie nginx do działania jako proxy. Oto, jak skonfigurować adresy URL, aby przejść do wersji, aby przejść do wersji S3, ale przeglądarka nadal może uważać, że nie jest to domena krzyżowa.

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

Answer 4

Niedawno natrafiłem na $.getImageData, autorstwa Max Novakovic. Strona zawiera kilka zgrabnych prezentacji na temat pobierania i działania na zdjęciach Flickr wraz z przykładami kodu.

Umożliwia pobranie obrazu w formie kodu JavaScript z dowolnej strony. Działa poprzez dołączenie skryptu do strony. Następnie skrypt żąda obrazu z serwera Google App Engine. Serwer pobiera żądany obraz i przekazuje go konwertowany na base64 do skryptu. Kiedy skrypt otrzymuje bazę base64, przekazuje dane do wywołania zwrotnego, które następnie można narysować na płótnie i zacząć z nim mieszać.

Answer 5

Po prostu wpadł na ten sam problem. Dowiedziałem się o CORS, które może być pomocne.

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

To nie dla mnie, ponieważ staram się manipulować obraz z Flickr. Wciąż szukam rozwiązania.

Answer 6

W przeszłości usługa Amazon S3 nie zezwalała na modyfikowanie lub dodawanie nagłówków HTTP access-control-allow-origin-access-access-allow-credentials, więc lepiej było zmienić inną usługę, na przykład Rackspace Pliki chmury lub inne usługi, które to umożliwiają.

dodać lub zmodyfikować nagłówki HTTP tak:

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

Zobacz http://www.w3.org/TR/cors/#use-cases aby uzyskać więcej informacji.

Korzystanie z usługi, która pozwala modyfikować nagłówki HTTP, całkowicie rozwiązuje ten sam problem pochodzenia.

Answer 7

Jeśli używasz PHP, można zrobić coś takiego:

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; 
    } 

i dostęp do obrazu za pomocą tego pliku php, podobnie jak wtedy, gdy plik jest nazywany generateImage.php można zrobić <img src="http://GENERATEPHPLOCATION/generateImage.php"/> i obraz zewnętrzny URL może być parametrem dostać za pliku

Answer 8

Dla osób, które nie używają S3, można spróbować zbudować proxy obrazu, które zakoduje plik obrazu i zawinie go w obiekt JSON.

Następnie można użyć JSONP, który obsługuje cross domain, aby pobrać obiekt JSON i przypisać dane obrazu do img.src.

Napisałem przykładowy kod serwera proxy obrazu za pomocą Google App Engine. https://github.com/flyakite/gae-image-proxy

JSON Object Zwraca w formacie podobnych

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

do 'danych' jest dane obrazu w formacie base64. Przypisz go do obrazu.

img.src = result.data; 

Obraz jest teraz "czysty" dla płótna.

Answer 9

Aby edytować uprawnienia kubełkowe S3:

1) Zaloguj się do konsoli AWS Zarządzania i otworzyć konsolę Amazon S3 na https://console.aws.amazon.com/s3/

2) w liście wiadra, otworzyć wiadro, którego właściwości chcesz przeglądanie i kliknij „dodaj konfigurację CORS”

3) Napisz zasady jesteś gotów włożyć między znacznikami <CORSConfiguration>

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

Możesz dowiedzieć się więcej na temat zasad: http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html

4) Określ crossorigin = „anonymous” na obrazie będziesz używać w swoim płótnie