首页单html文件demo跨域获取网络图片

单html文件demo跨域获取网络图片

时间: 2023-07-26 09:25:31 浏览: 45

以下是一个跨域获取网络图片的单 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，因此可以跨域访问图片。