HTMLImageElement: crossOrigin property
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Thuộc tính crossOrigin của giao diện HTMLImageElement là một chuỗi chỉ định cài đặt Chia sẻ tài nguyên nguồn gốc chéo (CORS) để sử dụng khi truy xuất hình ảnh. Nó phản ánh thuộc tính nội dung crossorigin của phần tử <img>.
Giá trị
Một chuỗi có giá trị là một trong anonymous hoặc use-credentials. Để biết ý nghĩa của chúng, hãy xem tham chiếu thuộc tính HTML crossorigin.
Ví dụ
Đặt thuộc tính crossorigin
Trong ví dụ này, phần tử <img> mới được tạo và thêm vào tài liệu, tải hình ảnh ở trạng thái Ẩn danh; hình ảnh sẽ được tải bằng CORS và thông tin xác thực sẽ được sử dụng cho tất cả các lần tải trên nhiều nguồn gốc.
JavaScript
Mã bên dưới minh họa việc đặt thuộc tính crossOrigin trên phần tử <img> để định cấu hình quyền truy cập CORS nhằm tìm nạp hình ảnh mới được tạo.
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("/shared-assets/images/examples/balloon.jpg");
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",
"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%;
}
Kết quả
Thông số kỹ thuật
| Specification |
|---|
| HTML # dom-img-crossorigin |