Comment éviter l'erreur CORS lors du dessin d'une image sur une toile?

Question

Je travaille actuellement sur un projet pour mon bootcamp de codage. J'essaie de superposer des bandaids sur une image d'un ours et j'essaye d'utiliser la toile pour vérifier la couleur de la zone sur laquelle ils cliquent pour m'assurer qu'ils ne mettent pas des bandaids sur l'espace blanc autour de l'image réelle.

Comme vous pouvez le voir, j'ai essayé de résoudre mon erreur de contamination d'origine en hébergeant l'image sur une boîte de dépôt, puis en utilisant le lien brut d'origine croisée anonyme. Mon instructeur m'a dit d'essayer ça. Cependant maintenant je reçois une erreur pendant le dessin de l'image sur la toile. La redirection de 'https://www.dropbox.com/s/xxb6ndsf71jvy25/myBear.png?raw=1' a été bloquée par la règle CORS: Aucun en-tête 'Access-Control-Allow-Origin' n'est présent sur la ressource demandée, l'origine 'null' n'est donc pas autorisée. "

Quelqu'un peut-il m'aider avec une solution simple?

Voici mon HTML:

<script src="https://code.jquery.com/jquery.js"></script> 

<script src="https://www.gstatic.com/firebasejs/live/3.0/firebase.js"></script> 

<script type="text/javascript" src="assets/js/app.js"></script> 

<canvas id="canvas" width="1331" height="941">Helllo</canvas> 

<img src="https://www.dropbox.com/s/xxb6ndsf71jvy25/myBear.png?raw=1" onload="draw()" style="display: none" id="theBear" crossorigin="anonymous"> 

<img src="assets/images/bandaids/001-medical-3.png" class="bandAids"> 

<link rel="stylesheet" type="text/css" href="assets/css/style.css"> 

JavaScript pertinent:

function draw() { 
    var canvas = document.getElementById("canvas"); 
    var ctx = canvas.getContext("2d"); 
    var img = document.getElementById("theBear"); 
    ctx.drawImage(img,0,0); 
    console.log("drew image"); 
}; 

$(document).on("click","#canvas", function(event) { 
    var c = this.getContext('2d'); 
    var p = c.getImageData(event.pageX, event.pageY, 1, 1).data; 
    var hex = "#" + ("000000" + rgbToHex(p[0], p[1], p[2])).slice(-6); 
    console.log(hex); 
    database.ref().child("bandAids").push({ 
    xCord: event.pageX, 
    yCord: event.pageY, 
    bandAid: myBandAid, 
    }) 
    console.log(event); 
}) 

Answer 1

Vous pouvez essayer de définir l'attribut crossOrigin sur l'image:

function loadImage(src, cb) { 
    var image = new Image(); 
    image.onload = function() { 
     cb(this); 
    } 
    image.crossOrigin = 'Anonymous'; 
    image.src = src; 
} 

...

var img = document.getElementById("theBear"); 
loadImage(img.src, function(image) { 
    ctx.drawImage(image,0,0); 
} 

Si elle ne vous devriez travailler accueillir l'image sur votre propre serveur web ou un imagehoster comme imgur et définir l'en-tête Access-Control-Allow-Origin en conséquence.

Answer 2

J'ai trouvé une solution mais je ne sais pas si elle s'applique à tous les problèmes liés et ne comprends pas vraiment pourquoi cela fonctionne.

Remplacez simplement www.dropbox.com par dl.dropboxusercontent.com dans votre URL.

trouvés ici:

https://www.dropboxforum.com/t5/API-support/CORS-issue-when-trying-to-download-shared-file/td-p/82466