ポリマー要素の荷重でimg要素を選択

Question

imgタグを持つポリマー要素を作成しました。私は基本的にイメージから支配的な色をピックアップし、カラーコードを与えるjavascriptライブラリ（Vibrant.js）を使用しています。私はポリマーのattachedイベントでイメージ要素を選択しようとしています。しかし、どういうわけか、イメージ要素が適切に選択されていません。

次の例外があります。

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

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> 

Answer 2

あなたのエラーは、画像タグにwidthとheightを与えることによって解決することができます。

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

しかし、私はそれを今実行させることができなかったとしても、その後、私は、このエラーが原因で活気で未処理のエラーの来ていたことが判明し、さらにデバッグの新しいエラー

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

を持っています期待どおりのオブジェクトではなく、としてcmapが来ているという事実のために生成されていました。これは、jsがイメージを分解し、各ピクセルの値を0とした結果、を読み取ったときに、pushのいずれもallpixelsの配列に含まれていなかったためです。

私は活気のある例の画像も試しましたが、成功しませんでした。