前端上传照片压缩 (适合 vue vant组件的)

为什么要这样做? (减小服务器压力 提升用户体验上传照片和加载照片会变快)
最近有一个需求,通过手机拍照后上传图片到服务器,大家应该都知道,现在的手机像素实在是太高了,随便拍一张都是10M以上,直接上传到服务器一方面是浪费存储空间,另外就是特别浪费流量,如果网络不好还很慢。所以想寻求一种前端压缩图片的方案。
在网上找了很多方式效果都不好,要么是根本无法实现功能,要么就是兼容性不好。不过最终找到一个比较完美的插件。
点击可以直接到主页:shrinkpng,话不多说,现在直接讲解怎么使用。

二、使用shrinkpng进行图片压缩
2.1 安装依赖包
通过下面的命令将shrinkpng库添加到我们自己的项目
npm install shrinkpng

1
2.2 引入包
在需要的Vue文件中加入如下代码
import { shrinkImage } from “shrinkpng”

2.3 开始编码
在vantui里面使用到van-uploader组件, :before-read="beforeRead"是核心语句,在beforeRead方法里面进行图片的压缩。


beforeRead方法实现如下,其中file是一个文件对象,通过shrinkImage方法就能将这个文件进行压缩。
compressImg(file) {
return shrinkImage(file, {
quality: 15
});
},
beforeRead(file) {
return this.compressImg(file);
},

quality是压缩质量,1-100之间.通过我自己的项目情况,配置为15基本上就能满足我的要求。将10M+的图片基本上压缩到1M以内。
在自己的项目中的使用

然后写入这两个函数就行
// 对图片进行压缩
compressImg(file) {
return shrinkImage(file, {
quality: 15
})
},
beforeRead(file) {
return this.compressImg(file)
},
效果 照片由 13M—> 1.2M 时间由 12.04 —>732ms 效率提升 12倍

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

物联网的核心价值是什么?——青创智通

工业物联网解决方案-工业IOT-青创智通 物联网,这个词汇在当今的科技领域已经变得耳熟能详。但当我们深入探索物联网的核心价值时,我们会发现它远不止是一个简单的技术概念,而是一种能够彻底改变我们生活方式和工作方式的革命性力量。 物联网…

Django之rest_framework(三)

一、GenericAPIView的使用 rest_framework.generics.GenericAPIView 继承自APIVIew,主要增加了操作序列化器和数据库查询的方法,作用是为下面Mixin扩展类的执行提供方法支持。通常在使用时,可搭配一个或多个Mixin扩展类 1.1、属性 serializer_class 指明视图使用的序列化器…

JVM之JVM栈的详细解析

Java 栈 Java 虚拟机栈:Java Virtual Machine Stacks,每个线程运行时所需要的内存 每个方法被执行时,都会在虚拟机栈中创建一个栈帧 stack frame(一个方法一个栈帧) Java 虚拟机规范允许 Java 栈的大小是动态的或者是…

npm配置阿里镜像库

1、配置阿里云镜像源 #查看当前使用的镜像地址命令 npm config get registry#设置阿里镜像源 npm config set registry http://registry.npmmirror.com 这里要注意下,之前的镜像源地址 https://registry.npm.taobao.org/ 已经不能用了,这里要更改为新…

Grok-1.5 Vision 预览 将数字世界与物理世界连接起来,首款多模态模型

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗?订阅我们的简报,深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同,从行业内部的深度分析和实用指南中受益。不要错过这个机会,成为AI领…

android 创建module

文章目的: 快速创建module并使用 创建步骤: 1 创建module 2 修改module下的build.gradle文件 3 修改清单文件中MainActivity属性,否则APP会因为有多个启动界面而崩溃 4 在主项目build.gradle引用该object Module 至此,可在APP中…

golang 迷宫回溯算法(递归)

// Author sunwenbo // 2024/4/14 20:13 package mainimport "fmt"// 编程一个函数,完成老鼠找出路 // myMap *[8][7]int 地图,保证是同一个地图,因此是引用类型 // i,j表示对地图的哪个点进行测试 func SetWay(myMap *[8][7]int, …

【ARM 裸机】汇编 led 驱动之烧写 bin 文件

1、烧写概念 bin 文件烧写到哪里呢?使用 STM32 的时候烧写到内部 FLASH,6ULL 没有内部 FLASH,是不是就不能烧写呢?不,6ULL 支持 SD卡、EMMC、NAND FLASH、NOR FLASH 等方式启动,在裸机学习的工程中&#x…

参会记录|全国多媒体取证暨第三届多媒体智能安全学术研讨会(MAS‘2024)

前言:2024年4月13日上午,我与实验室的诸位伙伴共聚江西南昌的玉泉岛大酒店,参加了为期一天半的全国多媒体取证暨第三届多媒体智能安全学术研讨会(MAS’2024)。本届学术研讨会由江西省计算机学会、江西省数字经济学会主…

【学习笔记十七】波次管理、自动波次和WOCR介绍及配置

一、手工维护波次 波次是控制仓库活动(如拣配)的仓库请求项目(通常是出库交货订单项目)的分组。这些分组随后在后续流程中一起处理,例如,将分配到波次的所有仓库请求项目传输到仓库任务创建。 注意:仓库请求是出库交货订单、过账更改、库存转储(用于仓库中的内部移动)或入库…

最短网络kruskal算法

题目描述 农民约翰被选为他们镇的镇长!他其中一个竞选承诺就是在镇上建立起互联网,并连接到所有的农场。当然,他需要你的帮助。约翰已经给他的农场安排了一条高速的网络线路,他想把这条线路共享给其他农场。为了用最小的消费&…

Python 基于 OpenCV 视觉图像处理实战 之 OpenCV 简单视频处理实战案例 之十一 简单给视频添加水印图片效果

Python 基于 OpenCV 视觉图像处理实战 之 OpenCV 简单视频处理实战案例 之十一 简单给视频添加水印图片效果 目录 Python 基于 OpenCV 视觉图像处理实战 之 OpenCV 简单视频处理实战案例 之十一 简单给视频添加水印图片效果 一、简单介绍 二、简单给视频添加水印图片效果实现…

【保姆级讲解Element UI】

🌈个人主页: 程序员不想敲代码啊 🏆CSDN优质创作者,CSDN实力新星,CSDN博客专家 👍点赞⭐评论⭐收藏 🤝希望本文对您有所裨益,如有不足之处,欢迎在评论区提出指正,让我们共…

负载均衡器如何工作,为什么如此重要?

现代应用程序和网站处理大量流量。负载均衡器是保证大型系统平稳运行的主要工具之一。 负载平衡器负责跨多个服务器路由客户端请求以分配负载并防止出现瓶颈。 这有助于最大限度地提高吞吐量、减少响应时间并优化资源使用。 负载均衡器的运行情况: (1).客户端请…

面试算法-176-验证二叉搜索树

题目 给你一个二叉树的根节点 root ,判断其是否是一个有效的二叉搜索树。 有效 二叉搜索树定义如下: 节点的左 子树 只包含 小于 当前节点的数。 节点的右子树只包含 大于 当前节点的数。 所有左子树和右子树自身必须也是二叉搜索树。 示例 1&#x…

C++内存管理与模版(用法详解)

C/C中程序内存区域划分 内核空间(用户代码不能读写)栈(函数中存放的变量)内存映射段堆(重点)数据段(静态区)全局变量 / 静态变量代码段(常量区) 试分析下列…

大模型用到的位置编码汇总(面试)

不同于RNN、CNN等模型,对于Transformer模型来说,位置编码的加入是必不可少的,因为纯粹的Attention模块是无法捕捉输入顺序的,即无法区分不同位置的Token。为此我们大体有两个选择:想办法将位置信息融入到输入中&#x…

OpenHarmony轻量系统开发【12】OneNET云接入

12.1 OneNET云介绍 通常来说,一个物联网产品应当包括设备、云平台、手机APP。我将在鸿蒙系统上移植MQTT协议、OneNET接入协议,实现手机APP、网页两者都可以远程(跨网络,不是局域网的)访问开发板数据,并控制…

ActiveMQ 05 高级使用

Active MQ 05 高级使用 queue browser 可以查看队列中的消息而不消费,没有订阅的功能 JMSCorrelationID 用于消息之间的关联,给人一种会话的感觉 http://activemq.apache.org/how-should-i-implement-request-response-with-jms.html JMSReplyTo …

codeforce #925 (div3) 题解

D. Divisible Pairs 给出数组 a a a,如果二元组 ( i , j ) (i,j) (i,j)满足 a i a j m o d x 0 & & a i − a j m o d y 0 a_i a_j mod x 0 \&\& a_i - a_j mod y 0 ai​aj​modx0&&ai​−aj​mody0,则beauty。其中 i &…