js base64转图片 并显示
时间: 2023-12-01 07:33:56 浏览: 40
要将base64转换为图片并显示,你可以使用以下代码:
```javascript
var base64String = "your base64 string"; // 替换为实际的base64字符串
var imgElement = document.createElement("img");
imgElement.src = base64String;
document.body.appendChild(imgElement);
```
这段代码首先创建一个`<img>`元素,然后将base64字符串赋值给该元素的`src`属性。最后,将该元素添加到文档的`body`中,即可显示图片。
相关问题
前端base64转图片并显示
你可以使用JavaScript的atob()函数将Base64编码转换为二进制数据,然后将其转换为Blob对象,并创建一个URL,将其赋值给Image对象的src属性来显示图片。以下是一个示例代码:
HTML:
```
<img id="myImage" />
```
JavaScript:
```javascript
// Base64编码的图片数据
var base64Image = "data:image/png;base64,iVBORw0KG...";
// 将Base64编码转换为二进制数据
var binaryImage = atob(base64Image.split(',')[1]);
// 将二进制数据转换为Blob对象
var blobImage = new Blob([new Uint8Array(binaryImage)], {type: 'image/png'});
// 创建URL
var imageUrl = URL.createObjectURL(blobImage);
// 显示图片
document.getElementById("myImage").src = imageUrl;
```
这将在页面上显示一个Base64编码为PNG格式的图片。注意,如果您想在页面上显示多个Base64编码的图片,最好使用一个单独的函数来处理它们,以避免重复的代码。
base64转图片img显示
以下是使用JavaScript将base64转换为图片并在img标签中显示的方法:
```javascript
// 获取img标签
var img = document.getElementById('img');
// 将base64转换为Blob对象
function base64ToBlob(base64) {
var arr = base64.split(',');
var mime = arr[0].match(/:(.*?);/)[1];
var bstr = atob(arr[1]);
var n = bstr.length;
var u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {type:mime});
}
// 将Blob对象转换为URL
function blobToUrl(blob) {
return URL.createObjectURL(blob);
}
// 将base64转换为URL并显示在img标签中
function showImg(base64) {
var blob = base64ToBlob(base64);
var url = blobToUrl(blob);
img.src = url;
}
// 调用showImg函数
var base64 = '这里是base64字符串';
showImg(base64);
```