彩色陰影彩色竊賊

Question

我試圖讓使用Color賊（如下圖）的圖像的陰影：

我試圖讓顏色賊檢測顏色和使陰影看起來像來自彩色小偷的顏色的陰影。

我該怎麼做？

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。