获取图片预加载主色

前端之家收集整理的这篇文章主要介绍了获取图片预加载主色前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我们打开谷歌访问的时候,发现谷歌图片加载之前会先预加载出来图片主题颜色,当时就觉得很有意思,然后去研究了下。
当然他们这个是后端给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>