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