javascript - Soundcloud 如何从专辑封面创建背景渐变？

Question

我正试图在我的网站上实现类似的效果，并且想知道实现它的最简单方法。

这是我所指的示例:https://soundcloud.com/iamtheelephante/the-magician-sunlight-elephante-remix

Answer 1

var sourceImage = document.getElementById('myImage');

/*
Include ColorThief - Library
https://github.com/lokesh/color-thief/
*/
var colorThief = new ColorThief();
var paletteArray = colorThief.getPalette(sourceImage,2); //Returns an array with 3 colors in rgb format

var container = document.getElementsByClassName('myContainer')[0];

container.style.backgroundImage = '-webkit-linear-gradient( top left, rgb(' + paletteArray[0].join(',') + '), rgb(' + paletteArray[1].join(',') + '), rgb(' + paletteArray[2].join(',') + ') )'; //Works only in webkit browsers like Chrome or Safari

JSFiddle