前端base64编码转图片
时间: 2023-10-09 08:09:17 浏览: 258
好的,我可以回答这个问题。你可以使用以下 JavaScript 代码将 base64 编码转换成图片:
```
var img = new Image();
img.src = 'data:image/png;base64, ' + base64Code;
document.body.appendChild(img);
```
其中, `base64Code` 是 base64 编码字符串。
相关问题
前端base64转图片
前端可以通过使用JavaScript将Base64编码的图像数据转换为图片。以下是一个简单的示例代码:
```javascript
// Base64编码的图像数据
var base64Data = "data:image/png;base64,iVBORw0KG...";
// 创建一个新的Image对象
var img = new Image();
// 设置Image对象的src为Base64编码的图像数据
img.src = base64Data;
// 等待图像加载完成后执行回调函数
img.onload = function() {
// 在DOM中添加图像元素
document.body.appendChild(img);
};
```
这段代码将Base64编码的图像数据赋值给一个新创建的Image对象的src属性,然后等待图像加载完成后将图像元素添加到DOM中。你可以根据需要修改代码来适应你的项目。
vue 前端base64转图片
Vue.js 中可以使用 JavaScript 的内置 `atob` 和 `Buffer` 或者第三方库如 `js-base64` 来将 Base64 编码的图片转换为真正的图片。以下是一个简单的示例:
```javascript
// 使用原生方法
function base64ToImage(base64) {
return new Promise((resolve, reject) => {
const data = window.atob(base64);
const mime = 'image/jpeg'; // 或者根据Base64编码推断图片类型
const buffer = Buffer.from(data, 'binary');
let blob = new Blob([buffer], { type: mime });
if (window.URL.createObjectURL) {
resolve(URL.createObjectURL(blob));
} else {
reject('Your browser does not support object URLs.');
}
});
}
// 示例用法
axios.get('/api/image', { responseType: 'blob' })
.then(response => base64ToImage(response.data.toString()))
.then(imgUrl => {
// 将imgUrl赋值给HTML元素的src属性
document.getElementById('my-image').src = imgUrl;
})
.catch(err => console.error(err));
```
这里假设你已经通过 Axios 获取到了 Base64 编码的图片数据。如果浏览器支持 `createObjectURL`,则可以直接创建 URL 对象表示图片,然后设置到 HTML 元素的 `src` 属性。
阅读全文