在web开发中，我们经常需要处理图片，而在某些场景下，我们需要将图片嵌入到HTML文本中，这时使用Base64编码的方式将图片转换为字符串十分方便。本文将介绍如何使用JS实现将图片转换为Base64编码的功能。
一、选取图片的方式
在使用JS将图片转换为Base64编码之前，我们需要先选取图片。有多种方法可以选取图片，包括：
1. 直接使用图片的URL
可以直接将图片的URL作为参数传入JS函数中：
function getBase64FromUrl(imgUrl) {
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.crossOrigin = 'Anonymous';
img.onload = function() {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
var base64Data = canvas.toDataURL('image/png');
console.log(base64Data);
};
img.src = imgUrl;
}
使用这种方式选取图片需要注意跨域问题，需要使用`crossOrigin`属性，并且服务器也需要设置相关的响应头。
2. 使用input标签选择文件
可以使用input标签的type为file的特性，让用户选择本地文件，并将选取的文件传入JS函数中：
function getBase64FromFile(file) {
var reader = new FileReader();
reader.onload = function(event) {
var base64Data = event.target.result;
console.log(base64Data);
};
reader.readAsDataURL(file);
}
document.getElementById('file-input').addEventListener('change', function(e) {
getBase64FromFile(e.target.files[0]);
});
使用这种方式选取图片需要注意，在获取文件数据之前，需要使用FileReader对象将文件读入内存。
二、将图片转换为Base64编码的步骤
选取图片后，我们需要将图片转换为Base64编码。这个步骤可以分为以下几个步骤：
1. 创建Canvas对象
我们需要创建一个Canvas对象，将图片绘制到Canvas上：
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
2. 绘制图片到Canvas上
我们将选取的图片绘制到Canvas上：
var img = new Image();
img.onload = function() {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
};
img.src = imgUrl;
3. 将Canvas转换为Base64编码
我们使用Canvas的toDataURL方法将Canvas对象转换为Base64编码：
var base64Data = canvas.toDataURL('image/png');
console.log(base64Data);
我们可以选择将Canvas转换为其他格式的Base64编码，比如JPEG格式：
var base64Data = canvas.toDataURL('image/jpeg', 0.5);
console.log(base64Data);
在将Canvas转换为Base64编码时，我们还可以设置图片的质量，第二个参数表示质量系数，范围为0~1。
三、完整代码
下面是将图片转换为Base64编码的JS函数：
function getBase64FromUrl(imgUrl) {
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.crossOrigin = 'Anonymous';
img.onload = function() {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
var base64Data = canvas.toDataURL('image/png');
console.log(base64Data);
};
img.src = imgUrl;
}
function getBase64FromFile(file) {
var reader = new FileReader();
reader.onload = function(event) {
var base64Data = event.target.result;
console.log(base64Data);
};
reader.readAsDataURL(file);
}
使用方法：
var imgUrl = 'http://example.com/image.png';
getBase64FromUrl(imgUrl);
document.getElementById('file-input').addEventListener('change', function(e) {
getBase64FromFile(e.target.files[0]);
});
四、总结
使用JS将图片转换为Base64编码十分简单，我们只需要选取图片，将图片绘制到Canvas上，再将Canvas转换为Base64编码即可。在实际开发中，我们可以根据具体的需求选择不同的选取图片的方式以及不同的Base64编码格式。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/182208.html
微信扫一扫 
支付宝扫一扫 