thehighhomie
@thehighhomie

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

При попытке отрисовать постер с 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'


Как можно решить это проблему?
  • Вопрос задан
  • 50 просмотров
Решения вопроса 1
ThunderCat
@ThunderCat Куратор тега JavaScript
{PHP, MySql, HTML, JS, CSS} developer
Самый простой способ - получить через свой сервер.
const youtubePosterUrl = "https://mysite.tld/externallinker/?externalimage=https://i.ytimg.com/vi/WkTB3Zfab8E/maxresdefault.jpg";
естественно урл каритнки должен быть упл енкодед.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы