web-dev-qa-db-fra.com

la toile a été corrompue par des données croisées sur l'origine du problème

je suis en train d’écrire un script (ou d’éditer et de bidouiller des choses ensemble) pour éditer l’aspect des images sur une page. Je connais les bases du javascript, mais c’est la première fois que je regarde la toile. alors sois indulgent avec moi

Je reçois cette erreur: 

Impossible d'obtenir des données d'image à partir du canevas car le canevas a été corrompu par des données croisées.  

alors voici mon extrait de code jetant l'erreur:

var canvas = document.createElement('canvas'),
            context = canvas.getContext('2d'),
            height = img.naturalHeight || img.offsetHeight || img.height,
            width = img.naturalWidth || img.offsetWidth || img.width,
            imgData;


        canvas.height = height;
        canvas.width = width;
        context.drawImage(img, 0, 0);

        console.log(context);
        try {
            imgData = context.getImageData(0, 0, width, height);
        } catch(e) {}

maintenant j'ai trouvé ce post:

http://bolsterweb.com/2012/06/grabbing-image-data-external-source-canvas-element/

mais je ne sais pas comment l'adapter à mes besoins.

Je sais que tout cela est dû à la sécurité et à tout cela - mais y a-t-il un moyen de tout faire pour que tout se produise?

Merci

EDIT

Oh, attendez .. l'erreur est due au fait que vous ne pouvez pas obtenirImageData .. il est donc possible de le rendre "local"

javascriptcanvascors
9
Dustin Silk

Pour satisfaire CORS, vous pouvez héberger vos images sur un site convivial pour CORS tel que dropbox.com.

Ensuite, l'erreur de sécurité ne sera pas déclenchée si vous spécifiez image.crossOrigin = "anonymous":

    var image=new Image();
    image.onload=function(){
    }
    image.crossOrigin="anonymous";
    image.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/colorhouse.png";

Voici le code et un violon: http://jsfiddle.net/m1erickson/4djSr/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    #canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var image=new Image();
    image.onload=function(){
        ctx.drawImage(image,0,0);

        // desaturation colors
        var imgData=ctx.getImageData(0,0,canvas.width,canvas.height);
        var data=imgData.data;

        for(var i = 0; i < data.length; i += 4) {
          var grayscale= 0.33*data[i]+0.5*data[i+1]+0.15*data[i+2];
          data[i]=grayscale;
          data[i+1]=grayscale;
          data[i+2]=grayscale;
        }

        // write the modified image data
        ctx.putImageData(imgData,0,0);

    }
    image.crossOrigin="anonymous";
    image.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/colorhouse.png";



}); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=140 height=140></canvas>
</body>
</html>
23
markE

Je n'ai pas assez de réputation pour réellement ajouter un commentaire (mais j'en ai assez pour répondre à la question, hein ??), je voulais juste ajouter à la réponse de markE que je devais capitaliser sur Anonymous. 

image.crossOrigin = "Anonymous"
5
Michael Silveira

J'ai trouvé que cela fonctionnait avec chrome si vous créez un raccourci Windows comme ceci:

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files

Fermez chrome et lancez-le via votre raccourci.

Source: https://github.com/mrdoob/three.js/wiki/How-to-run-things-locally

Article connexe: Chargement de l'image d'origine croisée refusé sur une image locale avec THREE.js sur Chrome

Je suppose que vous travaillez avec un fichier local sans serveur Web. 

2
Snorvarg

Essayez d'ajouter crossorigin="anonymous" à l'élément d'image. Par exemple

<img src="http://example.com/foo.jpg" crossorigin="anonymous"/>
2
mmla

Activer CORS côté serveur est une solution, mais si vous avez accès au serveur. De cette façon, le serveur sert des images activées par CORS.

0
chuqdennis