javascript - 在 Canvas 中重新绘制 youtube 缩略图并将它们存储在 localStorage 中

Question

我必须从他们的 url 中获取缩略图并在 Canvas 中重新绘制它们，另外我需要将它们存储在 localStorage 中 - 这样在关闭并重新打开窗口后它们就不会丢失。

var c = document.createElement("canvas");
var ctx = c.getContext("2d");
var img = new Image();
img.setAttribute('crossOrigin', 'anonymous');
window.localStorage.canvas = [];
img.onload = function() {
    c.width = img.width
    c.height = img.height
    ctx.drawImage(img, 10, 10);
    var image = document.createElement("img");
    var data = c.toDataURL();
    image.src = data;
    document.body.appendChild(image)
    window.localStorage.canvas.push(data)
};
img.src = 'https://img.youtube.com/vi/vYOangK3kAw/0.jpg';

使用上面的代码我得到下面的代码:

来源“https://img.youtube.com”的图像已被跨源资源共享策略阻止加载:请求的资源上不存在“Access-Control-Allow-Origin” header .因此不允许访问 Origin 'null'。

当我从用作重绘缓冲区的图像 img 中删除 crossOrigin 属性时。错误改为:

未捕获的安全错误:无法在“HTMLCanvasElement”上执行“toDataURL”:可能无法导出受污染的 Canvas 。

Answer 1

您必须通过将设置 cors 共享的代理服务器传递请求，这是一个与您的问题类似(几乎完全相同)的情况:

Grabbing color palette from YouTube thumbnail

我相信这是唯一的方法。