HTMLImageElement: crossOrigin 属性
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 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>
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",
"Arial",
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 New", monospace;
width: 95%;
}
结果
规范
| 规范 |
|---|
| HTML # dom-img-crossorigin |
浏览器兼容性
加载中…