📜  如何使用 JavaScript 查找图像的平均颜色?

📅  最后修改于: 2021-11-06 11:35:34             🧑  作者: Mango

通过在画布元素上绘制图像,可以使用 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?
    
  
    

  

    
  
    
               


输出:

图片