js 本地图片转base64,不使用Input,不受不同源限制
时间: 2024-02-26 20:52:39 浏览: 75
图片转换base64
5星 · 资源好评率100%
可以使用 `FileReader` API 来读取本地文件并将其转换为 base64 格式。以下是一个示例代码:
```javascript
function getBase64FromFile(file, callback) {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
callback(reader.result);
};
reader.onerror = function (error) {
console.log('Error: ', error);
};
}
```
在这个函数中,我们使用 `FileReader` 对象的 `readAsDataURL` 方法将文件读取为 Data URL,然后在 `onload` 事件触发时调用回调函数将结果传递给它。最后,我们可以像这样使用它来转换文件:
```javascript
var fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.accept = '.jpg, .png';
fileInput.onchange = function () {
var file = fileInput.files[0];
getBase64FromFile(file, function (base64) {
console.log(base64);
});
};
fileInput.click();
```
这里我们创建了一个 `input` 元素,用户可以通过它选择要转换的文件。然后我们在 `onchange` 事件中获取选定的文件并调用 `getBase64FromFile` 函数将其转换为 base64。注意,我们在代码中没有使用 `input` 元素,因此它不会受到不同源限制的影响。
阅读全文