Toile HTML5 getImageData et règle de même origine

J'ai un site en cours d'exécution à pixie.strd6.com et des images hébergées par le biais d'Amazon S3 avec un CNAME pour images.pixie.strd6.com.

Je voudrais être capable de dessiner ces images en HTML5 canvas et appeler la getImageData méthode, mais elle jette Error: SECURITY_ERR: DOM Exception 18

J'ai essayé de réglage window.domain = "pixie.strd6.com"mais qui n'a pas d'effet.

En outre, $.get("http://dev.pixie.strd6.com/sprites/8516/thumb.png?1293830982", function(data) {console.log(data)}) jette aussi une erreur: 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.

Idéalement HTML5 canvas ne bloquerait pas l'appel de getImageData de sous-domaines. J'ai regardé dans la fixation d'un Access-Control-Allow-Origin-tête dans la S3, mais je n'ai pas réussi.

De l'aide ou des solutions de contournement sont grandement appréciés.

source d'informationauteur Daniel X Moore

  1. 6

    Amazon a récemment annoncé le soutien de la SCRO

    Nous sommes ravis d'annoncer le support de la Cross-Origin Resource sharing (SCRO) dans Amazon S3. Vous pouvez désormais facilement créer des applications web qui utilisent JavaScript et HTML5 pour interagir avec les ressources dans Amazon S3, vous permettant de mettre en œuvre HTML5 glisser et déposer des envois vers Amazon S3, montrer l'avancement du téléchargement ou de mise à jour de contenu. Jusqu'à maintenant, vous avez dû vous exécutez un serveur proxy entre votre application web et Amazon S3 pour prendre en charge ces fonctionnalités.

    Comment faire pour activer la SCRO

    Pour configurer votre seau pour permettre à la croix-de l'origine des demandes, vous créez une configuration de la SCRO, un document XML avec des règles qui permettent d'identifier les origines qui vous permettra d'accéder à votre seau, les opérations (méthodes HTTP) sera prise en charge pour chaque origine, et d'autres le fonctionnement spécifique de l'information. Vous pouvez ajouter jusqu'à 100 règles de la configuration. Vous ajoutez le document XML comme de la scro sous-ressource pour le seau.

  2. 4

    Une solution possible est d'utiliser nginx pour agir en tant que proxy. Voici comment configurer l'url va http://pixie.strd6.com/s3/ pour passer de S3, mais le navigateur peut encore croire qu'il est non-cross domain.

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

    Si vous utilisez PHP, vous pouvez faire quelque chose comme:

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

    Et d'accès à l'image en utilisant ce fichier php, comme si le fichier est appelé generateImage.php vous pouvez faire <img src="http://GENERATEPHPLOCATION/generateImage.php"/> et l'image externe de l'url peut être un paramètre get pour le fichier

  4. 2

    Récemment, je suis tombé sur $.getImageDatapar Max Novakovic. La page inclut un couple de chouettes démos de l'extraction et de l'exploitation sur Flickr des photos, ainsi que quelques exemples de code.

    Il vous permet d'extraire d'une image en JavaScript manipulable formulaire à partir d'un site arbitraire. Il fonctionne en ajoutant un script à la page. Le script demande à l'image de Google App Engine serveur. Le serveur récupère l'image demandée et les relais qu'il soit converti en base64 pour le script. Lorsque le script reçoit le base64, il transmet les données à un rappel, qui peut ensuite dessiner sur une toile et commencer à jouer avec elle.

  5. 2

    Dans le passé, Amazon S3 ne vous permettra pas de modifier ou d'ajouter de l'access-control-allow-origin et access-control-allow-pouvoirs en-têtes HTTP de sorte qu'il aurait été préférable de passer à un autre service, comme Rackspace Cloud Fichiers ou d'un autre service qui ne.

    Ajouter ou modifier les en-têtes HTTP, comme ceci:

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

    Voir http://www.w3.org/TR/cors/#use-cases pour plus d'informations.

    À l'aide d'un service qui vous permet de modifier les en-têtes HTTP entièrement résout l'origine du problème.

  6. 2

    Pour les personnes qui n'utilisent pas de S3 peut essayer de construire une image de proxy qui codent pour le fichier image et l'envelopper dans un objet JSON.

    Ensuite, vous pouvez utiliser JSONP qui soutient la croix de domaine pour aller chercher de l'objet JSON et affecter les données de l'image à l'img.src .

    J'ai écrit un code d'exemple de l'image du serveur proxy avec Google App Engine.
    https://github.com/flyakite/gae-image-proxy

    L'objet JSON retourne dans le format comme ce

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

    Les 'données' est les données d'image au format base64. L'attribuer à une image.

    img.src = result.data;

    L'image est maintenant "propre" pour votre toile.

  7. 2

    Pour modifier votre S3 seau autorisations:

    1) connectez-vous à AWS Management Console et ouvrez le Amazon S3 console à https://console.aws.amazon.com/s3/

    2) Dans les Seaux liste, ouvrez le seau dont vous souhaitez afficher les propriétés, puis cliquez sur "ajouter de la SCRO configuration"

    Toile HTML5 getImageData et règle de même origine

    3) Écrire les règles que vous êtes prêt à ajouter entre les balises <CORSConfiguration>

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

    Vous pouvez en apprendre plus sur les règles à: http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html

    4) Spécifier crossorigin= "anonyme" sur l'image que vous utiliserez dans votre toile

  8. 1

    Ce comportement est par la conception. Par la spec HTML5, dès que vous dessinez une croix d'origine de l'image d'une toile, c'est sale et vous ne pouvez plus lire les pixels. Origine-correspondance compare le schéma complet de l'hôte, et non IE navigateurs, le port.

  9. 1

    Juste tombé sur le même problème. J'ai découvert les catégories de documents qui pourraient être utiles.

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

    Il n'a pas de travail pour moi depuis que je suis en train de manipuler une image provenant de Flickr. Donc, je suis toujours à la recherche de la solution.