Grabbing color palette from YouTube thumbnail

问题

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?

回答1:

Found a solution, but it involves passing the imagelink through http://cors-anywhere.herokuapp.com/

This leaves us with:

var img = new Image();
img.onload = function () {
  var colorThief = new ColorThief();
  colorThief.getColor(img);
};
img.crossOrigin = 'Anonymous';
img.src = 'http://cors-anywhere.herokuapp.com/http://img.youtube.com/vi/'+id+'/mqdefault.jpg';

回答2:

The best idea is to implement this on the server side, because the most of browsers automatically disable fetching something through javascript from another domain names due to security reasons. That's why you get a CSRF

来源：https://stackoverflow.com/questions/30731209/grabbing-color-palette-from-youtube-thumbnail