javascript - Colorthief.js 与 Polymer.js - 查找导致 onload 事件的图像的原色

Question

我正在使用 Polymer 构建一个 Material 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>