javascript - 是否有可能获得表情符号的主要颜色？

Question

我想要实现的是添加一个 text-shadow使用 text-shadow 的表情符号颜色是表情符号中最突出的颜色。

我知道有一些 JavaScript 库可以识别图像中最突出的颜色，但由于表情符号在技术上是文本，所以我不确定我将如何做，甚至根本不确定。

我会提供一些我已经尝试过的代码，但老实说，我什至不知道从哪里开始。

.emoji {
  text-shadow: 0px 0px 20px rgba(54, 169, 230, 0.65);
  padding: 3px 6px;
  font-size: 24px;
}

<span class="emoji">💎</span>

Answer 1

另一种不使用 text-shadow 的方法是复制表情符号，将其直接放在原始表情符号后面并对其进行模糊处理。

您可以直接在 HTML 中创建副本，或者如果使用 js 更方便，如下例所示。

var emoji = document.querySelector("#blur-me");
var copy = emoji.cloneNode(true);
copy.classList.remove("emoji");
emoji.appendChild(copy);

.emoji {
  padding: 3px 6px;
  font-size: 24px;
  position: relative;
  display: inline-block;
}

.emoji span {
  position: absolute;
  left: 6px;
  z-index: -1;
  filter: blur(10px);
}

<span class="emoji" id="blur-me">💎</span>