最新消息:红方科技年末特惠:.com域名55元、云虚机五折优惠,买3年送2年,更有智能建站套餐等你来取!

图片主色获取 / 获取图片主色调

JS yinhexi 1138浏览 0评论

rgbaster.js是段小脚本,可以获得(具有访问权限的)图片的主色,次色等,然后,发挥我们的创意,实现一些精彩的Web交互效果。
rgbaster.js的Github项目地址是:https://github.com/briangonzalez/rgbaster.js

如何使用?

<script type=”text/javascript” src=”http://rawgit.com/briangonzalez/rgbaster.js/master/rgbaster.js”></script>

然后:

var img = document.getElementById('image'); // 或者var img = 'http://example.com/path-to-image.jpg'
RGBaster.colors(img, {
    success: function(payload) {
    // payload.dominant是主色,RGB形式表示
    // payload.secondary是次色,RGB形式表示
    // payload.palette是调色板,含多个主要颜色,数组
    console.log(payload.dominant);
    console.log(payload.secondary);
    console.log(payload.palette);
}});

第1个参数img可以是图片DOM也可以是图片的URL地址。后面就是可选参数,说到可选参数,不只success这一个,还有下面这几个:

RGBaster.colors(img, {
    paletteSize: 30, // 调色板大小
    exclude: [ 'rgb(255,255,255)' ],  // 不包括白色
    success: function(payload){
        // 包含一些颜色信息(payload)的回调
    }
})

paletteSize为30, 则payload.palette就是个包含前30主要颜色值的数组。
exclude表示数组中的颜色不参与,剔除。
success就是我们的主要内容了,回调中的payload参数,包含,主色、次色以及调色板信息,绝对可以满足我们绝大多数的需求。

rgbaster.js小使用
从四个圆点按钮走起:
1

可以看到,图片slide的同时,容器的背景色也随着一起改变,而容器的背景色就是美女图片的主色。 截个图让大家感受下:

2

相关JS代码为:

$("#index a").powerSwitch({
animation: "translate",
classAdd: "active",
onSwitch: function(target) {
    RGBaster.colors(target.find("img").get(0), {
        exclude: [ 'rgb(255,255,255)', 'rgb(0,0,0)' ],
        success: function(payload) {
        // 容器的背景色变成图片的主色 - payload.dominant
            $("#box").css("background-color", payload.dominant);
        }
    });
}}).eq(0).trigger("click");

powerSwitch为万能切换(https://github.com/zhangxinxu/powerSwitch)插件中的方法,onSwitch是slide切换的回调,回调执行的就是rgbaster.js的RGBaster.colors方法,不考虑黑白两色,让box的背景色变成图片的主色,哈,很简单吧~

rgbaster.js的使用限制
1. 浏览器支持 由于使用Canvas的getImageData获得图片颜色信息, 因此,需要IE9+浏览器支持;同时,使用了XMLHttpRequest2.0, 貌似要IE10+可以畅快使用(据说IE8/IE9可以使用XDomainRequest对象实现类似功能,未研究,具体不详);
2. 跨域限制 XMLHttpRequest2.0获得图片数据,本地数据自然无障碍,对于跨域的数据,需要设置。宗旨就是,控制Access-Control-Allow-Origin,例如,你希望你站点的图片只有我站点可以访问,则想办法通过设置,使得请求信息中包含:

Access-Control-Allow-Origin: http://www.***.com

如果是所有站点,则:

Access-Control-Allow-Origin: *

不同的服务器设置是不一样的,大家自行处之。

转载请注明:红方博客 » 图片主色获取 / 获取图片主色调