Color Thief 的彩色阴影

Question

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

我正在尝试让 Color Thief 检测颜色并使阴影看起来像由来自 Color Thief 的颜色着色的阴影。

我该怎么做？

Answer 1

您可以使用此生成器添加多个不同颜色的阴影 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Box-shadow_generator.

Answer 2

由于 canvas 和图像的跨域问题，我无法在此处生成有效的代码段，但这应该可以解决问题（可能需要一些细微的调整）。

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

Color Thief 的彩色阴影

Colored Shadow by Color Thief

javascript

css

color-thief