在前端 将base64 字节数组转换为url显示图片
时间: 2024-02-17 14:04:44 浏览: 36
在前端将 Base64 编码的字节数组转换为 URL 显示的图片,可以通过以下步骤实现:
1. 将 Base64 编码的字节数组转换为字符串。
2. 将字符串拼接为 data URI。
3. 将 data URI 赋值给 img 标签的 src 属性,从而显示图片。
下面是 JavaScript 代码示例:
```javascript
// 将 Base64 编码的字节数组转换为 URL 显示的图片
function base64ToImageUrl(imageBytes) {
// 将字节数组转换为字符串
const imageString = btoa(String.fromCharCode.apply(null, imageBytes));
// 将字符串拼接为 data URI
const imageUrl = `data:image/png;base64,${imageString}`;
// 将 data URI 赋值给 img 标签的 src 属性
const img = document.createElement('img');
img.src = imageUrl;
document.body.appendChild(img);
}
```
其中,`imageBytes` 为 Base64 编码的字节数组。调用 `base64ToImageUrl(imageBytes)` 函数即可将图片显示在页面中。
相关问题
base64 字节数组转换为url显示图片
将 Base64 编码的字节数组转换为 URL 显示的图片,需要进行以下步骤:
1. 将 Base64 编码的字节数组转换为字符串。
2. 将字符串中的 '+', '/', '=' 字符替换为 URL 安全的字符。
3. 将字符串转换为 URL。
下面是 Java 代码示例:
```java
import java.util.Base64;
import java.net.URLEncoder;
public class Base64ToImageUrl {
public static void main(String[] args) {
byte[] imageBytes = ...; // Base64 编码的字节数组
// 将字节数组转换为字符串
String imageString = Base64.getEncoder().encodeToString(imageBytes);
// 将字符串中的 '+', '/', '=' 字符替换为 URL 安全的字符
imageString = imageString.replace("+", "-").replace("/", "_").replace("=", "");
// 将字符串转换为 URL
String imageUrl = "data:image/png;base64," + imageString;
try {
imageUrl = URLEncoder.encode(imageUrl, "UTF-8");
} catch (Exception e) {
e.printStackTrace();
}
System.out.println(imageUrl);
}
}
```
其中,最后生成的 `imageUrl` 即为可在 URL 中显示的图片地址。
如何将字节数组转换为Base64字符串?
可以使用Java中的Base64类来将字节数组转换为Base64字符串。下面是一个示例代码:
```java
import java.util.Base64;
public class Main {
public static void main(String[] args) {
// 示例字节数组
byte[] byteArray = {1, 2, 3, 4, 5};
// 使用Base64编码字节数组
String base64String = Base64.getEncoder().encodeToString(byteArray);
System.out.println("Base64字符串: " + base64String);
}
}
```
输出:
```
Base64字符串: AQIDBAU=
```