获取图片预加载主色

发布时间：2020-12-15 03:28:34 所属栏目：C语言来源：网络整理

导读：我们打开谷歌访问的时候，发现谷歌图片加载之前会先预加载出来图片的主题颜色，当时就觉得很有意思，然后去研究了下。当然他们这个是后端给json的时候给了个颜色代码，暂且不提，但如果前端来做的话，也是有方法的，张鑫旭大神的博客里就记载的有，是一个叫

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

    获取图片主题色脚本扩展的完整的示例
    


剩下的，效果一出，大家一目了然，就是这么简单。
                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!