一、我想寫一篇長篇小說
我想寫一篇長篇小說，每天上下班地鐵的幾個小時寫寫。不過還沒完全構思好。據說，人在實現偉大的計劃之前最好不要跟別人講，等大米差不多煮熟的時候，再普照四方。但是呢，一直憋在心裡也慌得很，實在忍不住了，這裡一吐為快，反正是個小嘎吱角的地方，吐個火星（星星之火）沒人發現的，(*^__^*) 嘻嘻…… 我琢磨著，每週寫一段，像週刊一樣，寫個10年，恩，差不多了。說不定會火，哈哈！！
二、rgbaster.js小介紹
rgbaster.js是段小指令碼，可以獲得（具有訪問許可權的）圖片的主色，次色等，然後，發揮我們的創意，實現一些精彩的Web互動效果。 rgbaster.js的Github專案地址是：https://github.com/briangonzalez/rgbaster.js
如何使用？
如何讓妹子為你下廚？首先，你得有一個廚房。同樣的，要使用rgbaster.js，首先，你得先呼叫之：
|
1 |
<script src="http://rawgit.com/briangonzalez/rgbaster.js/master/rgbaster.js"></script> |
然後，你得有個菜譜，知道該如何對妹子下手：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
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這一個，還有下面這幾位兄弟：
|
1 2 3 4 5 6 7 |
RGBaster.colors(img, { paletteSize: 30, // 調色盤大小 exclude: [ 'rgb(255,255,255)' ], // 不包括白色 success: function(payload){ // 包含一些顏色資訊(payload)的回撥 } }) |
paletteSize為30, 則payload.palette就是個包含前30主要顏色值的陣列。 exclude表示陣列中的顏色不參與，剔除。例如，一個小龍女舞劍的圖片，我們可能需要的是其舞劍的背景。但是，由於小龍女長年古墓，缺少陽光，面色白皙，加上總是一襲白衣，這大大的白色雖是主色，但卻我們想要的，於是需要剔除。
success就是我們下廚的主要內容了，回撥中的payload引數，包含，主色、次色以及調色盤資訊，絕對可以滿足我們絕大多數的需求。
三、rgbaster.js小使用
下面看看妹子是如何下廚的。 您可以狠狠地點選這裡：rgbaster.js與slide圖片背景變變變demo 點選下面的四個圓點按鈕走起：
可以看到，圖片slide的同時，容器的背景色也隨著一起改變，而容器的背景色就是美女圖片的主色。 截個圖讓大家感受下：
相關JS程式碼為：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$("#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.js的RGBaster.colors方法，不考慮黑白兩色，讓box的背景色變成圖片的主色，哈，很簡單吧~
四、rgbaster.js的使用限制
1. 瀏覽器支援 由於使用Canvas的getImageData獲得圖片顏色資訊（我之前的box-shadow圖片生成工具也是用的這個）, 因此，需要IE9+瀏覽器支援；同時，使用了XMLHttpRequest2.0, 貌似要IE10+可以暢快使用（據說IE8/IE9可以使用XDomainRequest物件實現類似功能，未研究，具體不詳）；
2. 跨域限制 XMLHttpRequest2.0獲得圖片資料，本地資料自然無障礙，對於跨域的資料，需要設定。宗旨就是，控制Access-Control-Allow-Origin，例如，你希望你站點的圖片只有我站點可以訪問，則想辦法通過設定，使得請求資訊中包含：
|
1 |
Access-Control-Allow-Origin: http://www.zhangxinxu.com |
如果是所有站點，則：
|
1 |
Access-Control-Allow-Origin: * |
不同的伺服器設定是不一樣的，大家自行百之谷之。
五、我想寫一篇長篇小說
//zxx: 接開頭。 面向的群體是，應該是同齡人。走搞笑風格還是嚴肅風格，應該帶有搞笑，主旨但高大上。最好帶點熱血。恩~~ 還有就是………………哎呀呀，好像很難的樣子……按照這個節奏，估計還要再構思個半年~~ 在此之前，還是多盤出點技術文章吧。