[前后端基础]图片详解

[前后端基础]图片传输与异步-CSDN博客

https://juejin.cn/post/6844903782959022093#heading-3

base64、file和blob用JS进行互转的方法大全【前端】_js base64转blob-CSDN博客

后端存储方式

对于第一种存储方式，我们前端直接将存储路径赋值给 src 属性即可轻松显示。
对于第二种存储方式，我们前端需要将其二进制流交由 blob 对象处理，然后通过 blob 的 API 生成临时 URL 赋值给 src 属性来显示。

三种类型转换

前端显示方式

url: 一般来说，图片的显示还是建议使用url的方式比较好。如果后端传过来的字段是图片路径的话。

base64：如果图片较大，图片的色彩层次比较丰富，则不适合使用这种方式，因为其Base64编码后的字符串非常大，会明显增大HTML页面，影响加载速度。

blob: 当后端返回特定的图片二进制流的时候，前端用blob容器接收。

前后端之间传递照片

在前后端之间传递照片，通常可以采用以下几种方式：

Base64 编码传输：将图片转换为 Base64 编码的字符串，然后通过接口传递到后端，后端再将 Base64 字符串转换回图片格式。这种方式简单易行，但会增加数据量，并且传输的内容会被增大约 33%。

文件上传：前端通过表单或其他方式将图片文件上传到后端服务器，后端接收到文件后保存在服务器上，并返回文件的地址或标识给前端，前端可以通过这个地址或标识来获取图片。

使用 Blob 对象：前端可以将图片封装为 Blob 对象，并使用 FormData 将 Blob 对象传递到后端。后端可以通过接收 FormData 来获取图片数据。

使用流传输：前端可以将图片数据通过流的方式传输到后端，后端接收到流后进行处理。这种方式适用于大文件传输，可以减少内存占用。

WebSocket 传输：使用 WebSocket 在前后端之间建立持久连接，前端将图片数据通过 WebSocket 传输到后端。这种方式适用于实时性要求较高的场景

前端怎样使用后端传来的base64编码图片

前端可以通过以下步骤使用后端传来的 Base64 编码图片：

接收 Base64 编码图片：后端将 Base64 编码图片作为响应数据发送给前端。

创建图片元素：前端可以使用 JavaScript 创建一个图片元素，或者直接将 Base64 编码图片赋值给已存在的图片元素的 src 属性。

设置图片源：将接收到的 Base64 编码图片作为图片元素的 src 属性值

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Display Base64 Image</title>
</head>
<body><img id="image" alt="Base64 Image"><script>// 假设后端传来的 Base64 编码图片存储在变量 base64Image 中const base64Image = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...";// 创建图片元素const imgElement = document.getElementById("image");// 设置图片源imgElement.src = base64Image;</script>
</body>
</html>