通过JavaScript加载本地图片并转换成Base64可以使用FileReader对象和Canvas对象来实现。以下是详细的步骤:
下面是示例代码:
// HTML
<input type="file" id="fileInput">
// JavaScript
document.getElementById('fileInput').addEventListener('change', function(event) {
var file = event.target.files[0];
var reader = new FileReader();
reader.onload = function(event) {
var dataURL = event.target.result;
var image = new Image();
image.onload = function() {
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
canvas.width = image.width;
canvas.height = image.height;
context.drawImage(image, 0, 0);
var base64 = canvas.toDataURL('image/png');
console.log(base64);
};
image.src = dataURL;
};
reader.readAsDataURL(file);
});
这段代码会监听input元素的change事件,当用户选择了图片文件后,会将图片转换为Base64格式的字符串,并打印在控制台上。
推荐的腾讯云相关产品:腾讯云对象存储(COS),用于存储和管理图片文件。产品介绍链接地址:https://cloud.tencent.com/product/cos
领取专属 10元无门槛券
手把手带您无忧上云