使用Polymer.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

据我所知,您的代码应该如图所示.

以下是Polymer 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>