数据结构
网络
关系型数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何使用 JavaScript 查找图像的平均颜色？
概述
从图像中提取颜色意味着将图像中以像素形式存在的颜色提取出来，并以 RGB（红绿蓝）的形式计算不同像素的平均值，然后根据颜色像素的平均值形成新的平均颜色。我们可以借助 JavaScript 来实现这一点，在 JavaScript 中有一个名为“canvas”的属性，它用于以像素的形式绘制图像或任何内容。
方法
为了构建此功能，我们将使用 canvas 方法将图像转换为 canvas，通过它我们可以操作并访问图像的颜色。为此，我们将通过获取原始图像的宽度和高度来收集图像的数据。我们将使用以下语法。
语法
const canvas = document.createElement("canvas");
const imgCanva = canvas.getContext("2d");
imgCanva.drawImage(imageElement, 0, 0);
因此，通过 drawImage 方法，原始图像将被绘制到内存中的 canvas 上。从这个 canvas 中，我们将提取图像中的 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 - 现在将 script 标签添加到页面的 body 标签中。
<script></script>
步骤 5 - 创建一个名为“extractAvgColor”的基于 JavaScript 箭头函数，并传递两个参数：“imageElement”，它将图像作为输入，另一个是决定平均颜色比例的比例。
extractAvgColor=(imageElement, ratio)=>{}
步骤 6 - 使用 createElement() 方法创建一个“canvas”元素。
const canvas = document.createElement("canvas");
步骤 7 - 现在将图像转换为 canvas 元素以进行操作。
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 颜色。
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>
下面的图像显示了上述功能的输出，它显示一个背景颜色与图像颜色有些相似的图像。如您所见，此图像包含多种颜色，例如黄色、红色、蓝色以及几乎所有颜色。因此，当此图像转换为 canvas 并计算 RGB 像素时，它会产生一个新的平均颜色作为背景颜色，该颜色有点像蓝灰色。
结论
在上面的程序中，我们使用了图像的“onload”方法，因为只有当图像加载到浏览器窗口时才会更改图像的背景，否则背景不会更改。我们创建的上述功能被大多数现代应用程序用于使用户界面更具吸引力。此外，YouTube 的大多数产品（如 YouTube 音乐和 YouTube 播放器）都使用此功能与他们的音乐同步。我们还可以使用此功能来构建更具吸引力的图片库。将“crossorigin”属性与 image 标签一起使用也很重要，因为我们是从不同的托管图像加载图像。我们还可以通过以不同的比例从图像中提取颜色来使背景颜色渐变。
640 次查看
