I'm trying to grab the color palette from YouTube thumbnails, to better blend the YouTube video with a whole website design, and I'm wondering if there is any way of doing this?
I've tried using color-thief (https://github.com/lokesh/color-thief) and this code (with no luck):
var img = new Image();
img.onload = function () {
var colorThief = new ColorThief();
colorThief.getColor(img);
};
img.crossOrigin = 'Anonymous';
img.src = 'http://img.youtube.com/vi/NuEfvIca0XU/mqdefault.jpg
From this I'm just getting this error:
Image from origin 'http://img.youtube.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access
Any way of bypassing this, or grabbing the color palette without downloading the thumbnail off of YouTube and saving it on my server?
Found a solution, but it involves passing the imagelink through http://cors-anywhere.herokuapp.com/
This leaves us with: