-
传送门:(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>
二、获取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);
?>