HTMLImageElement：crossOrigin 属性

基线 广泛可用

此功能已成熟，可在多种设备和浏览器版本上运行。它已在所有浏览器中可用，从 2015 年 7 月.

该 HTMLImageElement 接口的 crossOrigin 属性是一个字符串，用于指定在检索图像时使用的跨源资源共享 (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

以下代码演示了在 <img> 元素上设置 crossOrigin 属性以配置新创建图像获取的 CORS 访问。

js
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

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

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

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