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

Question

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

因此，如果用户越过恰好为 0x0000FF 的海洋，则文本将为 0xFFFF00。除非有人已经实现了该功能，否则让文本后面的每个像素对我来说似乎很疯狂。

这个存在吗？

Answer 1

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

基本上您绘制一个 HTML5 Canvas ，然后您需要在鼠标移动或发生其他事件时获取鼠标的位置。鉴于您在 Canvas 上，您可以使用 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 是颜色 channel ，A 是 Alpha channel (可见性)。

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

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

现在您已经有了颜色，您需要创建一个映射或函数来获取反色。根据您想要的效果，您将不得不稍微使用此功能。这里有两个执行此类操作的站点，您可以查看源代码以查看它们的功能并在需要时进行修改。

• Inverse Color Code Generator
• Inverse / Opposite Color Generator

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