通过在画布元素上绘制图像,可以使用 JavaScript 找到图像的平均颜色。必须执行以下步骤才能获得图像的平均颜色:
1. 首先使用 Canvas 2D API的方法 context.drawImage() 在画布上绘制图像。此方法将图像和尺寸作为参数并将其绘制到画布上。
句法:
context.drawImage( img, width, height );
2. 使用 context.getImageData()方法返回画布的图像数据。它返回一个 ImageData 对象,表示画布指定部分的像素数据。
句法:
context.getImageData( x, y, width, height )
3. 然后通过将所有颜色值分别相加并找到该颜色的平均值,使用该图像数据计算平均红色、绿色和蓝色。
例子:
html
Find Average Color of
image via JavaScript?
输出: