HTMLImageElement.crossOrigin

在此页

句法
范例
规范
浏览器兼容性
相关话题

HTMLImageElement 接口的 crossOrigin attribute is a string which specifies the Cross-Origin Resource Sharing ( CORS ) setting to use when retrieving the image.

句法

htmlImageElement.crossOrigin = crossOriginMode;
let crossOriginMode = htmlImageElement.crossOrigin;

值

A DOMString of a keyword specifying the CORS mode to use when fetching the image resource. If you don't specify crossOrigin , the image is fetched without CORS (the fetch no-cors 模式)。

Permitted values are:

anonymous: Requests by the <img> element have their mode 设为 cors and their credentials mode set to same-origin . This means that CORS is enabled and credentials are sent if the image is fetched from the same origin from which the document was loaded.
use-credentials: Requests by the HTMLImageElement 将使用 cors mode and the 包括 credentials mode; all image requests by the element will use CORS, regardless of what domain the fetch is from.

若 crossOrigin 为空字符串 ( "" )， anonymous mode is selected.

范例

In this example, a new <img> element is created and added to the document, loading the image with the Anonymous state; the image will be loaded using CORS and credentials will be used for all cross-origin loads.

JavaScript

The code below demonstrates setting the crossOrigin property on an <img> element to configure CORS access for the fetch of a newly-created image.

const imageUrl = "https://mdn.mozillademos.org/files/16797/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: rgba(100, 100, 100, 0.1);
  font-family: Courier, monospace;
  width: 95%;
}

结果

规范

规范	状态	注释
HTML 实时标准 The definition of 'HTMLImageElement.crossOrigin' in that specification.	未知

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`crossOrigin`	Chrome 13	Edge 12	Firefox Yes	IE 9	Opera Yes	Safari Yes	WebView Android Yes	Chrome Android Yes	Firefox Android Yes	Opera Android ?	Safari iOS Yes	Samsung Internet Android Yes

图例

完整支持
兼容性未知 ?

元数据

最后修改： Dec 8, 2019

在此页

句法

值

范例

JavaScript

HTML

CSS

结果

规范

浏览器兼容性

图例

相关话题