图片"/>
【API】随机获取图片
- 传送门：（API搜来搜去就这几个，都一样的）
- 1. 可以获取随机图片的API收集 必应 等
- 2. 随机图片获取api
- 3. 随机获取图片的api接口
- 4. 另类随机图片API
- 5. php – 通过curl从url获取JSON数据
文章目录
- 一、直接设置src
- 1. 百变图片API
- 2. 必应壁纸API
- 二、获取Blob文件
- 1. 必应每日图组（量少，快速）【配合后端抓取源码】
- 2. 直接ajax请求外部服务器API（一）（量多，略慢）【可跨域访问】
- 3. 直接ajax请求外部服务器API（二）（量多，略慢）【可跨域访问】
- 三、获取JSON数据【未实现，待完善，留坑】
一、直接设置src
1. 百变图片API
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title></title>
</head>
<body><div class="demo"><img src="" /></div><script>window.onload = function() {var timer = null;var img = document.querySelector('.demo img');img.width = 500;function getImg() {img.src = '.png?r=' + Math.random();img.onload = function() {clearTimeout(timer);timer = setTimeout(getImg, 5000);};img.onerror = function() {console.log('图片加载失败...');};}getImg();}</script>
</body>
</html>
2. 必应壁纸API
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title></title>
</head>
<body><div class="demo"><img src="" /></div><script>window.onload = function() {var timer = null;var img = document.querySelector('.demo img');img.width = 500;function getImg() {img.src = '=' + Math.random();img.onload = function() {clearTimeout(timer);timer = setTimeout(getImg, 5000);};img.onerror = function() {console.log('图片加载失败...');};}getImg();}</script>
</body>
</html>
补充： - 必应壁纸
二、获取Blob文件
1. 必应每日图组（量少，快速）【配合后端抓取源码】
图片截取自必应首页，每日7张为一组
- index.html（.html）
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title></title>
</head>
<body><div class="demo"><img src="" /></div><script>function getImg() {var timer = null;var xhr = new XMLHttpRequest();xhr.open('GET', 'server.php', true);xhr.responseType = 'blob'; // 服务器返回二进制对象xhr.onload = function() { // 流文件使用 load 事件监听if (xhr.readyState === 4) {if ( (xhr.status >= 200 && xhr.status < 300)|| (xhr.status === 304) ) {var _blob = this.response; // 返回的 blob 对象var img = document.querySelector('.demo img');img.src = URL.createObjectURL(_blob); // 生成 URL 实例img.onload = function() {this.width = 500;URL.revokeObjectURL(this.src); // 释放 URL 实例clearTimeout(timer); // 防抖timer = setTimeout(getImg, 5000); // 计时器};img.onerror = function() {console.log('图片加载失败...');};}}};xhr.send(null);}getImg();</script>
</body>
</html>
- server.php（.php）
<?php// 获取源码前获取随机数$rand = rand(0, 7);// 获取源码 这里用的是 file get contents函数$str = file_get_contents(".aspx?format=js&idx={$rand}&n=1");// 解析JSON$array = json_decode($str);// 取出url$imgurl = $array->{"images"}[0]->{"url"};// 衔接header("Location: {$imgurl}");// 确保重定向后，后续代码不会被执行exit;
?>
2. 直接ajax请求外部服务器API（一）（量多，略慢）【可跨域访问】
- a.html（.html）
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title></title>
</head>
<body><div class="demo"><img src="" /></div><script>function getImg() {var timer = null;var xhr = new XMLHttpRequest();xhr.open('GET', '', true);xhr.responseType = 'blob'; // 服务器返回二进制对象xhr.onload = function() { // 流文件使用 load 事件监听if (xhr.readyState === 4) {if ( (xhr.status >= 200 && xhr.status < 300)|| (xhr.status === 304) ) {var _blob = this.response; // 返回的 blob 对象var img = document.querySelector('.demo img');img.src = URL.createObjectURL(_blob); // 生成 URL 实例img.onload = function() {this.width = 500;URL.revokeObjectURL(this.src); // 释放 URL 实例clearTimeout(timer); // 防抖timer = setTimeout(getImg, 5000); // 计时器};img.onerror = function() {console.log('图片加载失败...');};}}};xhr.send(null);}getImg();</script>
</body>
</html>
3. 直接ajax请求外部服务器API（二）（量多，略慢）【可跨域访问】
- a.html（.html）
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title></title>
</head>
<body><div class="demo"><img src="" /></div><script>function getImg() {var timer = null;var xhr = new XMLHttpRequest();xhr.open('GET', '/', true);xhr.responseType = 'blob'; // 服务器返回二进制对象xhr.onload = function() { // 流文件使用 load 事件监听if (xhr.readyState === 4) {if ( (xhr.status >= 200 && xhr.status < 300)|| (xhr.status === 304) ) {var _blob = this.response; // 返回的 blob 对象var img = document.querySelector('.demo img');img.src = URL.createObjectURL(_blob); // 生成 URL 实例img.onload = function() {this.width = 500;URL.revokeObjectURL(this.src); // 释放 URL 实例clearTimeout(timer); // 防抖timer = setTimeout(getImg, 5000); // 计时器};img.onerror = function() {console.log('图片加载失败...');};}}};xhr.send(null);}getImg();</script>
</body>
</html>
三、获取JSON数据【未实现，待完善，留坑】
不明所以，明明已经成功获取到了json数据，但是却不能使用
这个是必应壁纸API，也就是上面有提到的，可直接使用url获取图片，而此处则是获取json
- index.html
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title></title>
</head>
<body><div class="demo"><img src="" /></div><script>function getImg() {var timer = null;var xhr = new XMLHttpRequest();xhr.open('GET', 'server.php', true);xhr.responseType = 'json'; // 服务器返回 json 数据xhr.onload = function() { // 流文件使用 load 事件监听if (xhr.readyState === 4) {if ( (xhr.status >= 200 && xhr.status < 300)|| (xhr.status === 304) ) {var _json = this.response; // 返回的 json 数据console.log(_json);var img = document.querySelector('.demo img');img.src = _json.data.url;img.onload = function() {this.width = 500;clearTimeout(timer); // 防抖timer = setTimeout(getImg, 5000); // 计时器};img.onerror = function() {console.log('图片加载失败...');};}}};xhr.send(null);}getImg();</script>
</body>
</html>
- server.php
<?php$url = '=json';$agent= 'Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.0.3705; .NET CLR 1.1.4322)';// 创建一个新 curl 资源$ch = curl_init();// 设置URL和相应的选项$options = array(CURLOPT_URL => $url,CURLOPT_USERAGENT => $agent,CURLOPT_SSL_VERIFYPEER => false,CURLOPT_RETURNTRANSFER => true,CURLOPT_HEADER => false,);curl_setopt_array($ch, $options);// 输出获取到的 jsonecho curl_exec($ch);// 关闭 curl 资源，并且释放系统资源curl_close($ch);
?>更多推荐
【API】随机获取图片
发布评论