【API】隨機獲取圖片
-
傳送門：（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);
?>
相關文章
- 隨機獲取到的高質量圖片隨機
- Android 從手機相簿獲取圖片 uri 路徑 從相機獲取照片Android
- zabbix api 獲取圖形API
- iOS 獲取視訊圖片iOS
- 獲取本地圖片/視訊地圖
- 基於隨機定位的地圖資訊獲取方式隨機地圖
- Docker Compose部署隨機圖APIDocker隨機API
- 利用微信公眾號提供的官方API上傳圖片獲取永久圖片素材！當圖床用！API圖床
- 獲取網路圖片的大小
- JavaScript獲取背景圖片定位值JavaScript
- Java從List中獲取隨機元素Java隨機
- 使用ColorfulImg獲取圖片主題色！
- jquery獲取圖片的真實大小jQuery
- JavaScript獲取圖片的真實大小JavaScript
- 直播app開發搭建，ios 獲取手機中所有圖片APPiOS
- google books api 獲取圖書資訊GoAPI
- Excel 讀取圖片並獲取儲存路徑Excel
- 從Linux核心中獲取真隨機數Linux隨機
- java獲取時間戳和隨機數Java時間戳隨機
- 為啥從SurfaceView中獲取不到圖片？View
- Chrome 獲取網頁顏色（文字、圖片）Chrome網頁
- 利用API獲取金融資料並畫圖API
- 隨機圖片又雙叒叕炸啦隨機
- Java之獲取隨機數的4種方法Java隨機
- ArcGIS如何自動獲得隨機取樣點？隨機
- python爬蟲從ip池獲取隨機IPPython爬蟲隨機
- 獲取當前時間戳和隨機數的獲取、Java Random、ThreadLocalRandom、UUID類中的方法應用（隨機數）時間戳隨機JavarandomthreadUI
- 【Javascript + Vue】實現隨機生成迷宮圖片JavaScriptVue隨機
- JavaScript 獲取0-1之間的隨機數JavaScript隨機
- Django Models隨機獲取指定數量資料方法Django隨機
- WebRTC從攝像頭獲取圖片傳入canvasWebCanvas
- flowable 獲取當前任務流程圖片的輸入流流程圖
- activiti 獲取當前任務流程圖片的輸入流流程圖
- Java後臺Html轉圖片和獲取頁面屬性值，及圖片拼接JavaHTML
- Unity從圖片的位元組資料裡面獲取圖片的寬和高Unity
- js重新整理一次隨機更新圖片JS隨機
- php 隨機顯示圖片的函式程式碼PHP隨機函式
- 整理記錄一些好用的隨機圖API隨機API