mozilla
Vos résultats de recherche

    Image avec ressources d'origines multiples (CORS) activées

    La spécification HTML introduit un attribut crossorigin pour les images qui, combinées avec l'en-tête CORS (Cross-Origin Resource Sharing) approprié, permet aux aux images définies via l'élément <img> provenant d'emplacements étrangers d'être utilisées dans le canevas de la même manière que si elles avaient été chargées depuis l'origine de la page actuelle.

    Voir les configurations des attributs CORS  pour plus de détails sur l'utilisation de l'attribut crossorigin.

    Qu'est-ce qu'un canevas « corrompu » ?

    Bien qu'il soit possible d'utiliser des images non-approuvées par le CORS dans votre canevas, le faire corrompt le canevas. Une fois qu'un canevas a été corrompu, on ne peut plus retirer de données du canevas. On ne peut donc plus, par exemple, utiliser les méthodes liées au canevas comme toBlob()toDataURL(), ou getImageData(). Les utiliser produira une erreur de sécurité.

    Cela est une mesure de protection pour que les utilisateurs ne puissent accéder à des données privées en utilisant des images provenant de sites éloignés sans que cela ait été autorisé.

    Un exemple : stocker une image venant d'un site extérieur

    Dans le cas où on dispose d'un serveur stockant des images avec l'en-tête Access-Control-Allow-Origin appropriée, on pourra sauvegarder ces images dans localStorage comme si elles étaient servies depuis son propre domaine.

    Côté serveur, on pourra utiliser ce modèle (basé sur les configurations Apache modèles) pour renvoyer la réponse appropriée avec le bon en-tête :

    <IfModule mod_setenvif.c>
        <IfModule mod_headers.c>
            <FilesMatch "\.(cur|gif|ico|jpe?g|png|svgz?|webp)$">
                SetEnvIf Origin ":" IS_CORS
                Header set Access-Control-Allow-Origin "*" env=IS_CORS
            </FilesMatch>
        </IfModule>
    </IfModule>

    Au niveau du client, on pourra utiliser le code JavaScript suivant :

    var img = new Image,
        canvas = document.createElement("canvas"),
        ctx = canvas.getContext("2d"),
        src = "http://www.exemple.com/image"; // l'URL de l'image
    
    img.crossOrigin = "Anonymous";
    
    img.onload = function() {
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage( img, 0, 0 );
        localStorage.setItem( "donnéesSauvegardées", canvas.toDataURL("image/png") );
    }
    img.src = src;
    // on s'assure de charger les événements également pour les images mises en cache
    if ( img.complete || img.complete === undefined ) {
        img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
        img.src = src;
    }

    Compatibilité des navigateurs

    Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Support simple 13 8 Pas de support Pas de support Nightly build
    Fonctionnalité Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Support simple ? ? ? ? ?

    Voir aussi

    Étiquettes et contributeurs liés au document

    Contributors to this page: tregagnon, SphinxKnight
    Dernière mise à jour par : SphinxKnight,