MDN上的拾色器示例不起作用。我的代码也是如此

在Mozilla开发者网络页面上，有一个例子，您可以在getImageData（）的帮助下创建颜色选择器。您可以在https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas#A_color_picker查看代码。MDN上的拾色器示例不起作用。我的代码也是如此

它似乎在MDN页面上正常工作。但在CodePen或JSFiddle上，它已经坏掉了。我试图按照类似的问题指示，并且在将img.src设置为url时出现此错误：Uncaught TypeError：无法执行'CanvasRenderingContext2D'上的'drawImage'：提供的值不是'（CSSImageValue或HTMLImageElement或HTMLVideoElement或HTMLCanvasElement或ImageBitmap或OffscreenCanvas）'。希望可以有人帮帮我。

来源

2017-04-04 Huy Tran

这看起来像CORS [问题]（http://stackoverflow.com/questions/22097747/how-to-fix-getimagedata-error-the-canvas-has-been-tainted-by-cross-原始数据） – Legends

@Legends是的。它是用'img.crossOrigin =“Anonymous”修复的。但问题仍然存在。每次我想测试我的代码时，我都必须关闭该选项卡并将其重新打开。当我第一次打开它时，它只能使用一次。用F5刷新会抛出污染的画布错误。有没有一种方法可以测试我的代码而无需重新启动选项卡？当他们试图在他们的电脑上刷新我的游戏时，这个问题会影响到其他人吗？ –

如果您在img src之后的JS节中添加此行并重新加载页面中，该示例将起作用。

img.crossOrigin = "Anonymous"

它与交叉污染和HTML画布有关。显然，如果一个元素来自不同的域，那么画布会变得污染，并且您不能从中拉出数据，除非您使用上面的行设置正确的跨越原点属性。如果从源发送图像时未在图像上设置标题，也会发生此错误。

有从CodePen这个博客帖子的更多信息：https://blog.codepen.io/2013/10/08/cross-domain-images-tainted-canvas/

这里有一个CodePen的作品的链接！
http://codepen.io/illuminatedspace/pen/WpWQmo?editors=1010#0

来源

2017-04-04 21:10:19 illuminatedSpace

太棒了！它现在有效。但每次我想测试我的代码时，我必须关闭该选项卡并重新打开它。当我第一次打开它时，它只能使用一次。用F5刷新会抛出**感染的画布错误**。有没有一种方法可以测试我的代码而无需重新启动选项卡？当他们试图在他们的电脑上刷新我的游戏时，这个问题会影响到其他人吗？ –

我不完全明白你的意思，关掉标签。我在代码笔的例子中没有遇到这个问题，所以我假设你正在讨论不同的上下文。如果我看到一段代码，也许我可以进一步提供帮助。 – illuminatedSpace

我的代码存在的问题与CodePen [link]（http://codepen.io/illuminatedspace/pen/WpWQmo?editors=1010#0）完全相同。它不知何故只在页面第一次打开时才起作用。当我用** F5 **刷新页面时，它会再次抛出**感染的画布错误**。只有当我点击** x **关闭标签，然后点击链接打开全新标签后，它才会再次显示。 –

为什么他们codepen例如不工作：

“虽然你可以在你的画布上用图像而不CORS批准，这样做玷污画布一旦帆布已经被污染的，可以不再提取数据回（），toDataURL（）或getImageData（）方法“(Ironically also from MDN)

来源

2017-04-04 21:06:33

MDN上的拾色器示例不起作用。我的代码也是如此

回答

相关问题