当前位置: 首页 > news >正文

前端图片转base64,并使用canvas对图片进行压缩

目录

1.图片转base64的应用场景

2.图片转base64代码

3.对上传的图片进行压缩


1.图片转base64的应用场景

图片转base64通常用在用户上传图片的情况下使用,他的作用就是让用户看到预览的图片不受网络的影响。

这是传统的文件传输的流程:首先是用户选择图片上传至服务器,服务器保存接收返回一个url地址,然后客户端带着这个url地址再去请求图片,最后才拿到用户上传的图片预览,这个过程如果是网络不好的情况,很影响用户的体验。

 这是图片转base64的上传流程

 在上传的时候不需要依赖服务器的请求,直接在客户端就进行转换,利用的是文件IO读取,这个不受网络IO的影响,并且比网络要快的多

并且如果有编辑图片的需求,是不是又得重新进行一次第一步的步骤,如果网络不好,非常的影响用户的体验。

so,图片转base64的最主要的原因就是为了提高用户的体验

2.图片转base64代码

html的结构

  <!-- 上传图片 --><input type="file"><img src="" alt="" id="IMG">

现在来说js代码

先直接把代码贴出来在解释吧

 const IMG = document.getElementById('IMG');const ipt = document.querySelector('input');ipt.onchange = function () {const file = ipt.files[0];const reader = new FileReader();reader.onload = (e) => {IMG.src = e.target.result}reader.readAsDataURL(file)}

首先是获取input标签和img标签元素这个不多说,大家都会。

然后是监听input输入框的onchange()事件,通过ipt.files[0]获取到用户选择的文件对象。

最核心的代码就是reader.readAsDataURL(file)方法,因为这个方法是一个异步方法,并且读完之后能拿到一个转成base64的代码,打印出来是这样的:

 还能看到转为base64后的文件大小

最后在通过赋值方法将img标签的src属性改变即可

这是最终效果

上传后能瞬间看到图片的预览图,因为reader读取方法不受网络的影响,而且他的速度比网络要快的多 

3.对上传的图片进行压缩

这种方法虽然非常的好用,但是如果遇到图片比较大的情况下还是会变得比较慢,并且卡

所以可以对图片进行压缩,我这里使用canvas对其进行压缩

直接上代码

 const ipt = document.querySelector('input');const IMG = document.getElementById('IMG');ipt.addEventListener('change', function () {const file = ipt.files[0];const reader = new FileReader();reader.onload = function (e) {const img = new Image();img.src = e.target.result;img.onload = function () {const canvas = document.createElement('canvas');const ctx = canvas.getContext('2d');const maxWidth = 300; // 设置最大宽度const maxHeight = 300; // 设置最大高度let width = img.width;let height = img.height;// 如果图片尺寸大于最大宽度或最大高度,则按比例缩放图片if (width > maxWidth || height > maxHeight) {const ratio = Math.min(maxWidth / width, maxHeight / height);width *= ratio;height *= ratio;}canvas.width = width;canvas.height = height;ctx.drawImage(img, 0, 0, width, height);const compressedDataUrl = canvas.toDataURL('image/jpeg', 0.8); // 压缩图片质量为0.8console.log(compressedDataUrl);IMG.src = compressedDataUrl;};};reader.readAsDataURL(file);});

 可以看到这次上传之后的文件就已经进行了压缩,至于代码其实比较简单,单看我代码中的注释就可以理解。

总结:

其实使用这个方法的作用就是为了提高前端页面的展示速度,也就是提高用户的使用体验感

相关文章:

前端图片转base64,并使用canvas对图片进行压缩

目录 1.图片转base64的应用场景 2.图片转base64代码 3.对上传的图片进行压缩 1.图片转base64的应用场景 图片转base64通常用在用户上传图片的情况下使用&#xff0c;他的作用就是让用户看到预览的图片不受网络的影响。 这是传统的文件传输的流程&#xff1a;首先是用户选择…...

电脑键盘打不了字按哪个键恢复?最新分享!

“有没有朋友知道电脑键盘为什么会莫名其妙就打不了字&#xff1f;明明用得好好的&#xff0c;突然就打不了字了&#xff0c;真的让人很迷惑&#xff01;有什么方法可以解决吗&#xff1f;” 电脑键盘为我们的办公提供了很大的方便&#xff0c;我们可以利用键盘输入我们需要的文…...

ue5读取外部文件

准备环境 我的环境是win10&#xff0c;ue5.1.1&#xff0c;cpux86。 创建工程时&#xff0c;需要选择C模式 这样在Content Browser中会出现C Classes文件夹&#xff0c;下面有一个本项目命名的文件夹&#xff0c;鼠标右键可以看到New C Class选项。 新建类的时候选择父类Blue…...

【ARM】Day4 点亮LED灯

1. 思维导图 2. 自己编写代码实现三盏灯点亮 .text .global _start _start: /**********LED1&#xff0c;LED2,LED3点灯:PE10,PF10,PE8**************/ RCC_INIT:使能GPIOE组/GPIOF组控制器,通过RXCC_MP_AHB4ENSETR设置第[5:4]位写1,地址:0x50000A28[5:4]1ldr r0,0x50000A28 …...

TiDB基础介绍、应用场景及架构

1. 什么是newsql NewSQL 是对各种新的可扩展/高性能数据库的简称&#xff0c;这类数据库不仅具有NoSQL对海量数据的存储管理能力&#xff0c;还保持了传统数据库支持ACID和SQL等特性。 NewSQL是指这样一类新式的关系型数据库管理系统&#xff0c;针对OLTP&#xff08;读-写&…...

深入学习前端开发,掌握HTML、CSS、JavaScript等技术

课程链接&#xff1a; 链接: https://pan.baidu.com/s/1WECwJ4T8UQfs2FyjUMbxig?pwdi654 提取码: i654 复制这段内容后打开百度网盘手机App&#xff0c;操作更方便哦 --来自百度网盘超级会员v4的分享 课程介绍&#xff1a; 第1周&#xff1a;HTML5基础语法与标签 &#x1f…...

python编程小游戏 五子棋,python编程小游戏简单的

大家好&#xff0c;本文将围绕python编程小游戏如何停止展开说明&#xff0c;python编程小游戏日语教程是一个很多人都想弄明白的事情&#xff0c;想搞清楚python编程小游戏超级玛丽需要先了解以下几个事情。 今天分享一个有趣的Python游戏库freegames&#xff0c;它里面包含经…...

spring ico容器 spring注入方式 spring与tomcat整合

一、简介 1、什么是spring&#xff1f; Spring是一个开源的轻量级Java应用开发框架&#xff0c;它提供了一种简单、高效、灵活的方式来构建企业级应用程序。Spring框架的核心特点是依赖注入&#xff08;Dependency Injection&#xff09;和面向切面编程&#xff08;Aspect-Ori…...

ansible 修改远程主机nginx配置文件

安装ansible brew install ansible 或者 pip3 install ansible 添加远程主机 设置秘钥 mac登录远程主机 ssh -p 5700 root192.168.123.211 ssh localhost #设置双机信任 ssh-kyegen -t rsa #设置主机两边的ssh配置文件 vi /etc/ssh/sshd_config/ PermitRootL…...

EV 录屏修复小工具

参考这篇文章, EV录制文件损坏-修复方法, 我用 C# 写了一个小程序. 仓库: github.com/SlimeNull/EvRepair 下载: github.com/SlimeNull/EvRepair/Releases 镜像: gitee.com/slimenull/EvRepair/releases 觉得还不错的话, 点个星星 推荐使用的几个理由: 内嵌 ffmpeg 和 recov…...

蓝牙资讯|中国智能家居前景广阔,蓝牙Mesh照明持续火爆

据俄罗斯卫星通讯社报道&#xff0c;中国已成为全球最大的智能家居消费国&#xff0c;占全球50%—60%的市场份额。未来&#xff0c;随着人工智能技术的发展以及智能家居生态的不断进步&#xff0c;智能家居在中国的渗透率将加速提升。德国斯塔蒂斯塔调查公司数据显示&#xff0…...

2023年排行前五的大规模语言模型(LLM)

2023年排行前五的大规模语言模型(LLM) 截至2023年&#xff0c;人工智能正在风靡全球。它已经成为热门的讨论话题&#xff0c;吸引了数百万人的关注&#xff0c;不仅限于技术专家和研究人员&#xff0c;还包括来自不同背景的个人。人们对人工智能热情高涨的原因之一是其在人类多…...

DoIP学习笔记系列:(六)满足AES128-CMAC算法的“安全认证”.dll生成实践

文章目录 1. 算法Demo2. 算法实现传送门 DoIP学习笔记系列:导航篇 AES128-CMAC算法在汽车电子控制单元的软件开发中涉及到安全相关的需求经经常用到,具体的算法原理请各位小伙伴自行百度,本篇主要向大家分享该算法如何集成到.dll文件中,在OTA、刷写等场景作为$27服务的安全…...

Collections操作集合的工具类,可变参数、集合操作的工具类

1、可变参数 假设定义一个方法求和&#xff0c;该方法可以灵活的完成如下需求&#xff1a; 计算1个数据的和计算2个数据的和计算3个数据的和计算n个数据的和&#xff0c;甚至可以支持不接收参数进行调用。 1.1、可变参数 可变参数用在形参中可以接收多个数据。可变参数的格式&…...

Linux Kernel:进程表示

环境: Kernel Version:Linux-5.10 ARCH:ARM64 一:前言 Linux内核涉及进程和程序的所有算法都围绕task_struct数据结构建立,具体可看另一篇文章: Linux Kernel:thread_info与task_struct 同时Linux提供了资源限制(resource limit, rlimit)机制,对进程使用系统资源施…...

黑马项目一阶段面试58题 苍穹外卖具体技术细节9题

一、Nginx的作用 1.反向代理 前端把请求发送给nginx&#xff0c;再由nginx将请求发送给后端服务器。 2.负载均衡 提高访问速度&#xff1b;进行负载均衡&#xff1b;保证后端服务安全 二、Swagger有什么作用 直接调试后端请求响应 三、Redis常见数据类型 String、Hash、L…...

SkyEye操作指南:连接TI CCS的IDE调试

现代电力电子控制系统的开发中&#xff0c;DSP芯片以其优越的运算性能在控制算法领域得到越来越广泛的应用。传统的DSP开发过程往往需要在完成控制系统仿真与程序设计后&#xff0c;才能根据比对结果进行程序修改&#xff0c;全过程还需要硬件电路工程师的配合&#xff0c;开发…...

PINN神经网络源代码解析(pyTorch)

参考文献 PINN(Physics-informed Neural Networks)的原理部分可参见https://maziarraissi.github.io/PINNs/ 考虑Burgers方程&#xff0c;如下图所示&#xff0c;初始时刻u符合sin分布&#xff0c;随着时间推移在x0处发生间断. 这是一个经典问题&#xff0c;可使用pytorch通过…...

ChatGPT​保密吗?它有哪些潜在风险?如何规避?

自2022年11月公开发布以来&#xff0c;ChatGPT已成为许多企业和个人的必备工具&#xff0c;但随着该技术越来越多地融入我们的日常生活&#xff0c;人们很自然地想知道&#xff1a;ChatGPT是否是保密的。 问&#xff1a;ChatGPT保密吗&#xff1f; 答&#xff1a;否&#xff0…...

C++中配置OpenCV的教程

首先去OpenCV的官网下载OpenCV安装包&#xff0c;选择合适的平台和版本进行下载&#xff0c;我下载的是Windows的OpenCV-4.7.0版本。OpenCV下载地址 下载好后&#xff0c;解压到自己指定的路径。 配置环境变量&#xff1a; WinR键打开运行窗口&#xff0c;输入sysdm.cpl打开系…...

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类&#xff1a;块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...

【Java_EE】Spring MVC

目录 Spring Web MVC ​编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 ​编辑参数重命名 RequestParam ​编辑​编辑传递集合 RequestParam 传递JSON数据 ​编辑RequestBody ​…...

涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战

“&#x1f916;手搓TuyaAI语音指令 &#x1f60d;秒变表情包大师&#xff0c;让萌系Otto机器人&#x1f525;玩出智能新花样&#xff01;开整&#xff01;” &#x1f916; Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制&#xff08;TuyaAI…...

SpringCloudGateway 自定义局部过滤器

场景&#xff1a; 将所有请求转化为同一路径请求&#xff08;方便穿网配置&#xff09;在请求头内标识原来路径&#xff0c;然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...

智能分布式爬虫的数据处理流水线优化:基于深度强化学习的数据质量控制

在数字化浪潮席卷全球的今天&#xff0c;数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具&#xff0c;在大规模数据获取中发挥着关键作用。然而&#xff0c;传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时&#xff0c;常出现数据质…...

算法岗面试经验分享-大模型篇

文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer &#xff08;1&#xff09;资源 论文&a…...

SiFli 52把Imagie图片,Font字体资源放在指定位置,编译成指定img.bin和font.bin的问题

分区配置 (ptab.json) img 属性介绍&#xff1a; img 属性指定分区存放的 image 名称&#xff0c;指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件&#xff0c;则以 proj_name:binary_name 格式指定文件名&#xff0c; proj_name 为工程 名&…...

面试高频问题

文章目录 &#x1f680; 消息队列核心技术揭秘&#xff1a;从入门到秒杀面试官1️⃣ Kafka为何能"吞云吐雾"&#xff1f;性能背后的秘密1.1 顺序写入与零拷贝&#xff1a;性能的双引擎1.2 分区并行&#xff1a;数据的"八车道高速公路"1.3 页缓存与批量处理…...

Windows电脑能装鸿蒙吗_Windows电脑体验鸿蒙电脑操作系统教程

鸿蒙电脑版操作系统来了&#xff0c;很多小伙伴想体验鸿蒙电脑版操作系统&#xff0c;可惜&#xff0c;鸿蒙系统并不支持你正在使用的传统的电脑来安装。不过可以通过可以使用华为官方提供的虚拟机&#xff0c;来体验大家心心念念的鸿蒙系统啦&#xff01;注意&#xff1a;虚拟…...

MySQL体系架构解析(三):MySQL目录与启动配置全解析

MySQL中的目录和文件 bin目录 在 MySQL 的安装目录下有一个特别重要的 bin 目录&#xff0c;这个目录下存放着许多可执行文件。与其他系统的可执行文件类似&#xff0c;这些可执行文件都是与服务器和客户端程序相关的。 启动MySQL服务器程序 在 UNIX 系统中&#xff0c;用…...