JavaScript-从图像的特定区域获取平均颜色

JavaScript-从图像的特定区域获取平均颜色,javascript,jquery,colors,html5-canvas,color-picker,Javascript,Jquery,Colors,Html5 Canvas,Color Picker,我需要使用JavaScript从图像的矩形区域获得平均颜色 我尝试使用,但它不允许指定区域而不是单个像素 如果您需要获得单个像素的平均颜色,而不是矩形区域的颜色,请查看另一个问题: 不确定这项技术在画布和图像数据的DOM中是否可行,但在使用Flash和Actionscript的时候,有一个很好的捷径。 在我的用例中,所讨论的区域是统一的:所有区域都是相同大小的正方形,例如,我有一个1280x720 BitmapData(相当于ImageData)来自网络摄像头或视频,我需要平均颜色来制作一个网格

我需要使用
JavaScript
从图像的矩形区域获得平均颜色


我尝试使用,但它不允许指定区域而不是单个像素

如果您需要获得单个像素的平均颜色,而不是矩形区域的颜色,请查看另一个问题:


不确定这项技术在画布和图像数据的DOM中是否可行,但在使用Flash和Actionscript的时候,有一个很好的捷径。 在我的用例中,所讨论的区域是统一的:所有区域都是相同大小的正方形,例如,我有一个1280x720 BitmapData(相当于ImageData)来自网络摄像头或视频,我需要平均颜色来制作一个网格,例如代表输入图像的16x9区域。 我所做的是:将整个输入图像绘制成位图,其大小值以像素为单位,等于区域列和行的数量。例如,将1280x720px图像绘制成16x9px位图。 然后简单地使用本机方法获得缩小图像中恰好一个像素的颜色。
此方法与手动操作一样精确,速度更快,代码也更简单。

@WillReese如果您认为这是重复的,您应该将问题标记为重复,而不是仅添加带有链接的注释。此外,从这个问题中我了解到OP试图得到图像某个区域的平均颜色,而不是单个值。我认为这可能还不够清楚,但是在把这个标记为重复和/或向下投票之前,你应该考虑澄清。@丹齐格,如果你可以用画布来解决你的问题,我提供的链接仅仅是有用的信息。这完全不是那个问题的重复。另外,我没有投反对票。@myclaro willeese已经提到了包含您发布的链接的问题/答案,所以也没有必要在这里复制该链接。事实上,也许你们两个碰巧同时发表了评论,但你们应该更喜欢使用包含完整解释的SO链接,而不是只包含工作代码的外部链接。这是一个惊人的答案@Danziger。这是一个详细且信息丰富的答案,它认真地帮助我解决了在计算机视觉项目中发现的面部区域内的颜色平均问题+1我注意到的一件事是,尽管上述功能正常,但我试图检测眼睛区域内的平均颜色,其主要显示为黑色的平均纯色和灰色的平均alpha颜色。这是意料之中的吗?@SMT,请看一下我的最新答案,我想这就是你所指的问题。谢谢你的回复!我感谢你的更新!这个问题实际上是在我这边(当然)。只是在做我的样本时缺乏关注-我有多张画布,其中一张画布绘制的视频帧不是用于平均着色的画布,所以当然我的值显示为不正确:)感谢为写出如此深思熟虑的答案所付出的努力。