javascript - 在悬停/单击时获取图像中颜色的十六进制代码？

Question

是否可以使用 jQuery 在不使用 canvas 元素的情况下获取网页上图像中像素的十六进制代码？请注意，我不想要背景颜色或包含它的 div 的颜色，我想要图像的实际颜色代码。

例如:

假设您在 div 中包含一张图片。

<div class="wrapper" style="background-color: red">
<img src="random/Image.png"/>
</div>

假设这个随机图像有一个透明的背景，它的内容是蓝色、紫色和黄色，当我将鼠标悬停在蓝色上时，我想将蓝色发回，如果我将鼠标悬停在黄色上，则与黄色相同，与紫色。

如果可能的话，那真的很有帮助。

Answer 1

您需要使用 canvas 来执行此操作，并且它必须是不违反同源策略的图像 URL。

将 getImageData() 与鼠标坐标一起使用，以获取每个像素的红色、绿色、蓝色和 alpha 值。然后您可以将其转换为十六进制字符串。