色泥棒によって着色シャドウ私は（下の画像のような）カラー泥棒を使用して、画像の影を作るしようとしている

Question

：

私は色の泥棒は色を検出するためにしようとしていると色の泥棒から来た色で着色された影のように影を見せてください。

どうすればいいですか？

Answer 1

キャンバスと画像のクロスドメインの問題により、私はここで動作するスニペットを生成することはできませんが、ちょっとした調整が必要です。まあ

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

Answer 2

このジェネレータでは、異なる色で複数のシャドウを追加できます。 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Box-shadow_generator