当前位置: 首页 > 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打开系…...

[2025CVPR]DeepVideo-R1:基于难度感知回归GRPO的视频强化微调框架详解

突破视频大语言模型推理瓶颈,在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 ​安全措施依赖问题​ GRPO使用min和clip函数限制策略更新幅度,导致: 梯度抑制:当新旧策略差异过大时梯度消失收敛困难:策略无法充分优化# 传统GRPO的梯…...

论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(二)

HoST框架核心实现方法详解 - 论文深度解读(第二部分) 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章: 论文深度解读 + 算法与代码分析(二) 作者机构: 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题: 人形机器人…...

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

渗透实战PortSwigger靶场-XSS Lab 14:大多数标签和属性被阻止

<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet&#xff1a; https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...

【大模型RAG】Docker 一键部署 Milvus 完整攻略

本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装&#xff1b;只需暴露 19530&#xff08;gRPC&#xff09;与 9091&#xff08;HTTP/WebUI&#xff09;两个端口&#xff0c;即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...

智能在线客服平台:数字化时代企业连接用户的 AI 中枢

随着互联网技术的飞速发展&#xff0c;消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁&#xff0c;不仅优化了客户体验&#xff0c;还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用&#xff0c;并…...

Java多线程实现之Callable接口深度解析

Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...

使用van-uploader 的UI组件,结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui&#xff08;适配 Vue2 版本 &#xff09;实现截图中照片上传预览、删除功能&#xff0c;并封装成可复用组件的完整代码&#xff0c;包含样式和逻辑实现&#xff0c;可直接在 Vue2 项目中使用&#xff1a; 1. 封装的图片上传组件 ImageUploader.vue <te…...

CMake 从 GitHub 下载第三方库并使用

有时我们希望直接使用 GitHub 上的开源库,而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例,演示如何: 使用 FetchContent 从 GitH…...

算法:模拟

1.替换所有的问号 1576. 替换所有的问号 - 力扣&#xff08;LeetCode&#xff09; ​遍历字符串​&#xff1a;通过外层循环逐一检查每个字符。​遇到 ? 时处理​&#xff1a; 内层循环遍历小写字母&#xff08;a 到 z&#xff09;。对每个字母检查是否满足&#xff1a; ​与…...