图片主色获取脚本rgbaster.js

607 查看

一、我想写一篇长篇小说

我想写一篇长篇小说,每天上下班地铁的几个小时写写。不过还没完全构思好。据说,人在实现伟大的计划之前最好不要跟别人讲,等大米差不多煮熟的时候,再普照四方。但是呢,一直憋在心里也慌得很,实在忍不住了,这里一吐为快,反正是个小嘎吱角的地方,吐个火星(星星之火)没人发现的,(*^__^*) 嘻嘻…… 我琢磨着,每周写一段,像周刊一样,写个10年,恩,差不多了。说不定会火,哈哈!!

二、rgbaster.js小介绍

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

如何使用?

如何让妹子为你下厨?首先,你得有一个厨房。同样的,要使用rgbaster.js,首先,你得先调用之:

然后,你得有个菜谱,知道该如何对妹子下手:

看来,这个妹子很好下手啊! 就一个方法,RGBaster.colors就可以了,第1个参数img可以是图片DOM也可以是图片的URL地址。后面就是可选参数,说到可选参数,不只success这一个,还有下面这几位兄弟:

paletteSize30, 则payload.palette就是个包含前30主要颜色值的数组。 exclude表示数组中的颜色不参与,剔除。例如,一个小龙女舞剑的图片,我们可能需要的是其舞剑的背景。但是,由于小龙女长年古墓,缺少阳光,面色白皙,加上总是一袭白衣,这大大的白色虽是主色,但却我们想要的,于是需要剔除。

success就是我们下厨的主要内容了,回调中的payload参数,包含,主色、次色以及调色板信息,绝对可以满足我们绝大多数的需求。

三、rgbaster.js小使用

下面看看妹子是如何下厨的。 您可以狠狠地点击这里:rgbaster.js与slide图片背景变变变demo 点击下面的四个圆点按钮走起:

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

相关JS代码为:

powerSwitch自己的万能切换插件中的方法,onSwitch是slide切换的回调,回调执行的就是rgbaster.jsRGBaster.colors方法,不考虑黑白两色,让box的背景色变成图片的主色,哈,很简单吧~

四、rgbaster.js的使用限制

1. 浏览器支持 由于使用Canvas的getImageData获得图片颜色信息(我之前的box-shadow图片生成工具也是用的这个), 因此,需要IE9+浏览器支持;同时,使用了XMLHttpRequest2.0, 貌似要IE10+可以畅快使用(据说IE8/IE9可以使用XDomainRequest对象实现类似功能,未研究,具体不详);

2. 跨域限制 XMLHttpRequest2.0获得图片数据,本地数据自然无障碍,对于跨域的数据,需要设置。宗旨就是,控制Access-Control-Allow-Origin,例如,你希望你站点的图片只有我站点可以访问,则想办法通过设置,使得请求信息中包含:

如果是所有站点,则:

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

五、我想写一篇长篇小说

//zxx: 接开头。 面向的群体是,应该是同龄人。走搞笑风格还是严肃风格,应该带有搞笑,主旨但高大上。最好带点热血。恩~~ 还有就是………………哎呀呀,好像很难的样子……按照这个节奏,估计还要再构思个半年~~ 在此之前,还是多盘出点技术文章吧。