将图像存储为 Blob 格式。
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
介绍
从 API 获取图片时，我们通常通过 URL 获取图片，但每次需要重复使用该图片时，都必须发送新的获取请求。这种重复操作非常繁琐。作为一种替代方案，我们可以将从 URL 获取的图片转换为 base64 编码的 blob 对象，然后直接在src属性中使用。
目标
在本教程中，用户将学习如何将图像转换为 Blob 格式，并将其存储为 Blob 格式。这些图像将从 API 获取，并在 React 应用中显示。
设置
我们的 React 应用只有一个页面，上面并排显示从 API 获取的图像和从 base64 格式获取的图像。是不是很酷？😎 让我们深入了解一下。
创建我们的应用程序
本项目将使用 ReactJs。要设置 React，我们需要在命令行界面 (CLI) 中使用以下命令：
bash
npx create-react-app images
这将创建一个名为 `<project_name>` 的项目文件夹，images我们将使用该文件夹来存放我们的应用程序。您可以在代码编辑器中打开此文件夹。您的应用程序结构应类似于下面的树状图：
bash
┣ 📂public
┃ ┣ 📜favicon.ico
┃ ┣ 📜index.html
┃ ┣ 📜logo192.png
┃ ┣ 📜logo512.png
┃ ┣ 📜manifest.json
┃ ┗ 📜robots.txt
┣ 📂src
┃ ┣ 📜App.css
┃ ┣ 📜App.js
┃ ┣ 📜App.test.js
┃ ┣ 📜index.css
┃ ┣ 📜index.js
┃ ┣ 📜logo.svg
┃ ┣ 📜reportWebVitals.js
┃ ┗ 📜setupTests.js
┣ 📜.gitignore
┣ 📜package-lock.json
┣ 📜package.json
┣ 📜README.md
┗ 📜yarn.lock
我们将使用该App.js文件创建图像查看页面，并在文件中添加一些样式App.css，以使我们的网页外观更好。
创建我们的图像视图页面
首先，我们将清理文件中大部分锅炉代码，App.js直到得到以下结构：
js
import "./App.css";
import react from "react";
function App() {
return (
<div className="App">
</div>
);
}
export default App;
我们的应用需要一个搜索栏来获取要显示的图片。我们首先来构建这个功能：
js
<div className="App">
<input type="search" placeholder="Find Image" />
<button type="submit">Find</button>
</div>
这里，我们设置了search input用于搜索图片的标签和一个用于提交图片的按钮。要在浏览器中查看我们的应用，我们需要npm start在命令行界面 (CLI) 中运行命令。在浏览器中访问该localhostURL，您将看到类似下图的结果：
看起来有点单调，对吧？我们来添加一些样式，让它更生动一些。我们可以将这些样式添加到文件中App.css：
css
.App {
text-align: center;
font-family: monospace;
padding-top: 8px;
}
input {
padding: 8px 4px;
border: 1px solid #e8e8e8;
margin: 8px;
}
button {
padding: 8px 15px;
text-transform: uppercase;
font-weight: bolder;
background: rgb(54, 54, 255);
border: none;
color: #fff;
border-radius: 4px;
cursor: pointer;
}
现在，在我们的浏览器中，我们看到以下结果：
看起来好多了。接下来，我们将从 Unsplash API 获取并显示图片。
创建 Unsplash 帐户
Unsplash API为我们提供了一种从 Unsplash 获取高质量图片的方法，我们可以将这些图片用于各种用途。要创建用户帐户，请访问Unsplash 页面并点击“注册为开发者”按钮。在下一页的表单中填写您的详细信息并创建用户帐户。点击“创建新应用”，系统会提示您接受一些“条款和协议”，然后您就可以创建新应用了。
最后，我们需要access credentials下一页底部的密钥。复制此密钥并将其保存到您的App.js文件中。
js
const key = "your access key";
在本教程中，我们将把访问密钥硬编码到程序中。通常情况下，最好将此密钥存储在文件中，或者使用像Doppler.env这样的密钥管理应用程序服务来存储密钥。
正在从 Unsplash 获取图片
现在我们有了访问密钥，就可以使用 Unsplash API 获取图片了。我们将使用axios它来发出请求。我们可以使用axios以下命令在 CLI 中安装它。
npm install axios
设置完成后，我们来获取镜像。我们将把这个模块导入到App.js文件中，然后发出请求。
...
import axios from "axios";
function App(){
...
const link = "https://api.unsplash.com/search/photos";
axios
.get(link, {
params: {
client_id: key,
query: "hp",
},
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.then(function () {});
}
上面我们已经设置好了fetch请求。link变量包含我们URL用于获取图片的参数。我们的axios请求在链接参数中使用了该变量key，并搜索查询“hp”。一旦收到响应，响应内容将记录在我们的控制台中。以下是响应示例。
响应包含一个包含十张图片的数组。我们进展顺利，image view页面即将完成，现在只需要获取URl响应中其中一张图片的属性。首先，我们需要一个变量来存储这个属性URL，并在应用程序中使用它。
const [image, setImage] = react.useState("");
然后我们可以将其设置为响应中的setImage第一个值。URL
...
query: "hp",
},
})
.then(function (response) {
setImage(response.data.results[0].urls.regular);
...
这样，我们就可以img在应用程序中创建一个标签，并将src属性设置为image
<img src={image} alt="" />
还有一点，我们需要将搜索范围设置query为我们输入的内容，search bar而不是字符串“hp”。为此，我们将创建一个状态变量来存储输入字段的值，然后将该变量放入fetch request一个函数中，该函数将在点击“查找”按钮时被调用。
const [query, setQuery] = react.useState("");
...
<input
type="search"
placeholder="Find Image"
onChange={(e) => {
setQuery(e.target.value);
}}
/>
然后，对于我们的Find按钮
<button type="submit" onClick={() => handleSubmit()}>
...
以及该handleSubmit()功能
function handleSubmit() {
axios
.get(link, {
params: {
client_id: key,
query: query,
},
...rest of the code
query在这里，我们将输入字段中的搜索内容添加到了params请求中fetch。现在，当我们点击“查找”按钮时，就会看到根据搜索内容显示的图片。
我们可以通过样式表来安排页面的显示顺序App.js。
.App {
...
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
将图像转换为 Blob
我们现在来到了应用程序的核心部分：将图像从我们的原始格式转换URL为 Base64 格式。要将图像转换为 Base64 格式，首先图像必须是“blob”类型。Blob 是“Binary Large Object”（二进制大对象）的缩写，是一种可以存储二进制数据的数据类型。
要将图像转换为数据，URL我们需要使用File Reader
...
setImage(response.data.results[0].urls.regular);
getDataBlob(image);
async function getDataBlob(url) {
var res = await fetch(url);
var blob = await res.blob();
var base64img = await parseURI(blob);
console.log(base64img);
}
async function parseURI(d) {
var reader = new FileReader();
reader.readAsDataURL(d);
return new Promise((res, rej) => {
reader.onload = (e) => {
res(e.target.result);
};
});
}
上面我们有两个async用于图像转换的函数。第一个getDataBlob函数接收来自URL响应的图像数据，并将res其转换为二进制数据blob。然后，我们使用第二个函数获取图像的二进制数据FileReader。在控制台中，我们可以看到一长串字符，这些字符构成了图像的二进制数据。为了使用这些数据，我们将它存储在一个变量中，并将其添加到src另一个img标签的属性中。
const [newimg, setNewimg] = react.useState("");
console.logging然后，我们可以将此值设置为“base64img”，而不是“base64img” setNewimg。
setNewimg(base64img);
最后，我们可以创建另一个img标签来使用src“newimg”。
<img src={image} alt="image 1" />
<img src={newimg} alt="image 2" />
以上是我们的两个img标签。前者使用 API 的响应作为数据源，后者使用blob数据 URL 作为数据源。
以下是输出结果示例
结论
太棒了！本教程到此结束。在本教程中，我们学习了如何从 Unsplash API 获取图片，将其转换为 blob 类型，并获取数据 URL 以便在我们的应用程序中使用。
文章来源：https://dev.to/victorytuduo/storing-images-as-blob-1i46