是否有可能获得表情符号的多数颜色？

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>

Answer 2

@Sol提出的另一个答案是使用一个属性来复制图标,而不需要JS.您还可以应用缩放转换以使效果更加明显:

.emoji {
  padding: 3px 6px;
  margin:0 5px;
  font-size: 24px;
  position: relative;
  display: inline-block;
  z-index: 0;
}

.emoji:before {
  content: attr(data-icon);
  position: absolute;
  z-index: -1;
  filter: blur(3px);
  transform: scale(1.5);
}

<span class="emoji" data-icon=""></span>
<span class="emoji" data-icon=""></span>
<span class="emoji" data-icon=""></span>
<span class="emoji" data-icon=""></span>