Base64字符串转图片是前端开发中经常用到的一个功能，可以方便的将图片插入到网页中去，而不需要引入外部的图片文件。本篇教程以JS为主，从选取图片、转换成Base64字符串、将Base64字符串转换成图片三个方面进行讲解。让我们一步步来学习吧。
一、选择图片
首先我们需要选择一个图片进行转换。在HTML中，我们可以使用input标签的type属性设置为file来创建一个选择文件的按钮，并且监听input的change事件。当选择完文件之后，change事件就会被触发，我们就可以通过这个事件来获取文件的信息了。
以下是获取文件信息的代码：
<input type="file" id="fileInput">
<script>
const fileInput = document.getElementById("fileInput");
fileInput.addEventListener("change", (event) => {
const file = event.target.files[0];
console.log(file);
});
</script>
当我们选择了一个.jpg或者.png等图片文件之后，控制台就会输出这个文件对象的信息，包括文件名、文件大小等等。接下来，我们需要将这个文件转换成Base64字符串。
二、将图片转换成Base64字符串
在JS中，可以使用FileReader API来将文件转换成Base64字符串。通过调用FileReader对象的readAsDataURL方法可以将文件读取成一个data URL，我们可以通过这个data URL来获取Base64字符串。
以下是将图片转换成Base64字符串的完整代码：
<input type="file" id="fileInput">
<script>
const fileInput = document.getElementById("fileInput");
fileInput.addEventListener("change", (event) => {
const file = event.target.files[0];
const reader = new FileReader();
reader.addEventListener("load", () => {
const base64String = reader.result;
console.log(base64String);
});
reader.readAsDataURL(file);
});
</script>
首先获取file对象，然后创建一个FileReader对象。监听FileReader对象的load事件，在load事件被触发时，我们就可以通过reader.result获取到Base64字符串。最后调用readAsDataURL方法将文件读取成data URL。
三、将Base64字符串转换成图片
我们已经成功地将图片文件转换成了Base64字符串，现在需要将这个Base64字符串转换成图片。HTML的img标签可以很容易地将Base64字符串显示为图片。我们只需要为img的src属性设置为Base64字符串就可以了。
以下是将Base64字符串转换成图片的完整代码：
<input type="file" id="fileInput">
<img id="image" alt="">
<script>
const fileInput = document.getElementById("fileInput");
const image = document.getElementById("image");
fileInput.addEventListener("change", (event) => {
const file = event.target.files[0];
const reader = new FileReader();
reader.addEventListener("load", () => {
const base64String = reader.result;
image.src = base64String;
});
reader.readAsDataURL(file);
});
</script>
我们在HTML中创建了一个img标签，并设置id属性为”image”。在JS中获取这个img标签的元素，并为其src属性设置为Base64字符串。
总结
通过上面的教程，我们已经学会了如何将图片文件转换成Base64字符串，并且将Base64字符串转换成图片。Base64字符串转图片在前端开发中是一个经常用到的功能，掌握这个技能对于我们的工作会非常有帮助。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/249093.html
微信扫一扫 
支付宝扫一扫 