我正在尝试在我的网站上实现类似的效果,并且想知道实现它的最简单方法。
这是我所指的示例:https://soundcloud.com/iamtheelephante/the-magician-sunlight-elephante-remix
最佳答案
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