如何使用 javascript 根據背景圖像更改字體顏色？

Question

我想根據圖像的顏色更改字體顏色。 字體顏色必須是黑色或白色，但它應該與圖像的顏色成比例地變化，就像在下面的代碼中一樣。

所以，我有這個js function，如果你移動鼠標，它會改變背景顏色，因此也會改變文本（在片段中將指針移動到背景下）。 顯然你移動鼠標改變顏色的部分我不感興趣，這只是一個測試。 有沒有辦法將 function 應用於我的個人 div？

簡單來說，我希望文本的顏色根據我的背景而不是移動鼠標來改變。 抱歉解釋不佳，我在這里比較新，試圖學習如何練習這個function。 目前我不知道該怎么做，我感謝任何答案，謝謝。

 function getTextColor(rgba){ rgba = rgba.match(/\d+/g); if((rgba[0]*0.299)+(rgba[1]*0.587)+(rgba[2]*0.114)>186) { return 'black'; } else { return 'white'; } } var div = document.createElement('div'); div.style.height = '100vh'; document.body.appendChild(div); div.addEventListener('mousemove', (event)=>{ var x = event.clientX; var y = event.clientY; div.textContent = `${x}, ${y}`; div.style.backgroundColor = `rgba(${x},${y},100,100)`; div.style.color = getTextColor(div.style.backgroundColor); });

 .background { height: 100vh; background: url("https://i.pinimg.com/originals/bc/a3/2d/bca32d5cdfabeaeb4faeb12bff160524.jpg"); }

 <div class="background">Background example</div>

Answer 1

解釋

---

下面是一個示例，展示了如何使用 canvas 以 1x1 像素的比例獲取平均值。 從那里我們設置 header 背景，然后根據上述平均值的亮度應用淺色或深色 class。

筆記

---

注意 1：有一些額外的代碼可以更容易地可視化，這是注釋並且可以刪除。

注意 2：以下代碼不保證在所有瀏覽器上運行。 請參閱此線程以獲取更多詳細信息。

例子

 /* THE TOGGLE ACTION */ /* The urls for toggling between */ const urlLight = 'https://images.unsplash.com/photo-1484503793037-5c9644d6a80a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=930&q=80'; const urlDark = 'https://images.unsplash.com/photo-1517999144091-3d9dca6d1e43?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=627&q=80'; let currentUrl = urlLight; const toggle = document.getElementById('toggle'); toggle.addEventListener("click", function() { if (currentUrl === urlLight) { currentUrl = urlDark; } else { currentUrl = urlLight; } getImageBrightness(currentUrl, function(brightness) { const header = document.getElementById("header"); header.style.backgroundImage = `url(${currentUrl}`; header.classList.remove("dark"); header.classList.remove("light"); console.log(brightness); if (brightness > 225 / 2) { header.classList.toggle("dark"); } else { header.classList.toggle("light"); } }); }); /* Important get brightness code */ function getImageBrightness(imageSrc, callback) { var img = document.createElement("img"); img.src = imageSrc; img.style.display = "none"; img.crossOrigin = "anonymous"; document.body.appendChild(img); var colorSum = 0; img.onload = function() { // create canvas var canvas = document.createElement("canvas"); canvas.width = this.width; canvas.height = this.height; var ctx = canvas.getContext("2d"); ctx.drawImage(this, 0, 0); var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); var data = imageData.data; var r, g, b, avg; for (var x = 0, len = data.length; x < len; x += 4) { r = data[x]; g = data[x + 1]; b = data[x + 2]; avg = Math.floor((r + g + b) / 3); colorSum += avg; } var brightness = Math.floor(colorSum / (this.width * this.height)); callback(brightness); } } getImageBrightness(currentUrl, function(brightness) { const header = document.getElementById("header"); header.style.backgroundImage = `url(${currentUrl}`; header.classList.remove("dark"); header.classList.remove("light"); if (brightness > 225 / 2) { header.classList.toggle("dark"); } else { header.classList.toggle("light"); } });

 .dark { color: black; }.light { color: white; } * { text-align: center; } #header { padding: 2rem 0; font-size: 4rem; background-size: cover; margin-bottom: 1rem; background-position: center center; }

 <div id="header"> Header </div> <button id='toggle'> Toggle Background </button>