HTMLImageElement: свойство crossOrigin

Базовая Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с июля 2015 года.

Атрибут crossOrigin интерфейса HTMLImageElement — строка, которая указывает настройку Cross-Origin Resource Sharing (CORS) для получения изображения.

Значение

Строка ключевого слова, определяющего режим CORS при получении ресурса изображения. Если вы не укажете crossOrigin, изображение загружается без CORS (режим получения no-cors).

Разрешенные значения:

anonymous: Запросы элемента <img> устанавливают своё значение mode на cors и режим credentials на same-origin. Это означает, что CORS включён, и данные отправляются если изображение загружается с того же источника, что и документ.
use-credentials: Запросы элемента HTMLImageElement будут использовать режим cors и режим аутентификации include; все запросы изображений элемента будут использовать CORS независимо от того, из какой области происходят загрузка.

Если crossOrigin является пустой строкой (""), выбирается режим anonymous.

Примеры

В этом примере создаётся новый элемент <img> и добавляется в документ, загружая изображение в анонимном состоянии; изображение будет загружено с использованием CORS, и данные будут использоваться для всех запросов из разных областей.

JavaScript

Ниже приведён код, демонстрирующий установку свойства crossOrigin для элемента <img>, чтобы настроить доступ CORS для получения только что созданного изображения.

const imageUrl = "clock-demo-400px.png";
const container = document.querySelector(".container");

function loadImage(url) {
  const image = new Image(200, 200);
  image.addEventListener("load", () => container.prepend(image));

  image.addEventListener("error", () => {
    const errMsg = document.createElement("output");
    errMsg.value = `Error loading image at ${url}`;
    container.append(errMsg);
  });

  image.crossOrigin = "anonymous";
  image.alt = "";
  image.src = url;
}

loadImage(imageUrl);

HTML

<div class="container">
  <p>
    Here's a paragraph. It's a very interesting paragraph. You are captivated by
    this paragraph. Keep reading this paragraph. Okay, now you can stop reading
    this paragraph. Thanks for reading me.
  </p>
</div>

CSS

body {
  font:
    1.125rem/1.5,
    Helvetica,
    sans-serif;
}

.container {
  display: flow-root;
  width: 37.5em;
  border: 1px solid #d2d2d2;
}

img {
  float: left;
  padding-right: 1.5em;
}

output {
  background: rgb(100 100 100 / 100%);
  font-family: Courier, monospace;
  width: 95%;
}

Результат

Спецификации

Спецификация
HTML # dom-img-crossorigin

Совместимость браузеров

	Десктопные					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`crossOrigin`	13	12	8	≤12.1	6	18	8	≤12.1	6	1.0	4.4

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/crossOrigin