Атрибут crossorigin тега <img>

Описание

Атрибут crossorigin указывает, должен ли элемент <img> запрашивать изображение с использованием CORS (Cross-Origin Resource Sharing). Это важно при работе с изображениями на других доменах, особенно при использовании canvas.

Пример использования:
<img src="https://example.com/image.jpg" crossorigin="anonymous" alt="Пример изображения с другого домена">

Доступные значения:

Значение Описание Когда использовать
anonymous Запрос CORS без credentials Для общедоступных изображений
use-credentials Запрос CORS с credentials (cookies, HTTP-аутентификация) Для защищенных изображений, требующих аутентификации
не указан CORS не используется Когда не требуется доступ к пиксельным данным

Пример с Canvas:

<canvas id="myCanvas" width="300" height="150"></canvas> <script> const img = new Image(); img.crossOrigin = 'Anonymous'; img.src = 'https://example.com/image.jpg'; img.onload = function() { const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); ctx.drawImage(img, 0, 0); }; </script>

Рекомендации по использованию:

  • Используйте для изображений, которые будут обрабатываться в canvas
  • Требуется правильная настройка CORS на сервере
  • Для use-credentials сервер должен разрешать запросы с credentials
  • Без атрибута canvas выбросит исключение "tainted canvas"

Ошибки и отладка:

<img id="corsImage" src="https://other-domain.com/image.jpg" crossorigin> <script> document.getElementById('corsImage').onerror = function() { console.error('Ошибка загрузки изображения:', this.src); // Проверьте заголовки Access-Control-Allow-Origin на сервере }; </script>

Серверная конфигурация (пример для Apache):

# В .htaccess или конфигурации сервера <IfModule mod_headers.c> <FilesMatch "\.(jpg|jpeg|png|gif)$"> Header set Access-Control-Allow-Origin "*" </FilesMatch> </IfModule>

Ограничения и совместимость:

  • Поддерживается всеми современными браузерами
  • Сервер должен отправлять правильные CORS-заголовки
  • Для use-credentials нельзя использовать * в Access-Control-Allow-Origin
  • Не влияет на обычное отображение изображений (без canvas)

Примечание: Атрибут crossorigin особенно важен для веб-приложений, которые обрабатывают изображения через canvas или WebGL. Всегда проверяйте, что сервер правильно настроен для CORS-запросов, иначе изображения не будут загружаться.