javascript - 获取网站的主要颜色

标签 javascript php html css

我正在制作自己的开始/书签页面作为一个爱好元素。

我想以干净的方式整理我的书签。我喜欢 Apple 通过请求元应用程序图标来完成此操作的方式,因此我制作了一个 JavaScript/Ajax/PHP 函数来完成这项工作。

enter image description here

但是,当一个网站的头部没有应用程序图标时,我想知道该网站使用哪种主要颜色,就像您在这里看到的那样

safari 上的苹果书签(背景有网站主色)

chrome 书签(底部的边框栏有网站的主色)

我搜索了 JavaScript 函数。没找到,这意味着我必须自己做一个。我认为这可以通过索引网站的多个 html 标签(如标题、a 标签、按钮等)来完成。

这些元素共有的颜色,应该是网站的主色。

对于如何实现这一目标,你们还有其他想法或建议吗?

最佳答案

我不知道 Apple 是怎么做到的,但如果他们为 Facebook 和 Gmail 等众所周知的网站使用预设颜色,那将是有意义的。

我不确定按照我的建议做是否有助于确定网站的主要颜色,但您可以(大致)做的是:

  • 获取网站 HTML。
  • 抓取 CSS 链接和样式标签。通过从您的响应创建 DOM 结构或使用解析器/正则表达式找到它。
  • 解析 css 并寻找您感兴趣的元素(您认为将包含其主要颜色的元素)
  • 计算所选元素中不同颜色的匹配数量

或者,您也可以在 <style> 中内联 css在您获取的页面上添加标签并将其放入您的 DOM 中,以通过访问 someEl.style.background 来确定颜色或其他。

这两种解决方案似乎都很老套,而且我不确定 javascript 能否胜任。也许您的服务器应该处理这个问题,或者使用合理的默认值就足够了(例如 Facebook 为蓝色,YouTube 为红色等)

关于javascript - 获取网站的主要颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33242563/

相关文章:

javascript - 从 Slack 自动打开链接

javascript - 将类型转换为不同类型时出现 typescript 错误

javascript - 保持纵横比

javascript - ibm bluemix nodejs 和 websockets 在客户端持续关闭

php - 在表单中选择类别后,从数据库中选择子类别

html - 如何验证文本区域中的模式匹配?

php - Twilio 不显示交付状态

php - 如何在查询中使用函数值

javascript - 在表单提交上更改/添加表单值

html - Iphone 文本位置问题