Javascript 从图像创建渐变

如何从图像中创建渐变，以便将其用作该图像的背景？背景有点模糊吗

我的html标记：

<div class="bck">
    <img class="thumb" src="20161204.jpg" />
</div>

这让我

我想用图像中使用的颜色来填充背景/创建渐变

---

这可以完全通过css（首选）完成吗？尽管如此，我对任何JS库都持开放态度，这可以通过两种方式实现

使用CSS

这是一个非常简单的技巧，您可以将相同的图像用于外部

，然后像这样将其模糊

.image_blur {
    -webkit-filter: blur(50px);
    -moz-filter: blur(50px);
    -o-filter: blur(50px);
    -ms-filter: blur(50px);
    filter: blur(50px);
}

这是一个给人一种渐变的感觉

使用Javascript：

您可以使用基于画布的StackBlur来模糊图像，然后将其用作背景img（在外部div中），这将再次给人一种渐变的感觉。这是一张工作票

---

希望这有帮助。

我不认为使用css可以完成类似的事情……好吧。我也愿意接受任何JS解决方案。

.image_blur {
    -webkit-filter: blur(50px);
    -moz-filter: blur(50px);
    -o-filter: blur(50px);
    -ms-filter: blur(50px);
    filter: blur(50px);
}