如何使用 JavaScript 找到图像的平均颜色?
概述
从图像中提取颜色意味着提取图像中以像素形式存在的颜色，并以 RGB(红绿蓝)的形式计算不同像素的平均值，并根据颜色像素的平均值形成新的平均颜色。所以我们可以借助 JavaScript 来实现这一点，在 JavaScript 中有一个属性"canvas"，用于绘制图像或任何以像素形式呈现的内容。
方法
为了构建此功能，我们将使用 canvas 方法将图像转换为画布，通过它我们可以操纵和访问图像的颜色。为此，我们将通过获取原始图像的宽度和高度来收集图像数据。为此，我们将使用下面给出的语法。
语法
const canvas = document.createElement("canvas");
const imgCanva = canvas.getContext("2d");
imgCanva.drawImage(imageElement, 0, 0);
因此，通过 draw image 方法，原始图像将在内存中的画布上绘制。从这个画布中，我们将从图像中提取 R(红色)、G(绿色)和 B(蓝色)像素，并在计算平均值后形成新的 RGB 颜色。
算法
步骤 1 - 在文本编辑器上创建一个 HTML 文件，并向文件添加 HTML 样板。
步骤 2 - 现在使用 HTML <img>标签将图像添加到文件并为其添加名为"myImg"的 id 属性。
<img id="myImg" src="https://st.depositphotos.com/1420973/3112/i/600/depositphotos_31129547-stock-photo-venice-landmark-burano-island-canal.jpg" crossorigin>
步骤 3 − 现在使用内部样式来设置页面布局。
<style>
body {
display: flex;
justify-content: center;
align-items: center;
}
img {
width: 80%;
height: 20rem;
border-radius: 8px;
}
</style>
步骤 4 − 现在为页面的 body 标签创建一个脚本标签。
<script></script>
步骤 5 − 创建一个 JavaScript 箭头函数，名称为"extractAvgColor"，并传递两个参数"imageElement"，该参数将图像作为输入，另一个参数是决定颜色比例的平均值。
extractAvgColor=(imageElement, ratio)=>{}
步骤 6 − 使用 createElement() 方法创建一个"canvas"元素。
const canvas = document.createElement("canvas");
步骤 7 − 现在将图像转换为画布元素以进行操作。
const canvas = document.createElement("canvas")
let height = canvas.height = imageElement.naturalHeight
let width = canvas.width = imageElement.naturalWidth
const imgCanva = canvas.getContext("2d")
imgCanva.drawImage(imageElement, 0, 0)
data = context.getImageData(0, 0, width, height)
length = data.data.length
步骤 8 − 现在遍历图像的像素并将 RGB 颜色存储到各自的变量中。
while ((i += ratio * 4) < length) {
++count
R += data.data[i]
G += data.data[i + 1]
B += data.data[i + 2]
}
第 9 步 - 现在将 RGB 颜色从计数中除以 RGB。
R = (R / count) G = (G / count) B = (B / count)
第 10 步 - 将 R、G 和 B 值返回给函数。
return {
R, G, B
}
第 11 步 - 使用 HTML DOM 对象通过其 id 名称访问 body 标签中的图像并将其存储在变量"img"中。
const img = document.getElementById("myImg");
步骤 12 - 现在使用 img 的 onload 方法触发 extractAvgColor()。
img.onload = () => {
const { R, G, B } = extractAvgColor(img, 9999)
document.body.style.background = `rgb(${R}, ${G},${B})`
}
步骤 13 - 使用 css 属性将新的平均颜色设置为 HTML 页面的背景。
示例
在此示例中，我们将在网页上添加图像，并从图像中找到平均颜色，然后计算平均颜色图像背景的颜色将会改变。
<html>
<head>
<title> average color of an image </title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
}
img {
width: 80%;
height: 20rem;
border-radius: 8px;
}
</style>
</head>
<body>
<img id="myImg" src="https://st.depositphotos.com/1420973/3112/i/600/depositphotos_31129547-stock-photo-venice-landmark-burano-island-canal.jpg" crossorigin>
<script>
extractAvgColor=(imageElement, ratio)=>{
let data, length, i = 0, count = 0, R = 0, G = 0, B = 0;
const canvas = document.createElement("canvas")
let height = canvas.height = imageElement.naturalHeight
let width = canvas.width = imageElement.naturalWidth
const imgCanva = canvas.getContext("2d")
imgCanva.drawImage(imageElement, 0, 0)
data = context.getImageData(0, 0, width, height)
length = data.data.length
while ((i += ratio * 4) < length) {
++count
R += data.data[i]
G += data.data[i + 1]
B += data.data[i + 2]
}
R = (R / count)
G = (G / count)
B = (B / count)
return {
R, G, B
}
}
const img = document.getElementById("myImg");
img.onload = () => {
const { R, G, B } = extractAvgColor(img, 9999)
document.body.style.background = `rgb(${R}, ${G},${B})`
}
</script>
</body>
</html>
下图显示了上述功能的输出，该功能显示了一个图像，其背景颜色与图像颜色有些相似。从中可以看出，图像包含多种颜色，例如黄色、红色、蓝色和几乎所有颜色。因此，当将此图像转换为画布并计算 RGB 像素时，它会给出一种新颜色的平均值作为背景颜色，该颜色有点蓝灰色。
结论
在上面的程序中，我们对图像使用了"onload"方法，因为只有当图像加载到浏览器窗口时，图像的背景才会更改，否则背景不会更改。我们创建的上述功能被大多数现代应用程序用来使用户界面更具吸引力。此外，YouTube 的大多数产品(如 YouTube 音乐和 YouTube 播放器)都使用此功能来同步其音乐。我们还可以使用此功能构建更具吸引力的图片库。在图像标签中使用"crossorigin"属性也很重要，因为我们正在从不同的托管图像加载图像。我们还可以通过从图像中以不同的比例提取颜色来制作背景颜色渐变。
