Захватывает цветовую палитру с эскиза YouTube

Question

Я пытаюсь извлечь цветовую палитру из эскизов YouTube, чтобы лучше сочетать видео YouTube с целым дизайном веб-сайта, и мне интересно, есть ли способ сделать это?

Я попытался использовать color-thief ( https://github.com/lokesh/color-thief) и этот код (без удачи):

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

От этого я просто получаю эту ошибку:

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

Любой способ обойти это или захватить цветовую палитру, не загружая миниатюру с YouTube и не сохраняя ее на моем сервере?

Answer 1

Нашел решение, но оно включает в себя передачу изображения через http://cors-anywhere.herokuapp.com/

Это оставляет нас с:

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

Answer 2

Лучше всего реализовать это на стороне сервера, потому что большинство браузеров автоматически отключают получение чего-либо через javascript из других доменных имен по соображениям безопасности. Вот почему вы получаете CSRF