HTMLImageElement : propriété crossOrigin

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis ⁨juillet 2015⁩.

La propriété crossOrigin de l'interface HTMLImageElement est une chaîne de caractères qui spécifie le paramètre Cross-Origin Resource Sharing (CORS) à utiliser lors de la récupération de l'image. Elle reflète l'attribut de contenu crossorigin de l'élément HTML <img>.

Valeur

Une chaîne de caractères dont la valeur est soit anonymous, soit use-credentials. Pour leur signification, voir la référence de l'attribut HTML crossorigin.

Exemples

Définir l'attribut `crossorigin`

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

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

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%;
}