我们打开谷歌访问的时候，发现谷歌图片加载之前会先预加载出来图片的主题颜色，当时就觉得很有意思，然后去研究了下。
当然他们这个是后端给json的时候给了个颜色代码，暂且不提，但如果前端来做的话，也是有方法的，张鑫旭大神的博客里就记载的有，是一个叫rgbaster.js的玩意儿，具体用法我先给贴下来了。
rgbaster.js的内容是：
!function(n,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):n.RGBaster=t()}(this,function(){"use strict";var t=function(n,o){var u=new Image,t=n.src||n;"data:"!==t.substring(0,5)&&(u.crossOrigin="Anonymous"),u.onload=function(){var n,t,e,r=(n=u.width,t=u.height,(e=document.createElement("canvas")).setAttribute("width",n),e.setAttribute("height",t),e.getContext("2d"));r.drawImage(u,0);var i=r.getImageData(0,u.width,u.height);o&&o(i.data)},u.src=t},s=function(n){return["rgb(",n,")"].join("")},f=function(n,t){return{name:s(n),count:t}},n={};return n.colors=function(n,u){var a=(u=u||{}).exclude||[],c=u.paletteSize||10;t(n,function(n){for(var t={},e="",r=[],i=0;it)return n.slice(0,t);for(var e=n.length-1;e 具体html和js的使用代码是：
<Meta charset="UTF-8">
<a href="/tag/huoqu/" target="_blank" class="keywords">获取</a><a href="/tag/tupian/" target="_blank" class="keywords">图片</a><a href="/tag/zhuti/" target="_blank" class="keywords">主题</a>色脚本扩展的完整的示例@H_<a href="/tag/403/" target="_blank" class="keywords">403</a>_15@
<script src="./rgbaster.js"></script>
</head>
<body>
<div id="<a href="/tag/Box/" target="_blank" class="keywords">Box</a>" style="width:500px;height: 500px;">
<img src="mm4.jpg" alt="" id="image">
</div>
<script type="text/javascript">
var img = document.getElementById('image');
var <a href="/tag/Box/" target="_blank" class="keywords">Box</a>=document.getElementById('<a href="/tag/Box/" target="_blank" class="keywords">Box</a>');
RGBaster.colors(img,{
// return up to 30 top colors from the palette 从调色板返回最多30个顶级颜色
paletteSize: 30,// don't count white
//排除 白色
exclude: ['rgb(255,255,255)'],// do something when done
//<a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>成功之后
success: function(payload) {
<a href="/tag/Box/" target="_blank" class="keywords">Box</a>.style.background=payload.dominant;
console.log('Dominant color:',payload.dominant);
console.log('Secondary color:',payload.secondary);
console.log('Palette:',payload.palette);
}
})
</script>
</body>
</html></code></pre>
<p>剩下的，<a href="/tag/xiaoguo/" target="_blank" class="keywords">效果</a>一出，大家一目了然，就是这么简单。</p></div>
<div class="topcard-tags"><a href="/tag/huoqutupianyujiazaizhuse/" class="tag_link" target="_blank">获取图片预加载主色</a></div>
<ul class="list-group">
<li class="list-group-item"><a href="/note/413453.html" title="强制删除不可删除文件">上一篇：强制删除不可删除文件</a><a href="/note/413451.html" title="transform 之后的坑 scale rotate draggable" class="text-muted pull-right">下一篇：transform 之后的坑 scale rotate</a>
</li>
</ul>
</div>
</div>
</div>
<!-- row end -->
<div class="row row-sm">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="card">
<ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-4605373693034661"
data-ad-slot="9144498553"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
</div>
</div>
<div class="row row-sm">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="card">
<div class="title"><h1>猜你在找的程序笔记相关文章</h1></div>
<div class="list_con">
<a href="/note/996782.html" title="解决Connection to `ssl://pecl.php.net:443' failed"><div class="title">解决Connection to `ssl://pecl.php.net:443' failed</div>
<div class="summary">这个问题和curl无法访问https资源是类似的,现在curl可以访问https资源,但是使用pecl安装扩...</div>
<time class="summary">作者：前端之家 时间：2024-09-28</time>
</a>
</div>
<div class="list_con">
<a href="/note/995756.html" title="Chrome无法显示全网址怎么处理？Chrome系浏览器显示完整地址"><div class="title">Chrome无法显示全网址怎么处理？Chrome系浏览器显示完整地址</div>
<div class="summary">在浏览器输入chrome://flags/回车，找到Omnibox UI Hide Steady-State URL Scheme and Tri...</div>
<time class="summary">作者：前端之家 时间：2024-09-28</time>
</a>
</div>
<div class="list_con">
<a href="/note/995699.html" title="Ubuntu 18.04安装arm-linux-gcc交叉编译器的两种方法(附下载地址)"><div class="title">Ubuntu 18.04安装arm-linux-gcc交叉编译器的两种方法(附下载地址)</div>
<div class="summary">方法一： 我们都知道Ubuntu有一个专门用来安装软件的工具apt，我们可以用它来全自动安装ar...</div>
<time class="summary">作者：前端之家 时间：2024-09-28</time>
</a>
</div>
<div class="list_con">
<a href="/note/995698.html" title="VCODE修改控制台编码格式解决输出乱码问题"><img class="lazy" src="/images/np.jpg" data-original="/res/2021/01-30/23/ca5ea199cbb2254cc60030c967062f11.png" title="" width="160" height="90" style="float:right;margin-left:30px;display:none;" /><div class="title">VCODE修改控制台编码格式解决输出乱码问题</div>
<div class="summary">中文的windows下的cmd默认使用GBK的编码，敲代码时，页面使用的是UTF-8(65001),而powershe...</div>
<time class="summary">作者：前端之家 时间：2024-09-28</time>
</a>
</div>
<div class="list_con">
<a href="/note/995697.html" title="编译busybox错误汇总"><div class="title">编译busybox错误汇总</div>
<div class="summary">提示错误: arm-linux-gcc:Command not found PATH里有/usr/oca/arm/bin，但是make的时候，...</div>
<time class="summary">作者：前端之家 时间：2024-09-28</time>
</a>
</div>
<div style="border-bottom: 1px solid #f4f4f4;margin-top:20px;">
<ins class="adsbygoogle"
style="display:block"
data-ad-format="fluid"
data-ad-layout-key="-fr-2o+fp-dx-wx"
data-ad-client="ca-pub-4605373693034661"
data-ad-slot="4561116489"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div><div class="list_con">
<a href="/note/995365.html" title="Bundle SPFX 文件时报错 “The build failed because a task wrote output to stderr.”的解决办法"><img class="lazy" src="/images/np.jpg" data-original="/res/2021/01-26/08/053c5912c7938467781334a0f01e31c5.png" title="" width="160" height="90" style="float:right;margin-left:30px;display:none;" /><div class="title">Bundle SPFX 文件时报错 “The build failed because a task wrote output to stderr.”的解决办法</div>
<div class="summary">在使用gulp bundle --ship对spfx项目进行编译的时候，出现“The build failed because a t...</div>
<time class="summary">作者：前端之家 时间：2024-09-28</time>
</a>
</div>
<div class="list_con">
<a href="/note/995364.html" title="处理Graph API .NET SDK 的分页请求"><div class="title">处理Graph API .NET SDK 的分页请求</div>
<div class="summary">当使用Graph API进行查询的时候，如果结果过多，Graph API会对返回结果进行分页。 例如，下...</div>
<time class="summary">作者：前端之家 时间：2024-09-28</time>
</a>
</div>
<div class="list_con">
<a href="/note/995363.html" title="自动化部署SharePoint Online modern site的注意事项"><div class="title">自动化部署SharePoint Online modern site的注意事项</div>
<div class="summary">整个流程是用户在SharePoint site里发起创建新team site的请求，管理员审核通过后，Power ...</div>
<time class="summary">作者：前端之家 时间：2024-09-28</time>
</a>
</div>
<div class="list_con">
<a href="/note/995207.html" title="安装Office套件和Visio可能遇到的问题"><img class="lazy" src="/images/np.jpg" data-original="/res/2021/01-14/08/c819a1948189ca9fdb205469b7766211.png" title="" width="160" height="90" style="float:right;margin-left:30px;display:none;" /><div class="title">安装Office套件和Visio可能遇到的问题</div>
<div class="summary">相关描述 安装可能出现的问题： 电脑系统： win10 教育版 本次安装版本为： Office 2016 c...</div>
<time class="summary">作者：前端之家 时间：2024-09-28</time>
</a>
</div>
<div class="list_con">
<a href="/note/995206.html" title="打印机相关整理"><img class="lazy" src="/images/np.jpg" data-original="/res/2021/01-14/08/d31d7c1325ae0dec0ce3910ed178d137.png" title="" width="160" height="90" style="float:right;margin-left:30px;display:none;" /><div class="title">打印机相关整理</div>
<div class="summary">佳能打印机清零 版本号：佳能 ip2788 出现问题：错误代码：5B00 原因：打印机计数满，需要...</div>
<time class="summary">作者：前端之家 时间：2024-09-28</time>
</a>
</div>
<div style="border-bottom: 1px solid #f4f4f4;margin-top:20px;">
<ins class="adsbygoogle"
style="display:block"
data-ad-format="fluid"
data-ad-layout-key="-fr-2o+fp-dx-wx"
data-ad-client="ca-pub-4605373693034661"
data-ad-slot="4561116489"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div></div>
</div>
</div>
</div>
<!-- left end-->
<!-- right -->
<div class="col-sm-12 col-md-12 col-lg-3">
<!-- row -->
<div class="row row-sm">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="card">
<label class="main-content-label ">编程分类</label>
<div class="cate mt-20"><a href="/note/" title="程序笔记">程序笔记</a><a href="/seo/" title="SEO">SEO</a><div class="clearfix"></div>
</div>
</div>
</div>
</div>
<!-- row end -->
<!-- row -->
<div class="row row-sm">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="card">
<!-- f2er-rightads -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-4605373693034661"
data-ad-slot="7756441254"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
</div>
<!-- row end -->
<!-- row -->
<div class="row row-sm">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="card">
<label class="main-content-label ">最新文章</label>
<ul class="n-list"><li><a href="/note/996782.html" title="解决Connection to `ssl://pecl.php.net:443' failed" target="_blank">• 解决Connection to `ssl:/</a></li>
<li><a href="/note/995756.html" title="Chrome无法显示全网址怎么处理？Chrome系浏览器显示完整地址" target="_blank">• Chrome无法显示全网址怎么</a></li>
<li><a href="/note/995699.html" title="Ubuntu 18.04安装arm-linux-gcc交叉编译器的两种方法(附下载地址)" target="_blank">• Ubuntu 18.04安装arm-linu</a></li>
<li><a href="/note/995698.html" title="VCODE修改控制台编码格式解决输出乱码问题" target="_blank">• VCODE修改控制台编码格式解</a></li>
<li><a href="/note/995697.html" title="编译busybox错误汇总" target="_blank">• 编译busybox错误汇总</a></li>
<li><a href="/note/995366.html" title="Graph Explore的使用介绍" target="_blank">• Graph Explore的使用介绍</a></li>
<li><a href="/note/995365.html" title="Bundle SPFX 文件时报错 “The build failed because a task wrote output to stderr.”的解决办法" target="_blank">• Bundle SPFX 文件时报错 “</a></li>
<li><a href="/note/995364.html" title="处理Graph API .NET SDK 的分页请求" target="_blank">• 处理Graph API .NET SDK 的</a></li>
<li><a href="/note/995363.html" title="自动化部署SharePoint Online modern site的注意事项" target="_blank">• 自动化部署SharePoint Onl</a></li>
<li><a href="/note/995207.html" title="安装Office套件和Visio可能遇到的问题" target="_blank">• 安装Office套件和Visio可能</a></li>
</ul>
</div>
</div>
</div>
<!-- row end -->
<!-- row -->
<div class="row row-sm">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="card">
<label class="main-content-label ">热门标签
<span class="pull-right tx-12">
<a href="/all" target="_blank">更多 ►</a></span>
</label>
<div class="topcard-tags"><a href="/tag/wanzhengdizhi/" title="完整地址" target="_blank">完整地址</a><a href="/tag/quanwangzhi/" title="全网址" target="_blank">全网址</a><a href="/tag/getattribute/" title=".get_attribute" target="_blank">.get_attribu</a><a href="/tag/GraphExplore/" title="Graph Explore" target="_blank">Graph Explor</a><a href="/tag/wangzhanseo/" title="网站seo" target="_blank">网站seo</a><a href="/tag/minglingbaocuo/" title="命令报错" target="_blank">命令报错</a><a href="/tag/tihuanphp7/" title="替换php7" target="_blank">替换php7</a><a href="/tag/caixiejiyi/" title="采撷记（一）" target="_blank">采撷记（一）</a><a href="/tag/WTF/" title="WTF?" target="_blank">WTF?</a><a href="/tag/HOMEBREWGITHUBAPITOKEN/" title="HOMEBREW_GITHUB_API_TOKEN" target="_blank">HOMEBREW_GIT</a><a href="/tag/FormDataduixiangfasongwenjian/" title="FormData对象发送文件" target="_blank">FormData对象</a><a href="/tag/shujumoxingdeguanlianshanchu/" title="数据模型的关联删除" target="_blank">数据模型的关</a><a href="/tag/yilaiguanxichaxun/" title="依赖关系查询" target="_blank">依赖关系查询</a><a href="/tag/iOSkaifachangyonghong/" title="iOS开发常用宏" target="_blank">iOS开发常用宏</a><a href="/tag/utiljschangyongjsgongnengdabao/" title="util.js----常用js功能打包" target="_blank">util.js----常</a><a href="/tag/UILabelshezhiwenzixingjianjubingjuzhongxianshi/" title="UILabel 设置文字行间距并居中显示" target="_blank">UILabel 设置</a><a href="/tag/reverseadminpy/" title="reverseadmin.py" target="_blank">reverseadmin</a><a href="/tag/phppipeizhongwen/" title="php匹配中文" target="_blank">php匹配中文</a><a href="/tag/ngconf/" title="ngconf" target="_blank">ngconf</a><a href="/tag/dangqianqiantishiziduanleixingyizhi/" title="当前前提是字段类型一致)" target="_blank">当前前提是字</a><a href="/tag/mongozhixingbijiaochaxunziduanzhijiandebijiao/" title="mongo执行比较查询(字段之间的比较" target="_blank">mongo执行比较</a><a href="/tag/mongoshixianziwendangderenyichaxun/" title="mongo实现子文档的任意查询" target="_blank">mongo实现子文</a><a href="/tag/huanyongSublimeText3bingjiejuebianmawenti/" title="--换用Sublime Text3并解决编码问题" target="_blank">--换用Sublim</a><a href="/tag/jsmodule/" title="js module" target="_blank">js module</a><a href="/tag/UseLaraveltoDownloadtableasCSV/" title="Use Laravel to Download table as CSV" target="_blank">Use Laravel </a><a href="/tag/throttleshixian/" title="throttle 实现" target="_blank">throttle 实现</a><a href="/tag/YII2chengxuneihuoquActiveRecordsuozhixingdeSQLyuju/" title="YII2 程序内获取 ActiveRecord 所执行的 SQL 语句" target="_blank">YII2 程序内获</a><a href="/tag/YII2MongoDBActiveRecordgtexample/" title="YII2 MongoDB ActiveRecord $gt example" target="_blank">YII2 MongoDB</a><a href="/tag/jsgenjupianyijisuanriqi/" title="js根据偏移计算日期" target="_blank">js根据偏移计</a><a href="/tag/Linuxxiazhongyaodemulu/" title="--Linux下重要的目录" target="_blank">--Linux下重要</a></div>
</div>
</div>
</div>
<!-- row end -->
<!-- row -->
<div class="row row-sm">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="card">
<!-- f2er-rightads -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-4605373693034661"
data-ad-slot="7756441254"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
</div>
<!-- row end -->
</div>
<!-- right end -->
</div>
</div>
<footer id="footer">
<div class="container">
<div class="row hidden-xs">
<dl class="col-sm-6 site-link">
<dt>最近更新</dt><dd><a href="/win11/1005328.html" title="小米手机重装系统价格多少?专业维修服务详解" target="_blank">· 小米手机重装系统价格多少?专业维修服务详解</a><span class="text-muted pull-right">02-05</span></dd>
<dd><a href="/win11/1005327.html" title="手把手教你重装电脑系统,让你的电脑焕然一新!" target="_blank">· 手把手教你重装电脑系统,让你的电脑焕然一新!</a><span class="text-muted pull-right">02-05</span></dd>
<dd><a href="/win11/1005326.html" title="教你一步步重装XP系统,让你的电脑重获新生" target="_blank">· 教你一步步重装XP系统,让你的电脑重获新生</a><span class="text-muted pull-right">02-05</span></dd>
<dd><a href="/win11/1005325.html" title="从备份到上网:一步步教你重装电脑系统" target="_blank">· 从备份到上网:一步步教你重装电脑系统</a><span class="text-muted pull-right">02-05</span></dd>
<dd><a href="/win11/1005324.html" title="Sony笔记本电脑一键重装系统详细图文教程" target="_blank">· Sony笔记本电脑一键重装系统详细图文教程</a><span class="text-muted pull-right">02-05</span></dd>
<dd><a href="/win11/1005323.html" title="Lenovo笔记本重装系统超详细教程，小白也能轻松上手" target="_blank">· Lenovo笔记本重装系统超详细教程，小白也能轻松...</a><span class="text-muted pull-right">02-05</span></dd>
<dd><a href="/win11/1005322.html" title="联想笔记本一键重装Win10系统详细教程" target="_blank">· 联想笔记本一键重装Win10系统详细教程</a><span class="text-muted pull-right">02-05</span></dd>
<dd><a href="/win11/1005321.html" title="电脑系统故障无需愁,专业维修店帮你重装旧貌换新颜" target="_blank">· 电脑系统故障无需愁,专业维修店帮你重装旧貌换新...</a><span class="text-muted pull-right">02-05</span></dd>
<dd><a href="/win11/1005320.html" title="联想笔记本一键重装Win10系统图文教程，小白也能轻松搞定！" target="_blank">· 联想笔记本一键重装Win10系统图文教程，小白也能...</a><span class="text-muted pull-right">02-05</span></dd>
<dd><a href="/win11/1005319.html" title="笔记本重装系统图文教程：从光盘启动一步到位" target="_blank">· 笔记本重装系统图文教程：从光盘启动一步到位</a><span class="text-muted pull-right">02-05</span></dd>
</dl>
<dl class="col-sm-4 site-link">
<dt>好站推荐</dt><dd> <a href="https://www.runoob.com" title="菜鸟教程(www.runoob.com)提供了编程的基础技术教程, 介绍了HTML、CSS、Javascript、Python，Java，Ruby，C，PHP , MySQL等各种编程语言的基础知识。 同时本站中也提供了大量的在线实例，通过实例，您可以更好的学习编程。" target="_blank">菜鸟教程</a></dd><dd> <a href="https://www.jb51.cc" title="编程之家(www.jb51.cc)是成立于2017年面向全球中文开发者的技术内容分享平台。提供编程导航、编程问答、编程博文、编程百科、编程教程、编程工具、编程实例等开发者最需要的编程技术内容与开发工具支持，与你一起学习编程，相信编程改变未来！" target="_blank">编程之家</a></dd><dd> <a href="" title="前端之家 f2er.com 前端开发人员所需学习知识手册。" target="_blank">前端之家</a></dd></dl>
<dl class="col-sm-2 site-link">
<dt>商务合作</dt>
<dd><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=76874919&site=qq&menu=yes">联系我们</a></dd>
</dl>
</div>
<div class="copyright">
Copyright © 2019 前端之家. 当前版本 V7.0.16<br>
<span class="ml5">前端之家 版权所有
<a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">闽ICP备13020303号-10</a></span>
</div>
</div>
</footer>
<script type="text/javascript" src="/js/base.js"></script>
</body>
</html>