图片转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 编码。

读取文件

其中包含以下属性

读取完成时

相关推荐
lyj16899724 分钟前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
Coding小公仔2 小时前
C++ bitset 模板类
开发语言·c++
小白变怪兽2 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头2 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
小赖同学啊2 小时前
物联网数据安全区块链服务
开发语言·python·区块链
shimly1234562 小时前
bash 脚本比较 100 个程序运行时间,精确到毫秒,脚本
开发语言·chrome·bash
IT_10242 小时前
Spring Boot项目开发实战销售管理系统——数据库设计!
java·开发语言·数据库·spring boot·后端·oracle
墨菲安全3 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
GISer_Jing3 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript