单html文件demo跨域获取网络图片
时间: 2023-07-26 16:25:31 浏览: 77
以下是一个跨域获取网络图片的单 HTML 文件 demo:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>跨域获取网络图片</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<img id="image" src="">
<script>
var url = 'https://example.com/image.png'; // 图片 URL
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'arraybuffer';
xhr.onload = function() {
if (xhr.status === 200) {
var blob = new Blob([xhr.response], {type: 'image/png'}); // 创建 Blob 对象
var imageUrl = URL.createObjectURL(blob); // 获取 Blob 对象的 URL
document.getElementById('image').src = imageUrl; // 设置图像元素的 src 属性
}
};
xhr.send();
</script>
</body>
</html>
```
在上面的示例中,我们使用 XMLHttpRequest 对象以二进制格式获取图片,并将其转换为 Blob 对象。然后,我们使用 URL.createObjectURL() 方法获取 Blob 对象的 URL,并将其设置为图像元素的 src 属性。由于我们使用了 Blob 对象的 URL,因此可以跨域访问图片。
阅读全文