資料結構
網路
關係型資料庫管理系統 (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 次檢視
