使用Unsplash API生成随机图片

[使用 Unsplash API 生成随机图片 Angus的博客](https://www.imyangyong.com/blog/2020/06/javascript/%E4%BD%BF%E7%94%A8%20Unsplash%20API%20%E7%94%9F%E6%88%90%E9%9A%8F%E6%9C%BA%E5%9B%BE%E7%89%87/)

如果你想使用免费版权的图片时，无论你是否用于商业用途，Unsplash 是不错的选择。

我自己也经常用它来制作大型背景图片，例如：https://www.imyangyong.com。

虽然他们为开发人员提供了很棒的 API，但他们也提供了通过 URL 访问随机图片的选项。

1. 默认随机

请看这个例子，从他们巨大的存储中生成随机的图片。

1
 
https://source.unsplash.com/random

2.指定用户

我们还可以从特定用户账号中生成随机图像。URL 格式是这样的:

1
 
https://source.unsplash.com/user/{USERNAME}

你可以尝试单击下面的链接，从我的账号中随机生成图片：

https://source.unsplash.com/user/angusyang9/likes

3. 指定尺寸

还有一个选项可以设置要生成的图像的大小。像这样:

1
 
https://source.unsplash.com/random/{WIDTH}x{HEIGHT}

让我们生成下 300 x 300 大小的图片：

https://source.unsplash.com/random/300×300

4. 依据关键词搜索

这个真的很棒。你可以从搜索词生成图像。让我们搜索下城市和夜晚（非常有创意）：

https://source.unsplash.com/random/?city,night

当然，你可以与尺寸配合使用：

https://source.unsplash.com/random/900×700/?fruit

代码示例

以下是 react 中的代码片段：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
class RandomImg extends React.Component {
 constructor() {
 super();
 this.state = {
 bgImageUrl: require('./default.jpeg')
 }
 }
 
 componentDidMount() {
 this.generateImage();
 }
 
 generateImage(){
 fetch(`https://source.unsplash.com/random/?people`).then((response) => {
 preloadImage(response.url);
 })
	}
 
 preloadImage(url) {
 let img = new Image();
 img.src = url;
 img.onload = () => {
 this.setState({
 bgImageUrl: url
 });
 }
	}
 
 render() {
 return <img src={bgImageUrl} />
 }
}

参考链接

反向链接：

∑ 文章笔记
x:: [[» 文章笔记工作流]]