从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上的缩略图并将其保存在我的服务器上的情况下获取调色板的方法？

- Kasper Rynning-Tønnesen

Answer 1

我找到了一个解决方案，但需要将imagelink通过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';

- Kasper Rynning-Tønnesen

Answer 2

最好的做法是在服务器端实现，因为大多数浏览器会出于安全原因自动禁用通过JavaScript从另一个域名获取内容。这就是为什么您会得到CSRF。

- Alex Antonov

---

那么，您的意思是节点服务器要获取每个YouTube视频的调色板吗？还是为每个缩略图在服务器上下载缩略图？ - Kasper Rynning-Tønnesen

我不是 nodejs 专家，但我更喜欢这种方式：1. 从 YouTube 下载图像。2. 定义颜色调色板。3. 将其存储到数据库中。4. 删除图像。 - Alex Antonov

我想避免这种情况，因为该网站基于填充了YouTube视频的频道，每次歌曲更改或跳过每个频道的歌曲都要下载一张图片，这会给它增加额外的负载。 - Kasper Rynning-Tønnesen

@KasperRT，让我们等待其他的解决方案！我也对你的问题很感兴趣。 - Alex Antonov