图片主色获取脚本rgbaster.js小介绍小使用

标签: js实例 canvas getImageData RGB rgbaster.js | 发表时间:2014-08-12 18:31 | 作者:张 鑫旭
出处:http://www.zhangxinxu.com/wordpress

by zhangxinxu from http://www.zhangxinxu.com
本文地址: http://www.zhangxinxu.com/wordpress/?p=4296

一、我想写一篇长篇小说

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

我琢磨着,每周写一段,像周刊一样,写个10年,恩,差不多了。说不定会火,哈哈!!

二、rgbaster.js小介绍

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

rgbaster.js的Github项目地址是: https://github.com/briangonzalez/rgbaster.js

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

<script 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);
  }
});

看来,这个妹子很好下手啊!

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

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

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

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

三、rgbaster.js小使用

下面看看妹子是如何下厨的。

您可以狠狠地点击这里: rgbaster.js与slide图片背景变变变demo

点击下面的四个圆点按钮走起:
4个圆点按钮

可以看到,图片slide的同时,容器的背景色也随着一起改变,而容器的背景色就是美女图片的主色。

截个图让大家感受下:
demo截图某效果

相关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自己的万能切换插件中的方法, 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,例如,你希望你站点的图片只有我站点可以访问,则想办法通过设置,使得请求信息中包含:

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

如果是所有站点,则:

Access-Control-Allow-Origin: *

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

五、我想写一篇长篇小说

//zxx: 接开头。

面向的群体是,应该是同龄人。走搞笑风格还是严肃风格,应该带有搞笑,主旨但高大上。最好带点热血。恩~~

还有就是………………哎呀呀,好像很难的样子……按照这个节奏,估计还要再构思个半年~~

在此之前,还是多盘出点技术文章吧。

以上~~

本文为原创文章,会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,避免陈旧错误知识的误导,同时有更好的阅读体验。
本文地址: http://www.zhangxinxu.com/wordpress/?p=4296

(本篇完)

有话要说?点击 这里发表评论。

相关 [图片 脚本 rgbaster] 推荐:

查看京东的产品价格历史图片脚本

- 万俟尘 - 七星庐
前几天在Twitter上得知这个网站,可以看到囧东这货的历史波动. 从而可以看出价格现在坑爹不坑爹. 一般来说把地址http://www.360buy.com/product/数字.html中的buy,换成444就打开就看到了,但是发现图书和音像的地址分别使用book.360buy.com和mvd.360buy.com,还得多打几个字符.

图片主色获取脚本rgbaster.js小介绍小使用

- - 张鑫旭-鑫空间-鑫生活
本文地址: http://www.zhangxinxu.com/wordpress/?p=4296. 我想写一篇长篇小说,每天上下班地铁的几个小时写写. 据说,人在实现伟大的计划之前最好不要跟别人讲,等大米差不多煮熟的时候,再普照四方. 但是呢,一直憋在心里也慌得很,实在忍不住了,这里一吐为快,反正是个小嘎吱角的地方,吐个火星(星星之火)没人发现的,(*^__^*) 嘻嘻…….

从 Google 搜索结果里移除 +1 按钮和图片预览的脚本

- Aaron Xu - 谷奥——探寻谷歌的奥秘
现在Google搜索结果页面的新版并非所有功能都很讨喜,于是诞生了这枚脚本. 有了它,你就不会再在Google搜索结果页面里看到几乎从来不会去点的Google +1按钮,以及特别特别烦人且会降低浏览速度的图片预览. 该脚本适用于所有Google域名,当然也包括Google.com.hk. 需要注意的是,如果你的好友对某个网站进行Google +1了,那么在搜索结果里还是会看到(好让你知道是否有人对某个脑残网站进行了Google +1,方便拒交之.

mysql backup 脚本

- - ITeye博客
网上备份脚本很多,但考虑都不周全. 保证创建备份文件只能是创建者跟root可以访问,其他用户没有权限,保证了数据库备份的安全. 上面脚本是负责备份的份数管理,. 已有 0 人发表留言,猛击->> 这里<<-参与讨论. —软件人才免语言低担保 赴美带薪读研.

RMAN 备份脚本

- - CSDN博客数据库推荐文章
RMAN冷备份、一致性备份脚本. RMAN热备份、非一致性备份脚本. rman名称不允许重复,%U肯定不重复. %D 位于该月中的第几天 (DD). %M 位于该年中的第几月 (MM). %F 一个基于DBID 唯一的名称,这个格式的形式为c-IIIIIIIIII-YYYYMMDD-QQ,. %d 数据库名称其中IIIIIIIIII 为该数据库的DBID,YYYYMMDD 为日期,QQ 是一个1-256 的序列.

CSS 溢出检测脚本

- Public - 陈成的博客
按我的理解,CSS Bug 包含:. 内容 Bug (即运营填入内容或数据库读取内容后出现的 Bug). 其中兼容性 Bug 通常在开发阶段就能解决,而内容 Bug 通常被我们忽略. 比如忘记对文字设置 overflow: hidden;比如忘记对图片设置宽高;等. 所以,为自动化这块的测试工作,我写了个 简单的脚本 ,功能有二:.

在脚本中使用 trap

- jiaosq - IBM developerWorks 中国 : 文档库
要使脚本具有合理的健壮性,需要满足的条件之一就是能够清除强制终止后留下的任何临时日志或进程. 另一项需要考虑的因素是,在收到来自用户的中断后,应当采取哪些相应措施. 通过使用 shell 内置 trap 命令和记录器 (logger) 工具,这些工具有助于提高脚本在被强制终止时的健壮性. 在本文中,我将演示使用 trap 和记录器的方法.

Javascipt脚本调试(Javascript debugging)

- - 博客园_首页
根据 CNZZ数据中心对国内主流浏览器的统计分析,2012年3月国产浏览器中360安全浏览器、搜狗高速浏览器和傲游浏览器的使用率分别为24.39%、7.37%、1.75%;国外浏览器中微软IE浏览器、谷歌Chrome浏览器及苹果Safari浏览器的使用率分别为53.40%、3.21%、2.22%.

Linux下自动FTP脚本

- - ITeye博客
前面写了一个Windows下自动FTP的脚本:. 今天新增Linux下的简单脚本,还待优化. 已有 0 人发表留言,猛击->> 这里<<-参与讨论. —软件人才免语言低担保 赴美带薪读研.

进程监控脚本

- - CSDN博客架构设计推荐文章
# 如果不存在, 就重启他. 作者:ahyswang 发表于2014-10-11 22:34:45 原文链接. 阅读:111 评论:0 查看评论.