MDN 上的拾色器示例不起作用。我的代码也是
The Color Picker example on MDN is not working. And so is my code
在 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: Failed to execute 'drawImage' on 'CanvasRenderingContext2D'：提供的值不是类型“（CSSImageValue 或 HTMLImageElement 或 HTMLVideoElement 或 HTMLCanvasElement 或 ImageBitmap 或 OffscreenCanvas）”。希望有人能帮助我。
为什么他们的代码笔示例不起作用：
"Although you can use images without CORS approval in your canvas, doing so taints the canvas. Once a canvas has been tainted, you can no longer pull data back out of the canvas. For example, you can no longer use the canvas toBlob(), toDataURL(), or getImageData() methods" (Ironically also from MDN)
如果您在 img src 之后的 JS 部分添加此行并重新加载页面，该示例将起作用。
img.crossOrigin = "Anonymous"
它与 cross-origin 污染和 HTML canvas 有关。显然，如果一个元素来自不同的域，那么 canvas 就会被污染，并且您无法从中提取数据，除非您使用上面的行设置正确的交叉原点属性。如果从源发送图像时未在图像上设置 headers，也可能发生此错误。
此博客 post 中有来自 CodePen 的更多信息：https://blog.codepen.io/2013/10/08/cross-domain-images-tainted-canvas/
这是一个 link 可以使用的 CodePen！
http://codepen.io/illuminatedspace/pen/WpWQmo?editors=1010#0
在 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: Failed to execute 'drawImage' on 'CanvasRenderingContext2D'：提供的值不是类型“（CSSImageValue 或 HTMLImageElement 或 HTMLVideoElement 或 HTMLCanvasElement 或 ImageBitmap 或 OffscreenCanvas）”。希望有人能帮助我。
为什么他们的代码笔示例不起作用：
"Although you can use images without CORS approval in your canvas, doing so taints the canvas. Once a canvas has been tainted, you can no longer pull data back out of the canvas. For example, you can no longer use the canvas toBlob(), toDataURL(), or getImageData() methods" (Ironically also from MDN)
如果您在 img src 之后的 JS 部分添加此行并重新加载页面，该示例将起作用。
img.crossOrigin = "Anonymous"
它与 cross-origin 污染和 HTML canvas 有关。显然，如果一个元素来自不同的域，那么 canvas 就会被污染，并且您无法从中提取数据，除非您使用上面的行设置正确的交叉原点属性。如果从源发送图像时未在图像上设置 headers，也可能发生此错误。
此博客 post 中有来自 CodePen 的更多信息：https://blog.codepen.io/2013/10/08/cross-domain-images-tainted-canvas/
这是一个 link 可以使用的 CodePen！
http://codepen.io/illuminatedspace/pen/WpWQmo?editors=1010#0