【API】随机获取图片

最新推荐文章于 2024-03-19 10:17:21 发布

iuukai

最新推荐文章于 2024-03-19 10:17:21 发布

阅读量1.4k

点赞数

分类专栏： API

本文链接：https://blog.csdn.net/weixin_45389633/article/details/110822027

版权

API 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

传送门：（API搜来搜去就这几个，都一样的）

1. 可以获取随机图片的API收集必应等

2. 随机图片获取api

3. 随机获取图片的api接口

4. 另类随机图片API

5. php – 通过curl从url获取JSON数据

文章目录

一、直接设置src
- 1. 百变图片API
- 2. 必应壁纸API
二、获取Blob文件
三、获取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);
?>

iuukai

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
【API】随机获取图片

传送门：（API搜来搜去就这几个，都一样的） 1. 可以获取随机图片的API收集必应等 2. 随机图片获取api 3. 随机获取图片的api接口 4. 另类随机图片API 5. php – 通过curl从url获取JSON数据文章目录一、获取Blob文件1. 必应每日图组（量少，快速）【配合后端抓取源码】2. 直接ajax请求外部服务器API（一）（量多，略慢）【可跨域访问】3. 直接ajax请求外部服务器API（二）（量多，略慢）【可跨域访问】二、获取JSON数据【未实现，待完善，留..
复制链接

扫一扫

专栏目录