Auswählen eines img-Elements auf der Polymerelementlast

Question

Ich habe ein Polymerelement mit einem Tag img erstellt. Ich benutze eine Javascript-Bibliothek (Vibrant.js), die im Wesentlichen die dominante Farbe aus dem Bild aufnimmt und den Farbcode ausgibt. Ich versuche, das Bildelement in attached Ereignis des Polymers auszuwählen. Aber irgendwie wird das Bildelement nicht richtig ausgewählt.

Ich bekomme die folgende Ausnahme.

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

Ich konnte dies tun, indem Sie eine Funktion auf on-load Ereignis img Objekt aufrufen.

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

Und für den Polymer-Code habe ich so etwas getan.

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

Wo --custom-background-color ist eine CSS-Styling-Variable.

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

Answer 2

Ihre Fehler kann, indem width und height zum Image-Tag gelöst werden.

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

Aber auch nach, dass ich nicht in der Lage war, um es jetzt zu machen laufen bekam ich einen neuen Fehler

Vibrant.js:651 Uncaught TypeError: Cannot read property 'map' of undefined

Beim weiteren Debuggen fand ich, dass dieser Fehler in der vibrierenden wegen eines nicht behandeln Fehler kam die wurde aufgrund der Tatsache erzeugt, dass cmap wa als false eher als ein Objekt wie erwartet kommt. Dies geschah, weil, wenn das js-Bild zerfiel und rgba Wert von jedem Pixel gelesen wurde, es 0 als Wert erhielt, als Ergebnis es push irgendetwas in allpixels Array nicht tat.

Ich versuchte mit Bildern aus lebhaften Beispiel auch, aber kein Erfolg.