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

Getting the HEX code of a colour within an image on hover / click?

本文关键字：颜色十六进制代码图像获取悬停单击更新时间：2023-09-26

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

例如：

假设您在div 中包含图像。

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

假设这个随机图像有一个透明的背景，它的内容是蓝色、紫色和

黄色，我想在将鼠标悬停在蓝色上时将蓝色发回，如果我将鼠标悬停在黄色上，则与黄色相同，与紫色相同。

如果可能的话，那将非常有帮助。

您需要

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

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