javascriptcsscolor-thief

Colored Shadow by Color Thief


I'm trying to make a shadow of an image using Color Thief (like the image below):

Colored shadow

I'm trying to make Color Thief detect the color and make the shadow look like the shadow colored by the color that came from Color Thief.

How can I do this?


Solution

  • Due to cross-domain issues with canvas and images, I can't produce a working snippet here, but this should do the trick (maybe with some slight tweaks).

    var $img = $('img');
    
    $img.load(function() {
      var colorThief = new ColorThief();
      // uncomment this (x-domain issues):
      //var color = colorThief.getColor($img.get(0));
    
      // here's what it would produce:
      var color = 'rgb(72, 174, 216)';
    
      $img.css('box-shadow', color + ' 0 5px 15px');
    });
    img {
      display: block;
      width: 200px;
      margin: 10px auto 0;
      border-radius: 10px;
    }
    
    canvas {
      display: none;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.0.1/color-thief.min.js"></script>
    
    <img id="image" src="https://i.imgur.com/rb3admc.jpg" />