tumblr上的顏色小偷

我正在嘗試創建一個基本顯示圖像的tumblr頁面。該結構是這樣的：tumblr上的顏色小偷

<div id="slider"> 
     <ul id="slidercont"> 
      <li class="item"> 
      <div class="caption">CAPTION</div> 
      <img src="http://static.tumblr.com/..."> 
      </li> 
      <li class="item"> 
      <div class="caption">CAPTION</div> 
      <img src="http://static.tumblr.com/..."> 
      </li> 
     </ul> 
    </div>

我不知道這是有關我的問題，但爲了以防萬一，我使用所謂的FreeWall顯示列表作爲網格中的jQuery插件，這些選項：

<script type="text/javascript"> 
     $(function() { 
     var wall = new freewall("#slidercont"); 
     wall.reset({ 
      selector: '.item', 
      cellH:190, 
      cellW:2, 
      gutterY: 6, 
      gutterX: 6, 
      fixSize: 1, 
      onResize: function() { 
       wall.fitHeight(); 
      }, 
     }); 
     wall.fitHeight(); 
     $(window).trigger("resize"); 
     }); 
    </script>

我想獲得每幅圖像的主導顏色，並將其應用到每個字幕div的底部邊框（當你將鼠標懸停在圖片裏面只有可見）。我嘗試使用名爲Color-Thief的腳本，但我無法使其工作。

我對jquery和javascript幾乎一無所知，所以我非常感謝如果有人能告訴我一種方法來做我想做的事，如果有的話。
謝謝！

來源

2013-12-19 user3113004

顯示如何包含javascript源代碼。此外，請展示您使用ColorThief的最新嘗試。漂亮的發現順便說一句，你應該把它添加到Stumble-Upon。 –

http://stackoverflow.com/questions/2541481/get-average-color-of-image-via-javascript在「平均像素顏色」上有很多答案 – Shanimal

其中一個答案實際上提到了ColorThief主頁。其中有非常基本的用法和演示代碼。 https://github.com/lokesh/color-thief – Shanimal

我不知道你打算如何從tumblr獲取圖像，但彩色小偷將無法獲取圖像數據跨域。所以你必須弄清楚如何在託管代碼的域中提供tumblr圖片。

否則...下面介紹如何使用它。 http://jsbin.com/umiworeW/1/edit?html,output

很酷的工具。

來源

2013-12-19 20:58:38 Shanimal

那麼，我必須通過[tumblr的靜態文件上傳]（http://www.tumblr.com/themes/upload_static_file）上傳圖片和腳本，然後在我的代碼中添加鏈接。鏈接都開始相同：http：//static.tumblr.com/...所以我不知道，這是問題嗎？ – user3113004

對於笑臉，我使用jsbin鏈接將我的tumblr帳戶中的圖像網址之一插入到源代碼中，以查看它是否有效。他們沒有一個友好的CORS政策允許它。所以控制檯返回一個錯誤「Uncaught SecurityError：'CanvasRenderingContext2D'執行'getImageData'失敗：畫布已被交叉源數據污染。」 – Shanimal

可能有服務器端解決方案，但我不太瞭解tumblr api。 – Shanimal

tumblr上的顏色小偷

回答

相關問題