图片转base64

news2025/1/12 0:16:47

图片转 base64

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

base64 编码转换

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

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

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

在这里插入图片描述

读取选择的文件

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 编码。

读取文件
其中包含以下属性
在这里插入图片描述

读取完成时

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1105290.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

集结AI创新力量,“华为云杯”2023人工智能应用创新大赛圆满落幕

在AI梦想照进现实的同时&#xff0c;一场历时近三个月的“华为云杯” 2023 人工智能应用创新大赛终于落下帷幕。自6月份启动以来&#xff0c;此次大赛在全国范围内汇聚AI人才、聚焦AI应用场景创新&#xff0c;今年大赛吸引了来自全国各地的5714名优秀精英和153个优秀团队报名参…

00TD时尚儿童穿搭,这件小熊毛衣太好看了吧

寒冷的秋冬季怎么少的了毛衣呢 软糯亲肤又时尚百搭的款谁不爱 除了纯色还有条纹设计 可爱小熊图案可爱又吸睛 经典时尚的款怎么穿都好看哦&#xff01;

二叉树的前 中 后序的非递归实现(图文详解)

&#x1f388;个人主页:&#x1f388; :✨✨✨初阶牛✨✨✨ &#x1f43b;强烈推荐优质专栏: &#x1f354;&#x1f35f;&#x1f32f;C的世界(持续更新中) &#x1f43b;推荐专栏1: &#x1f354;&#x1f35f;&#x1f32f;C语言初阶 &#x1f43b;推荐专栏2: &#x1f354;…

在亚马逊云科技Amazon SageMaker上进行Stable Diffusion模型训练和推理

Stable Diffusion Quick Kit是一个基于亚马逊云科技Amazon SageMaker进行Stable Diffusion模型快速部署的工具包&#xff0c;包括了一组示例代码、服务部署脚本、前端UI&#xff0c;可以帮助可以快速部署一套Stable Diffusion的原型服务。 本文将介绍如何在SageMaker Training …

想要上抖音同城热搜榜很难吗

首先&#xff0c;我们需要了解抖音同城热搜榜的推荐机制。抖音采用了先进的推荐算法&#xff0c;根据用户的行为、兴趣和社交关系进行内容推荐。一个具有话题性的内容往往能够引发用户的讨论和传播。在创作过程中&#xff0c;可以从热门事件、潮流话题、地域特色等方面切入&…

VB.Net 任务管理器相关操作

WindowsExplorer 任务管理器 程序对进程文件操作类&#xff1a;&#xff08;实例&#xff09; 1、打开进程文件目录 2、激活窗口&#xff08;有主窗口的程序&#xff09; 3、关闭程序&#xff08;向进程文件发送关闭指令&#xff09; 4、结束进程 5、挂起 6、恢复挂起 …

MDNNSVM

介绍 h v , l ^{v,l} v,l σ \sigma σ((W v , l ) T ^{v,l})^T v,l)Th v , l − 1 ^{v,l-1} v,l−1b v , l ^{v,l} v,l) h 1 ^1 1 σ \sigma σ( ∑ v 1 V \sum_{v1}^V ∑v1V​W v , L 1 ) T ^{v,L1})^T v,L1)Th v , L ^{v,L} v,Lb v , L 1 ^{v,L1} v,L1) h 1 ^1 1是融合DN…

群晖synology DSM 7.2设置钉钉Webhooks通知

现在越来越多的小伙伴都有了自己的Nas系统&#xff0c;为了更加方便的接收Nas的消息&#xff0c;这篇文章带着大家一起配置一个钉钉&#xff08;机器人&#xff09;即时消息通知 首先登录钉钉的开放平台&#xff1a;开发者后台统一登录 - 钉钉统一身份认证 1.创建一个机器人&…

getBoundingClientRect使用场景(table固定表头)

getBoundingClientRect()用于获得页面中某个元素的左&#xff0c;上&#xff0c;右和下分别相对浏览器视窗的位置&#xff0c;是DOM元素到浏览器可视范围的距离&#xff08;不包含文档scroll的部分&#xff09;。该函数返回一个Object对象&#xff0c;该对象有6个属性&#xff…

【前端学习】—箭头函数和普通函数的区别(十四)

