js 读取本地图片转base64

在Web开发中，我们经常需要将本地的图片转换为Base64格式的数据进行操作。使用JavaScript可以方便地将图片转换为Base64格式的数据，具体实现步骤如下：

1. 选择需要转换的图片

首先需要选择需要转换的图片文件，可以通过input标签的type属性为“file”来实现，当用户点击该input标签时会弹出本地文件选择框。

<input type="file" id="inputFile" />

2. 读取图片文件

接下来需要将用户选择的图片文件读取为一个二进制数据，可以使用FileReader对象实现，该对象的readAsDataURL方法可以将图片文件读取为一个dataURL，其中dataURL即为Base64格式的数据。

var inputFile = document.getElementById('inputFile');
var file = inputFile.files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function() {
    var base64 = reader.result;
    console.log(base64);
}

3. 显示Base64数据

最后需要将Base64数据显示在页面上，可以将其赋值给img标签的src属性，实现图片的显示。

var img = document.createElement('img');
img.src = base64;
document.body.appendChild(img);

总的来说，使用JavaScript读取本地图片并转换为Base64格式的过程需要先通过input标签选择文件，再通过FileReader对象将文件读取为Base64数据，并将其显示在页面上。这一过程在后台开发和前端开发中都比较常见，掌握此技能对于我们的开发工作都有着非常重要的意义。