Question

我创建了一个聚合物元素，其中包含MAX( Credit_Initial ) as Credit_Initial, MAX( Disponible_v ) as Disponible_v标记。我正在使用一个javascript库（Vibrant.js），它基本上从图像中获取主色并给出颜色代码。我试图选择聚合物img事件中的图像元素。但不知何故，图像元素没有被正确选中。

我收到以下异常。

Vibrant.min.js：1 Uncaught IndexSizeError：无法在'CanvasRenderingContext2D'上执行'getImageData'：源宽度为0.

attached

Answer 1

您可以通过向图片代码提供width和height来解决您的错误。

<template>
 <style>
  #imgobject{
   width: 100px;
   height: 100px;
  }
 </style>
 <!-- rest of your code -->

但即使在那之后我也无法让它现在运行我有一个新的错误

Vibrant.js：651未捕获的TypeError：无法读取未定义的属性“map”

在进一步调试时，我发现这个错误正在发生，因为生成的未处理错误是由于cmap以false而不是预期的对象而生成的。发生这种情况是因为当js解体图像并读取每个像素的rgba值时，它的值为0，因此allpixels数组中没有push任何内容。

我尝试了来自充满活力的例子的图像，但没有成功。

Answer 2

我可以通过在on-load对象img事件上调用函数来做到这一点。

<!-- rest of the code-->
<div><img id="image-object" src={{imagepath}} on-load="handleImageObjectOnLoad"></div>
<!-- rest of the code-->

对于聚合物代码，我做了类似的事情。

<script>
    Polymer({
        is: "marketplace-image-block",
        handleImageObjectOnLoad: function () {
            var self = this;
            var imageobject = self.$['image-object'];
            var vibrant = new Vibrant(imageobject, 64, 5);
            var swatches = vibrant.swatches();
            var backColor = swatches["Vibrant"].getHex();
            self.customStyle["--custom-background-color"] = backColor;
            self.updateStyles();
        }
    });
</script>

--custom-background-color是css样式变量。

<style>
        :host{
            --custom-background-color: grey;
        }
.service-wrapper-inner {
    background-color: var(--custom-background-color);
  }
</style>

在聚合物元素负载上选择img元素

2 个答案: