vue3+ts 中实现压缩图片、blob 转 base64

压缩图片

1.npm 安装 image-compressor.js

2.引入 import ImageCompressor from 'image-compressor.js'

3.使用

const compressImage = async (file: any) => {var imageCompressor = new ImageCompressor()return new Promise((resolve, reject) => {imageCompressor.compress(file, { quality: 0.8, maxHeight: 100, maxWidth: 100 }).then((result) => {resolve(result)}).catch((err) => {reject(err)})})
}// 这个方法是异步的,使用时记得
const afterRead = async (res: any) => {let file = await compressImage(files)
}

blob 转 base64,(同样也是异步的)

const blobToBase64 = (blob: any) => {return new Promise((resolve, reject) => {const reader = new FileReader()reader.onloadend = () => {resolve(reader.result)}reader.onerror = rejectreader.readAsDataURL(blob)})
}

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

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

相关文章

寄快递有没有什么省钱的小妙招? 怎样寄快递才能省钱呢?

快递物流行业的快速崛起刺激了人们的消费欲望,其中典型的是每每到重大节日尤其是双十一或者双十二,消费市场异常火爆,这也使得快递行业加班加点的干也不追不上人们下单的速度。如今,互联网时代崛起,网购成为了大家最寻…

机器学习_捕捉函数的变化趋势(凸函数)

文章目录 连续性是求导的前提条件通过求导发现 y 如何随 x 而变凸函数有一个全局最低点 机器学习所关心的问题之一捕捉函数的变化趋势,也就是标签(y)是如何随着特征字段(x)而变化的,这个变化趋势是通过求导…

代码随想录day30 回溯算法最终章

51. N皇后 题目 n 皇后问题 研究的是如何将 n 个皇后放置在 nn 的棋盘上,并且使皇后彼此之间不能相互攻击。 给你一个整数 n ,返回所有不同的 n 皇后问题 的解决方案。 每一种解法包含一个不同的 n 皇后问题 的棋子放置方案,该方案中 Q 和…

想做好项目,网工必看!

上午好,我是老杨。 做项目,贯穿一个网络工程师职业生涯的始终。不管是大项目还是小项目,做久了项目,都会形成一种自己的方法论。 项目要划分,无非就是新网组建,旧网优化,以及网络排障三大类。…

【已解决】Spring常见错误:类文件具有错误的版本 61.0, 应为 52.0

目录 问题复现原因分析错误依赖正确依赖 问题复现 报错内容如下: java: 无法访问org.springframework.web.bind.annotation.RequestMapping 错误的类文件: /D:/Java/Apache Software Foundation/apache-maven-3.6.3/maven/repository/org/springframework/spring…

ISO11898-闭环高速CAN网络 (125K~1Mbps)

ISO11898 标准的物理框图如下图 可理解为一个高速闭环 CAN 总线网络;CAN 闭环总线网络允许总线最大长度为 40m;最高速度为 1Mbps;可以看到总线的两端各有一个 120Ω 的电阻,此电阻作为阻抗匹配功能,以减少回波反射;节点就是不同的设备&#…

Pytorch基础知识点复习

文章目录 并行计算单卡训练多卡训练单机多卡DP多机多卡DDPDP 与 DDP 的优缺点 PyTorch的主要组成模块Pytorch的主要组成模块包括那些呢?Dataset和DataLoader的作用是什么,我们如何构建自己的Dataset和DataLoader?神经网络的一般构造方法&…

k8s的策略

集群调度: Scheduler的调度算法: 预算策略 过滤出合适的节点 优先策略 选择部署的节点 NodeName:硬策略,不走调度策略,node1 nodeSelector:根据节点的标签选择,会走一个调度算法 只要是…

Git基础操作

Git 是一种分布式版本控制系统,用于管理软件项目的源代码。它是由 Linux 之父 Linus Torvalds 开发的,并已经成为了现代软件开发领域中最流行的版本控制系统之一。 使用 Git 可以追踪代码的历史修改记录,方便团队协作、代码共享和代码重构。…

系统性学习vue-vue核心

做了三年前端,但很多系统性的知识没有学习 还是从头系统学习一遍吧 课程是b站的Vue2.0Vue3.0课程 后续还会学习的如下,就重新开一篇了,不然太长,之后放链接 vue组件化编程 vue-cli 脚手架 vue中的ajax vue-router vuex element-ui vue3 老师推荐的vscode针对vue的插件: Vue 3…

机器学习~从入门到精通(二)线性回归算法和多元线性回归

为什么要做数据归一化 一、数据归一化: 1.最值归一化 2.均值方差归一化import numpy as npX np.random.randint(1,100,size100) X X.reshape(-1,2) X.shape X np.array(X,dtypefloat) X[:,0] (X[:,0]-np.min(X[:,0]))/(np.max(X[:,0])-np.min(X[:,0])) X[:,1]…

洛谷最经典题目之--垂直柱状图

一起来交流编程吧【CSDN app】: http://qm.qq.com/cgi-bin/qm/qr?_wv1027&kx9pL9ccIHGKNLE0CWviAqQ_q6HzxomLW&authKeyVslKe623ptw8VRepda%2Bh0Ttr8Ruz8v%2FBW5HpVzyTWU7ECwpHIZpULMj6qIHYZBVb&noverify0&gro 垂直柱状图 题目描述 写一个程序从…

Postgres 中文周报:Postgres Weekly 537 期

本周报由 Cloudberry Database 社区编译自英文版《Postgres Weekly》,译文较原文有所调整。 推荐博文 🏆 PostgreSQL: The DBMS of the Year 2023 PostgreSQL 荣获 DB-Engines 网站 2023 年度 DBMS 冠军。DB-Engines 收集了 480 款数据库系统信息并跟踪…

机器学习笔记 - 基于OpenCV+稀疏光流的无监督运动检测

一、简述 在各种高级开源库的帮助下,检测固定摄像机拍摄的运动行为是轻而易举可以实现的,但检测移动的摄像机拍摄的移动物体的运动检测依然是一个复杂的问题。在这里,我们将继续基于稀疏光流,并检测移动的无人机相机的运动。 这里…

项目篇 | 图书管理系统 | 账号模块 | 登录

项目篇 | 图书管理系统 | 账号模块 | 登录 概述 该系统实现了管理员登录和用户登录,二者的实现和逻辑几乎完全一致,这里以用户登录为例进行讲解。 函数简介 // account.h void userLoginPage(); // 用户登录页 void userLogin(); // 用户登录userLoginPage:功能页,用户登…

设计模式-传输对象模式

设计模式专栏 模式介绍模式特点应用场景传输对象模式和序列化的区别代码示例Java实现传输对象模式Python实现传输对象模式 传输对象模式在spring中的应用 模式介绍 传输对象模式(Transfer Object Pattern)是一种设计模式,用于从客户端向服务…

Pandas实战100例 | 案例 11: 添加新列 - 使用 `assign` 方法

案例 11: 添加新列 - 使用 assign 方法 知识点讲解 在 Pandas 中,assign 方法是添加新列到 DataFrame 的一种高效方式。这个方法可以使你在不改变原始 DataFrame 的基础上,添加一列或多列。assign 方法特别适用于链式调用,使得数据处理步骤…

X射线探测器检测锻件缺陷,如何将缺陷显现在图像中的呢?

问题描述:X射线探测器检测锻件缺陷,如何将缺陷显现在图像中的呢? 问题解答: X射线探测器检测锻件缺陷的原理主要是利用X射线的穿透性和成像技术。当X射线穿透锻件时,由于不同材料对X射线的吸收程度不同,因…

MT8766安卓核心板/开发板_MTK联发科4G安卓手机主板方案定制开发

MT8766采用台积电 12 nm FinFET 制程工艺,4*A53架构,Android 9.0操作系统,搭载2.0GHz 的 Arm NEON 引擎。提供了支持最新 OpenOS 及其要求苛刻的应用程序所需的处理能力,专为具有全球蜂窝连接的高移动性和功能强大的平板设备而设计…

MySQL进阶篇(五) 锁

一、概述 锁是计算机协调多个进程或线程并发访问某一资源的机制。在数据库中,除传统的计算资源(CPU、RAM、I/O)的争用以外,数据也是一种供许多用户共享的资源。如何保证数据并发访问的一致性、有效性是所有数据库必须解决的一个问…