【API】隨機獲取圖片

走馬勿觀花發表於2020-12-08

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);
?>

隨機獲取到的高質量圖片
2018-09-14
隨機
獲取app 圖片
2017-12-14
APP
PHP獲取隨機數
2017-12-11
PHP隨機
Random獲取隨機數
2014-04-18
random隨機
zabbix api 獲取圖形
2020-06-24
API
Android 從手機相簿獲取圖片 uri 路徑從相機獲取照片
2020-12-09
Android
基於隨機定位的地圖資訊獲取方式
2021-06-13
隨機地圖
獲取本地圖片/視訊
2018-08-17
地圖
iOS 獲取視訊圖片
2018-09-19
iOS
利用微信公眾號提供的官方API上傳圖片獲取永久圖片素材！當圖床用！
2022-06-22
API圖床
MATLAB獲取隨機數——rand
2013-01-20
Matlab隨機
獲取網路圖片的大小
2019-03-04
JavaScript獲取背景圖片定位值
2018-09-21
JavaScript
javascript如何獲取圖片的高度
2017-04-06
JavaScript
Java——獲取圖片尺寸和大小
2017-04-30
Java
獲取SDWebImage下載的圖片
2017-12-13
Web
用JavaScript獲取原始圖片尺寸
2014-05-28
JavaScript
google books api 獲取圖書資訊
2024-06-18
GoAPI
Docker Compose部署隨機圖API
2024-08-10
Docker隨機API
Java從List中獲取隨機元素
2018-09-17
Java隨機
直播app開發搭建，ios 獲取手機中所有圖片
2023-01-19
APPiOS
jquery獲取圖片的真實大小
2021-09-09
jQuery
JavaScript獲取圖片的真實大小
2021-09-09
JavaScript
使用ColorfulImg獲取圖片主題色！
2018-09-11
javascript如何獲取img圖片的尺寸
2017-04-01
JavaScript
獲取SD卡上所有的圖片
2014-07-11
SD卡
servlet awt隨機圖片驗證碼
2013-11-30
Servlet隨機
微信小程式開發之從相簿獲取圖片使用相機拍照本地圖片上傳
2017-08-10
微信小程式地圖
Excel 讀取圖片並獲取儲存路徑
2021-01-12
Excel
java獲取時間戳和隨機數
2020-10-29
Java時間戳隨機
為啥從SurfaceView中獲取不到圖片？
2019-02-26
View
Chrome 獲取網頁顏色（文字、圖片）
2022-04-06
Chrome網頁
js如何獲取圖片的長寬尺寸
2017-03-13
JS
js如何獲取圖片的真實尺寸
2017-03-23
JS
獲取遠端圖片的Blob資源
2017-12-05
為何我的程式獲取不了圖片？
2009-02-11
利用API獲取金融資料並畫圖
2020-12-15
API
隨機漂浮圖片廣告例項程式碼
2017-03-12
隨機

【API】隨機獲取圖片

文章目錄

一、直接設定src

1. 百變圖片API

2. 必應桌布API

二、獲取Blob檔案

1. 必應每日圖組（量少，快速）【配合後端抓取原始碼】

2. 直接ajax請求外部伺服器API（一）（量多，略慢）【可跨域訪問】

3. 直接ajax請求外部伺服器API（二）（量多，略慢）【可跨域訪問】

二、獲取JSON資料【未實現，待完善，留坑】

相關文章