Colour.js的Colorthief.js - 查找導致onload事件的圖像的主要顏色

Question

我正在用Polymer創建一個材質Web應用程序，並且我想要獲取頁面上圖像的主要和次要顏色。我正在使用on-click事件來觸發一個從圖像中檢索數據並獲取顏色的函數。問題是，該功能工作正常，除了實際上指的是圖像 - ColorThief似乎無法'看到'圖像。這裏是我的代碼：

圖片：

<img style="opacity: 0;position: absolute;top:-100px;left:-100px;" width="1" height="1" data-albumno="{{i}}" src="{{root}}{{a.image}}" on-load="{{colorthis}}"> 

而且colorthis功能：

Polymer('paper-albums', { 
    colorthis: function(event, detail, sender) { 
     var i = sender.dataset.albumno, 
       cT = new ColorThief(), 
       pallete = cT.getPalette(event.target, 2); 

     //code to handle the pallete// 
    } 
});  

我相信event.target是問題所在;我也嘗試過使用sender，但那也不起作用。我會在這裏提到什麼來表示圖像？

我也嘗試在Javascript中創建圖像，但沒有將其放入DOM，但無濟於事。這似乎是一個簡單的任務，但事實證明它要複雜得多（至少對我來說）。有可能是我錯過了一個更好的方法。

Answer 1

據我所知，你的代碼應該如圖所示。

下面是聚合物1.0實況例如：http://jsbin.com/vedowo/edit?html,output

下面是示例代碼：

<template> 
    <img on-load="load" src="some-image.png"> 
</template> 
<script> 
    Polymer({ 
    is: 'x-example', 
    load: function(e) { 
     console.log(new ColorThief().getPalette(e.target, 2)); 
    } 
    }); 
</script>