我可以使用JavaScript对特定像素的颜色进行采样吗？

Question

我目前正在开展一个可能同时拥有大量图片的项目。因此，我们的设计在图像底部放置了一个小字幕，作为叠加层，带有一个小::After箭头＆＃39;指向以下部分。

叠加层约为10％透明，因此部分图像只是可见，但根据图像，叠加层的颜色会有所不同 - 导致箭头不匹配。

请以此图片为例：

我有什么方法可以编程方式对“箭头”附近的一个像素或平均像素进行采样，以便它始终获得正确的颜色，并且看起来无缝？

编辑：

.overlay-with-arrow
{
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: rgba(62, 62, 62, 0.9);
    color: #FFF;
    text-align: center;
    font-family: Montserrat, SansSerif, serif;
    text-transform: uppercase;
}

.overlay-with-arrow::after
{
    content: "";
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid rgb(62, 62, 62);
    display: block;
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
    bottom: -20px;
    z-index: 1;
}