Javascript 在画布中重新绘制youtube缩略图并将其存储在localStorage中

我必须从它们的url中获取缩略图，并在画布中重新绘制它们，此外，我还需要将它们存储在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'标头。因此，不允许访问源站“null”。

当我从图像

img

中删除

crossOrigin

属性时，该属性用作重绘的缓冲区。错误更改为：

---

Uncaught SecurityError:未能在“htmlcanvaseElement”上执行“toDataURL”：可能无法导出受污染的画布。

您必须通过将设置cors共享的代理服务器传递请求，以下是与您的问题类似（几乎完全相同）的情况：

我相信这是唯一的办法