传送门：（API搜来搜去就这几个，都一样的）
1. 可以获取随机图片的API收集 必应 等
2. 随机图片获取api
3. 随机获取图片的api接口
4. 另类随机图片API
5. php – 通过curl从url获取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 = 'http://api.brhsm.cn/tp.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 = 'https://bing.ioliu.cn/v1/rand?r=' + Math.random();
				img.onload = function() {
					clearTimeout(timer);
					timer = setTimeout(getImg, 5000);
				};
				img.onerror = function() {
					console.log('图片加载失败...');
				};
			}
			getImg();
		}
	</script>
</body>
</html>

补充：https://api.xygeng.cn/Bing - 必应壁纸

二、获取Blob文件

1. 必应每日图组（量少，快速）【配合后端抓取源码】

图片截取自必应首页，每日7张为一组

  • index.html（http://aaa.com/a.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（http://aaa.com/server.php）
<?php
	// 获取源码前获取随机数
	$rand = rand(0, 7);
	
	// 获取源码  这里用的是 file get contents函数
	$str = file_get_contents("http://www.bing.com/HPImageArchive.aspx?format=js&idx={$rand}&n=1");
	
	// 解析JSON
	$array = json_decode($str);
	
	// 取出url
	$imgurl = $array->{"images"}[0]->{"url"};
	
	// 衔接
	header("Location: http://www.bing.com{$imgurl}");
	
	// 确保重定向后，后续代码不会被执行
	exit;
?>

2. 直接ajax请求外部服务器API（一）（量多，略慢）【可跨域访问】

  • a.html（http://aaa.com/a.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', 'https://unsplash.it/1600/900?random', 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（http://aaa.com/a.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', 'https://uploadbeta.com/api/pictures/random/', 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 = 'https://bing.ioliu.cn/v1/rand?type=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);

	// 输出获取到的 json
	echo curl_exec($ch);
	
	// 关闭 curl 资源，并且释放系统资源
	curl_close($ch);
?>
Logo
CSDN学习社区

CSDN联合极客时间，共同打造面向开发者的精品内容学习社区，助力成长！

更多推荐

嵌入式作业（七）：基于Ardunio的STM32串口通信

嵌入式作业（七）0作业要求1Ardunio 完成STM32的串口通信（1）安装Ardunio IDE（2）stm32串口通信2关于 stduino IDE0作业要求安装 Ardunio IDE 和相关软件支持库，在Ardunio 完成STM32板子的串口通信程序：（1）持续向串口输出“Hello world！”；（2）当接收到“stop!”时，停止输出。网上有一个国人版的MCU集成开发平台， st

avatar CSDN学习社区

JDBC详解

JDBC文章目录JDBC什么是JDBC?JDBC驱动程序:Java使用JDBC访问数据库的步骤:设置classpath:Oracle连接字符串的书写格式:简单的例子:常用数据库的驱动程序及JDBC URL:Oracle数据库:SQL Server数据库MySQL数据库Access数据库PreparedStatement接口:JNDI-数据源（Data Source）与连接池（Connection

avatar CSDN学习社区

“模式识别与机器学习”学习笔记no2.再谈感知机

接**上篇：上篇主要进行了PLA，Pocket算法的理论过程分析和在给定数据集上利用pocket算法对数据集进行分类学习，得到错分数量最少的分类面。上篇中pocket算法的过程已经进行了编程和测试，框架已经建立了起来，这一篇主要上篇中没有提到或涉及不深的几个问题。1.数据集的构造。上篇是直接使用了题目给的向量，这次来根据正态分布来产生数据集。np.random.normal函数可以根据均值和方差生

avatar CSDN学习社区