js中图片转base64
时间: 2023-11-15 13:59:34 浏览: 42
在JavaScript中,可以使用FileReader对象将图片转换为base64编码。以下是一个简单的示例代码:
```
function getBase64Image(imgUrl) {
var xhr = new XMLHttpRequest();
xhr.open("get", imgUrl, true);
xhr.responseType = "blob";
xhr.onload = function() {
if (this.status == 200) {
var blob = this.response;
var fileReader = new FileReader();
fileReader.onloadend = function(e) {
var base64Img = e.target.result;
console.log(base64Img);
};
fileReader.readAsDataURL(blob);
}
};
xhr.send();
}
```
在这个示例中,我们首先使用XMLHttpRequest对象获取图片的blob对象。然后,我们创建一个FileReader对象,并将blob对象传递给它的readAsDataURL方法。当读取完成时,FileReader对象的onloadend事件将被触发,我们可以在这里获取base64编码的图片。
相关问题
js 图片src转base64
在JavaScript中,将图片转换为Base64编码,通常用于在线预览或者发送到服务器不需保存文件的情况下。你可以使用FileReader API来实现这个功能。以下是一个简单的示例:
```javascript
function imgToBase64(url, callback) {
var reader = new FileReader();
reader.onload = function(e) {
callback(e.target.result);
};
reader.readAsDataURL(url);
}
// 使用方法
var imageUrl = 'path/to/your/image.jpg'; // 替换为你的图片路径
imgToBase64(imageUrl, function(base64Image) {
// base64Image现在就是图片的Base64编码
console.log('Base64 Image:', base64Image);
});
```
在这个示例中,`imgToBase64`函数接收一个URL和一个回调函数。当图片读取完成并转换为Base64编码后,回调函数会被调用,参数就是Base64字符串。
js 本地图片转base64
以下是将本地图片转换为Base64的JavaScript代码示例:
```javascript
function getBase64FromFile(file, callback) {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function() {
var base64 = reader.result.replace(/^data:(.*;base64,)?/, "");
if (typeof callback === "function") {
callback(base64);
}
};
}
// 使用方法
var fileInput = document.getElementById("fileInput");
var file = fileInput.files[0];
getBase64FromFile(file, function(base64) {
console.log(base64);
});
```
在这个示例中,我们创建了一个名为 `getBase64FromFile` 的函数,它接受一个文件对象和一个回调函数作为输入参数。该函数使用 `FileReader` 对象将文件读取为Base64字符串,并从结果中删除前缀。如果回调函数被提供,它将返回Base64字符串。
在使用示例中,我们从HTML文件中获取文件输入元素,并传递其第一个文件对象给 `getBase64FromFile` 函数。在回调函数中,我们将Base64字符串输出到控制台。