Colorthief.js con Polymer.js - trovare il colore principale dell'immagine che ha causato l'evento onload

Question

Sto costruendo un'app web materiale con Polymer e voglio ottenere i colori primari e secondari di un'immagine sulla pagina. Sto usando l'evento on-click per attivare una funzione che recupera i dati dall'immagine e ottiene il colore. Il problema è che la funzione funziona bene tranne che in realtà si riferisce all'immagine - ColorThief non sembra "vedere" l'immagine. Ecco il mio codice:

Image:

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

E la funzione 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// 
    } 
});  

Credo che il event.target è dove sta il problema; Ho provato a utilizzare anche sender, ma non ha funzionato. Cosa metterei qui per fare riferimento all'immagine?

Ho anche provato a creare l'immagine in Javascript senza inserirla nel DOM, ma senza risultato. Questo sembra un compito semplice, ma si è rivelato molto più complicato (almeno per me). È possibile che ci sia un modo migliore che mi manca.

Answer 1

Per quanto posso dire, il codice dovrebbe funzionare come mostrato.

Ecco un esempio reale per Polymer 1.0: http://jsbin.com/vedowo/edit?html,output

Ecco codice di esempio:

<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>