在Mozilla Developer Network页面上，有一个示例，您可以借助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时出现此错误：未捕获TypeError：无法在'CanvasRenderingContext2D'上执行'drawImage'：提供的值不是' （CSSImageValue或HTMLImageElement或HTMLVideoElement或HTMLCanvasElement或ImageBitmap或OffscreenCanvas）'。希望有人可以帮助我。
答案 0 :(得分：2)
如果你在img src之后的JS部分添加这一行并重新加载页面，那么这个例子就可以了。
img.crossOrigin = "Anonymous"
它与跨源污染和HTML画布有关。显然，如果一个元素来自不同的域，那么画布就会被污染，你不能从中提取数据，除非你用上面的行设置正确的cross origin属性。如果在从源发送图像时未在图像上设置标题，也会发生此错误。
来自CodePen的这篇博客文章中提供了更多信息：https://blog.codepen.io/2013/10/08/cross-domain-images-tainted-canvas/
这是指向可行的CodePen的链接！
http://codepen.io/illuminatedspace/pen/WpWQmo?editors=1010#0
答案 1 :(得分：0)
为什么他们的codepen示例不起作用：
“虽然您可以在画布中使用未经CORS批准的图像，但这样做会损坏画布。一旦画布受到污染，您就不能再将数据拉回画布。例如，您无法再使用canvas toBlob（），toDataURL（）或getImageData（）方法“(Ironically also from MDN)