图片转base64

图片转 base64

我们将展示如何将图片转换为 base64 编码,并演示如何读取选择的文件并显示在页面中。

base64 编码转换

javascript 复制代码
const a = atob("sasd"); // 将 base64 编码转换为原始字符串
console.log(a); // sasd

const b = btoa(a); // 将原始字符串转换为 base64 编码
console.log(b); // c2FzZA==

在上述代码中,我们使用了 atob() 函数将 base64 编码转换为原始字符串,以及 btoa() 函数将原始字符串转换为 base64 编码。通过这两个函数,我们可以在 base64 编码和原始字符串之间进行转换。

读取选择的文件

javascript 复制代码
const imgFile = document.getElementById("imgFile");
const image = document.querySelector("img");

imgFile.onchange = () => {
  const file = imgFile.files[0]; // 读取选择的文件
  const reader = new FileReader();
  reader.readAsDataURL(file);

  // 当文件读取完成时
  reader.onload = () => {
    image.src = reader.result;
    console.log(reader.result);
  };
};

在上述代码中,我们使用了 FileReader 对象来读取选择的文件,并将其显示在页面中的 <img> 元素上。让我们逐步解释这些操作:

  1. 首先,我们通过 document.getElementById("imgFile") 获取了一个具有 id 属性为 "imgFile" 的元素,这通常是一个文件选择框(<input type="file">)。

  2. 然后,我们通过 document.querySelector("img") 获取了页面中的第一个 <img> 元素,用于显示选择的图片。

  3. 当文件选择框的值发生变化时,即用户选择了文件后,imgFile.onchange 事件被触发。

  4. 在事件处理程序中,我们通过 imgFile.files[0] 获取了选择的文件对象,这里假设用户只选择了一个文件。

  5. 创建了一个 FileReader 对象,并调用 readAsDataURL() 方法开始读取文件。这将以 Data URL 的形式读取文件内容。

  6. 当文件读取完成时,reader.onload 事件被触发。在事件处理程序中,我们将读取的结果(Data URL)赋值给 <img> 元素的 src 属性,以显示选择的图片。

  7. 同时,我们通过 console.log(reader.result) 打印了读取的结果,即图片的 base64 编码。

通过这段代码,我们可以实现选择文件并将其显示在页面中,同时获取图片的 base64 编码。

读取文件

其中包含以下属性

读取完成时

相关推荐
golitter.27 分钟前
python的异步、并发开发
开发语言·python
SirLancelot131 分钟前
数据结构-Set集合(一)Set集合介绍、优缺点
java·开发语言·数据结构·后端·算法·哈希算法·set
LZQqqqqo31 分钟前
c#_文件的读写 IO
开发语言·c#
haaaaaaarry37 分钟前
Element Plus常见基础组件(一)
java·前端·javascript·vue.js
qingyingWin1 小时前
原生微信小程序研发,如何对图片进行统一管理?
前端·微信小程序
不懂英语的程序猿1 小时前
【JEECG】JVxeTable表格拖拽排序功能
前端·后端
拾光拾趣录1 小时前
前端灵魂拷问:从URL到Redux,17个常见问题
前端·面试
萌萌哒草头将军1 小时前
Prisma ORM 又双叒叕发布新版本了!🚀🚀🚀
前端·javascript·node.js
mldong2 小时前
推荐一款超高颜值的后台管理模板!Art-Design-Pro!开源!免费!
前端·vue.js·架构
草字2 小时前
uniapp 如果进入页面输入框自动聚焦,此时快速返回页面或者跳转到下一个页面,输入法顶上来的页面出现半屏的黑屏问题。
java·前端·uni-app