【前端学习】—箭头函数和普通函数的区别&#xff08;十四&#xff09; 一、箭头函数和普通函数的区别 const obj{fullName:zz,sayName(){console.log(this.fullName,this.fullName)//zz}}obj.sayName();const obj{fullName:zz,sayName:()>{console.log(this.fullName,this…

魔行观察》一款免费的品牌/商业地产数据查询平台

给大家推荐一款免费的商业数据查询平台"魔行观察"&#xff0c;可免费查询品牌&#xff0c;品牌门店&#xff0c;商场&#xff0c;全国小区&#xff0c;写字楼等相关信息&#xff0c;更多数据敬请期待 小程序搜索&#xff1a;魔行观察 即可使用

光致发光荧光量子检测溶液有哪些优点?

光致发光荧光量子检测是一种测试技术&#xff0c;可以用来测量荧光材料的荧光光谱、荧光量子效率和发光寿命等参数&#xff0c;具有高灵敏度、高分辨率和自动化程度高等优点。在溶液状态下&#xff0c;荧光材料会吸收一定波长的光能并释放出次级光&#xff0c;即荧光&#xff0…

77.每日一练:迭代器遍历容器(牛客)

目录 问题描述&#xff1a; 代码解决以及思想 知识点 问题描述&#xff1a; 代码解决以及思想 #include <iostream> // write your code here...... #include <vector>using namespace std;int main() {// write your code here......vector<int> v;for (…

WMS系统盘点管理

一、定义 WMS系统的盘点管理是指对仓库内的物料、商品和库存进行周期性或特定时点的实际数量核对和比对系统记录的过程。它旨在确保仓库库存的准确性&#xff0c;发现和纠正库存偏差&#xff0c;并提供可靠的库存数据供企业决策使用。 二、流程 WMS系统盘点管理的流程通常包括…

深度学习 | CNN卷积核与通道

10.1、单通道卷积 以单通道卷积为例&#xff0c;输入为&#xff08;1,5,5&#xff09;&#xff0c;分别表示1个通道&#xff0c;宽为5&#xff0c;高为5。 假设卷积核大小为3x3&#xff0c;padding0&#xff0c;stride1。 运算过程&#xff1a; 不断的在图像上进行遍历&#…

Java对象数组练习

定义数组存储三个商品对象&#xff0c;商品的属性&#xff1a;id&#xff0c;名字&#xff0c;价格&#xff0c;库存&#xff0c;创建三个商品对象&#xff0c;并把商品对象存入到数组中 public class Goods {private String id;private String name;private double price;pri…

【深度学习基础知识(一):卷积神经网络CNN基础知识】

深度学习基础知识 深度学习基础知识&#xff08;一&#xff09;&#xff1a;卷积神经网络CNN基础知识 卷积神经网络CNN基础知识 0、目录 1. CNN卷积神经网络的特点 2. 卷积操作基础知识 2.1 卷积操作的概念2.2 卷积操作的种类2.3 卷积操作后特征图谱大小计算公式 3. 池化操…

定制化推送+精细化运营,Mobpush助力《迷你世界》用户留存率提升23%

随着智能设备的市场下沉&#xff0c;手游市场迎来了爆发式增长&#xff0c;《迷你世界》作为一款于2015年推出的手游&#xff0c;一经问世就饱受欢迎。上线短短三年&#xff0c;迷你世界在应用商店下载量已经高达2亿次&#xff0c;周下载量两千万&#xff0c;稳居第一名&#x…

只会Python,怎么用PC控制无人机自动飞行?

PC-SDK是阿木实验室 (AMOVLAB) 为了简化开源飞控的控制协议MAVLink&#xff0c;优化和维护的一个基于PC电脑运行MAVSDK(支持Windows和Ubuntu)的Python SDK库。 相对于传统的无人机控制开发&#xff0c;开发者无需掌握C/C语言和ROS等相关知识&#xff0c;只要学会Python编程及懂…

百度最强大模型发布,百度网盘和文库的实测体验

&#x1f341; 展望&#xff1a;若本篇讲解内容帮助到您&#xff0c;请帮忙点个赞吧, 您的支持是我继续写作的最大动力. 关注我, 带您了解更多 AI 资讯和 AI 小技巧. 引言 2023年百度世界大会在10月17日的春光中于北京的首钢园精彩召开。这次大会的核心主题——“生成未来 PRO…