HTMLImageElement : propriété crossOrigin

Valeur

Une chaîne de caractères contenant un mot-clé qui précise le mode CORS à utiliser lors de la récupération de la ressource image. Si vous ne spécifiez pas crossOrigin, l'image est récupérée sans CORS (mode no-cors de fetch).

Les valeurs autorisées sont :

anonymous

Les requêtes de l'élément HTML <img> ont leur mode défini à cors et leur mode credentials à same-origin. Cela signifie que CORS est activé et que les identifiants sont envoyés uniquement si l'image est récupérée depuis la même origine que le document.

use-credentials

Les requêtes de l'interface HTMLImageElement utiliseront le mode cors et le mode d'identifiants include : toutes les requêtes d'image de l'élément utiliseront CORS, quel que soit le domaine d'origine.

Si crossOrigin est une chaîne vide (""), le mode anonymous est sélectionné.

Exemples

Dans cet exemple, un nouvel élément <img> est créé et ajouté au document, l'image étant chargée avec l'état « Anonymous » : l'image sera chargée en utilisant CORS et les identifiants seront utilisés pour tous les chargements inter-origines.

JavaScript

Le code ci-dessous montre comment définir la propriété crossOrigin sur un élément <img> pour configurer l'accès CORS lors de la récupération d'une image nouvellement créée.

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("clock-demo-400px.png");

HTML

<div class="container">
  <p>
    Voici un paragraphe. C'est un paragraphe très intéressant. Ce paragraphe
    vous captive. Continuez à lire ce paragraphe. Voilà, vous pouvez arrêter de
    lire ce paragraphe. Merci de m'avoir lu.
  </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%;
}

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• HTMLLinkElement.crossOrigin
• HTMLMediaElement.crossOrigin
• HTMLScriptElement.crossOrigin