本篇文章给大家带来的内容是关于如何使用javascript获取图片主体背景色（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
我们打开谷歌访问的时候，发现谷歌图片加载之前会先预加载出来图片的主题颜色，当时就觉得很有意思，效果是这样
当然他们这个是后端给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,0);var i=r.getImageData(0,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<t-1;e++)n.push(f("0,0,0",0));return n}(function(n){var t=[];for(var e in n)t.push(f(e,n[e]));return t.sort(function(n,t){return t.count-n.count}),t}(t),c+1);u.success({dominant:o[0].name,secondary:o[1].name,palette:o.map(function(n){return n.name}).slice(1)})}})},n});
登录后复制
具体html和js的使用代码是：
获取图片主题色脚本扩展的完整的示例 var img = document.getElementById('image'); var box=document.getElementById('box'); 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 //获取成功之后 success: function(payload) { box.style.background=payload.dominant; console.log('Dominant color:', payload.dominant); console.log('Secondary color:', payload.secondary); console.log('Palette:', payload.palette); } })
登录后复制
剩下的，效果一出，大家一目了然，就是这么简单。
立即学习“Java免费学习笔记（深入）”；
以上就是如何使用javascript获取图片主体背景色（代码）的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2740395.html
