javascript - MDN 上的颜色选择器示例无法正常工作。我的代码也是如此

Question

在 Mozilla 开发者网络页面上，有一个示例，您可以在 getImageData() 的帮助下创建颜色选择器。您可以在https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas#A_color_picker查看代码。

它在 MDN 页面上似乎运行良好。但在 CodePen 或 JSFiddle 上，它就坏了。我尝试按照类似问题的说明进行操作，但在将 img.src 设置为 url 时出现此错误: Uncaught TypeError: 无法在 'CanvasRenderingContext2D' 上执行 'drawImage': 提供的值不是类型 ' (CSSImageValue 或 HTMLImageElement 或 HTMLVideoElement 或 HTMLCanvasElement 或 ImageBitmap 或 OffscreenCanvas)'。希望有人能帮助我。

Answer 1

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

img.crossOrigin = "Anonymous"

这与跨域污染和 HTML Canvas 有关。显然，如果一个元素来自不同的域，那么 Canvas 就会被污染，并且您无法从中提取数据，除非您使用上面的行设置了正确的跨源属性。如果从源发送图像时未在图像上设置 header ，也可能会发生此错误。

CodePen 的这篇博客文章提供了更多信息:https://blog.codepen.io/2013/10/08/cross-domain-images-tainted-canvas/

这是一个可以使用的 CodePen 的链接!
http://codepen.io/illuminatedspace/pen/WpWQmo?editors=1010#0