Selecting an img element on polymer element load - polymer

Question

I have created a polymer element which has an img tag in it. I am using a javascript library(Vibrant.js) which basically picks up the dominant color from the image and gives out the color code. I am trying to select the image element in attached event of polymer. But somehow the image element is not getting selected to properly.
I get the following exception.
Vibrant.min.js:1 Uncaught IndexSizeError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source width is 0.
<dom-module id="my-image-block">
<template>
<div class="service-wrapper">
<div><img id="imgobject" src={{imagepath}}></div>
<div class="service-wrapper-inner">
<div>
<p class="group-title">Stencil
<p> <!--TODO : Remove hard coding-->
<div class="title">
<p>Some content</p></div>
<p class="last-modified">Last updated: {{lastmodified}}</p>
</div>
<div class="description">
<p>{{description}}</p>
</div>
</div>
</div>
</template>
<script>
Polymer({
is: "my-image-block",
attached: function () {
var self = this;
var imageobject = self.$.imgobject;
var vibrant = new Vibrant(imageobject, 64, 6);
var swatches = vibrant.swatches();
var backColor = swatches["Vibrant"].getHex()
$(".service-wrapper-inner").css("background-color", backColor);
}
});
</script>

Answer 1

Your error can be resolved by giving width and height to the image tag.
<template>
<style>
#imgobject{
width: 100px;
height: 100px;
}
</style>
<!-- rest of your code -->
But even after that i was not able to make it run now i got a new error
Vibrant.js:651 Uncaught TypeError: Cannot read property 'map' of undefined
On further debugging i found that this error was coming because of an unhandled error in vibrant which was being generated due to the fact that cmap wa coming as false rather than an object as expected. This was happening because when the js disintegrated image and read rgba value of each pixel it got 0 as value, as a result it did not push anything in allpixels array.
I tried with images from vibrant example also but no success.

Answer 2

I was able to do that by calling a function on on-load event of img object.
<!-- rest of the code-->
<div><img id="image-object" src={{imagepath}} on-load="handleImageObjectOnLoad"></div>
<!-- rest of the code-->
And for the polymer code i did something like this.
<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>
Where --custom-background-color is a css styling variable.
<style>
:host{
--custom-background-color: grey;
}
.service-wrapper-inner {
background-color: var(--custom-background-color);
}
</style>