L'exemple Color Picker sur MDN ne fonctionne pas. Tout comme mon code

Sur la page Mozilla Developer Network, vous pouvez créer un sélecteur de couleur à l'aide de getImageData(). Vous pouvez consulter le code au https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas#A_color_picker.L'exemple Color Picker sur MDN ne fonctionne pas. Tout comme mon code

Cela semble fonctionner correctement sur la page MDN. Mais sur CodePen ou JSFiddle, c'est cassé. J'ai essayé de suivre l'instruction avec un problème similaire et j'obtiens cette erreur lors de la définition de img.src dans une URL: Uncaught TypeError: Echec de l'exécution de 'drawImage' sur 'CanvasRenderingContext2D': La valeur fournie n'est pas de type '(CSSImageValue ou HTMLImageElement ou HTMLVideoElement ou HTMLCanvasElement ou ImageBitmap ou OffscreenCanvas) '. J'espère que quelqu'un peut m'aider.

Source

2017-04-04 Huy Tran

Cela ressemble CORS [problème] (http://stackoverflow.com/questions/22097747/how-to-fix-getimagedata-error-the-canvas-has-been-tainted-by-cross- origine-data) – Legends

@Legends Oui c'est. Il a été corrigé avec 'img.crossOrigin =" Anonymous ". Mais un problème persiste toujours. Chaque fois que je veux tester mon code, je dois éteindre l'onglet et le rallumer. Cela ne fonctionne qu'une fois quand je l'ouvre pour la première fois. Rafraîchir avec F5 jette l'erreur de toile contaminée. Est-ce que je peux tester mon code sans avoir à redémarrer l'onglet? Et ce problème affectera-t-il les autres utilisateurs lorsqu'ils essaieront de rafraîchir mon jeu sur leur ordinateur? –

Si vous ajoutez cette ligne dans la section JS après img src et rechargez le page, l'exemple va fonctionner.

img.crossOrigin = "Anonymous"

Il s'agit d'une contamination d'origine croisée et d'un canevas HTML. Apparemment, si un élément provient d'un domaine différent, le canevas devient corrompu et vous ne pouvez pas en extraire de données, à moins que vous n'ayez défini l'attribut d'origine croisée correct avec la ligne ci-dessus. Cette erreur peut également se produire si les en-têtes n'ont pas été définis sur l'image lorsqu'elle a été envoyée depuis la source.

Il y a plus d'informations à ce billet de blog de CodePen: https://blog.codepen.io/2013/10/08/cross-domain-images-tainted-canvas/

Voici un lien vers un CodePen qui fonctionne!
http://codepen.io/illuminatedspace/pen/WpWQmo?editors=1010#0

Source

2017-04-04 21:10:19 illuminatedSpace

Super! Ça fonctionne maintenant. Mais chaque fois que je veux tester mon code, je dois éteindre l'onglet et le rallumer. Cela ne fonctionne qu'une fois quand je l'ouvre pour la première fois. L'actualisation avec F5 renvoie l'erreur ** canvas teinté **. Est-ce que je peux tester mon code sans avoir à redémarrer l'onglet? Et ce problème affectera-t-il les autres utilisateurs lorsqu'ils essaieront de rafraîchir mon jeu sur leur ordinateur? –

Je ne comprends pas très bien ce que vous voulez dire par éteindre l'onglet. Je n'ai pas ce problème avec l'exemple sur le stylo de code, donc je suppose que vous parlez d'un contexte différent. Si je voyais un extrait de code, je pourrais peut-être aider davantage. – illuminatedSpace

Le problème avec mon code est exactement comme ceci CodePen [link] (http://codepen.io/illuminatedspace/pen/WpWQmo?editors=1010#0). Cela ne fonctionne en quelque sorte que lorsque la page est ouverte pour la première fois. Lorsque j'actualise la page avec ** F5 **, il commence à lancer ** Erreur de canevas contaminé ** à nouveau. Ce n'est que lorsque je clique sur ** x ** pour fermer l'onglet, puis sur le lien pour ouvrir un nouvel onglet, cela fonctionnera à nouveau. –

Pourquoi leur exemple codepen ne fonctionne pas.

« Bien que vous pouvez utiliser des images sans l'approbation CORS dans votre toile, en faisant de sorte que la toile entache Une fois une toile a été décoloré, vous ne pouvez tirer plus de données en arrière Par exemple, vous ne pouvez plus utiliser les méthodes canvas toBlob(), toDataURL() ou getImageData() "(Ironically also from MDN)

Source

2017-04-04 21:06:33

L'exemple Color Picker sur MDN ne fonctionne pas. Tout comme mon code

Répondre

Questions connexes