Canvas.drawImage() & Youtube миниатюра выдают ошибку CORS?

Question

[thehighhomie]

При попытке отрисовать постер с youtube ролика с последующим сохранением холста в изображение, браузер выбрасывает cors ошибки.

Код:

const youtubePosterUrl = "https://i.ytimg.com/vi/WkTB3Zfab8E/maxresdefault.jpg";
const unsplashImgUrl = 'https://images.unsplash.com/photo-1565165193821-67aa6479785e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60'
const canvas = document.getElementById('c')
const ctx = canvas.getContext('2d')

const img = new Image();

img.onload = function() {
  ctx.drawImage(img, 0, 0);
  canvas.toDataURL('image/jpg')
};

// если поменять youtubePosterUrl на unsplashImgUrl то все будет работать, проблема именно с youtubePosterUrl 
img.src = youtubePosterUrl;
img.crossOrigin = 'anonymous'

Как можно решить это проблему?

Answer 1

[ThunderCat]

Самый простой способ - получить через свой сервер.

const youtubePosterUrl = "https://mysite.tld/externallinker/?externalimage=https://i.ytimg.com/vi/WkTB3Zfab8E/maxresdefault.jpg";

естественно урл каритнки должен быть упл енкодед.