从YouTube缩略图中抓取调色板 [英] Grabbing color palette from YouTube thumbnail

问题描述

我正试图从YouTube缩略图中抓取调色板，以便更好地将YouTube视频与整个网站设计融合，我想知道是否有任何方法可以做到这一点？

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?

我尝试过使用彩色窃贼（ https://github.com/lokesh / color-thief ）和这段代码（没有运气）：

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

任何方式绕过这个或抓住调色板没有从YouTube下载缩略图并将其保存在我的服务器上？

Any way of bypassing this, or grabbing the color palette without downloading the thumbnail off of YouTube and saving it on my server?

推荐答案

找到一个解决方案，但它涉及传递imagelink通过 http://cors-anywhere.herokuapp.com/

Found a solution, but it involves passing the imagelink through 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';

这篇关于从YouTube缩略图中抓取调色板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！