jquery - 根据其背后的颜色动态更改文本颜色（谷歌地图）

Question

我有 google maps api 作为我的全屏背景，可以由用户调整大小和移动。我希望我在地图上的文本动态更改为它背后颜色的反色。为了提高知名度。

因此，如果用户在恰好为 0x0000FF 的海洋上空，则文本将为 0xFFFF00。这对我来说似乎很疯狂，除非有人已经完成了该功能，否则将每个像素都放在文本后面。

这存在吗？

Answer 1

您可以在 HTML 5 中执行此操作。

基本上，您绘制一个 HTML5 画布，然后您需要在鼠标移动或发生其他事件时获取鼠标的位置。鉴于您在画布上，您可以使用它getImageData(x, y, width, height)来获取选择部分的像素数据。

例如：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var imgData=ctx.getImageData(10,10,50,50);

您返回的数据对象包含选择中每个像素的四个值，R、G、B 和 A。RGB 是颜色通道，A 是 Alpha 通道（可见性）。

下一步是将该值从 RGB 转换为 Hex，您可以使用一个简单的辅助函数来完成：

function rgbToHex(r, g, b) {
    return ((r << 16) | (g << 8) | b).toString(16);
}

现在您有了颜色，您需要创建一个映射或函数来获得反色。根据您想要的效果，您必须稍微使用此功能。这里有两个做这种事情的站点，您可以查看源代码以查看它们的功能并在需要时进行修改。

• 反色码生成器
• 反色/反色生成器

然后您可以使用 JQuery 设置文本的颜色。

Answer 2

这就是我所做的，我使用透明背景突出显示文本。我想这可能对你有用。