由颜色窃贼的色的阴影

Question

我正在尝试使用Color Thief制作图像的阴影（如下图所示）：

我正在尝试让Color Thief检测颜色并使阴影看起来像Color Thief颜色所染的阴影。​​

我该怎么做？

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