Clever Geek Handbook

Grabbing a color palette from a YouTube thumbnail

I'm trying to grab a color palette from YouTube thumbnails to better blend YouTube videos with an entire website design, and I'm wondering if there is a way to do 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 just get 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 around this, or grabbing the color palette without downloading the thumbnail from YouTube and saving it to my server?

+3


source to share


2 answers


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

This leaves us:



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';
+3


source


The best idea is to implement this on the server side, because most browsers automatically disable fetching anything via javascript from other domain names for security reasons. This is why you are getting CSRF



0


source






More articles:


All Articles