vue+vant图片压缩后上传

vue+vant图片压缩后上传

在这里插入图片描述

vue文件写入

<template><div class="home"><van-field input-align="left"><template #input><van-uploaderv-model="fileList.file":after-read="afterRead":max-count="5":preview-image="true"/></template></van-field></div>
</template><script>
import { compressImg } from '@/utils'export default {components: {},data() {return {fileList: { file: [], imgs: [] },}},computed: {},mounted() {},methods: {afterRead() {this.fileList.imgs = []this.fileList.file.forEach((item) => {let img = new Image()img.src = item.contentimg.onload = () => {this.fileList.imgs.push(compressImg(img))}})console.log(this.fileList);},},}
</script><style lang="scss" scoped>.home {}.flex {display: flex;}.flex-s {display: flex;justify-content: space-between;}
</style>

在utils文件夹下的index中写入 图片压缩代码


/*** @description: 图片压缩* @param {*} img* @return {*}*/
export const compressImg = (img) => {let canvas = document.createElement('canvas')let ctx = canvas.getContext('2d')let tCanvas = document.createElement('canvas')let tctx = tCanvas.getContext('2d')let width = img.widthlet height = img.height//如果图片大于四百万像素,计算压缩比并将大小压至400万以下let ratioif ((ratio = (width * height) / 4000000) > 1) {console.log('大于400万像素')ratio = Math.sqrt(ratio)width /= ratioheight /= ratio} else {ratio = 1}canvas.width = widthcanvas.height = height//    铺底色ctx.fillStyle = '#fff'ctx.fillRect(0, 0, canvas.width, canvas.height)//如果图片像素大于100万则使用瓦片绘制let countif ((count = (width * height) / 1000000) > 1) {console.log('超过100W像素')count = ~~(Math.sqrt(count) + 1) //计算要分成多少块瓦片// 计算每块瓦片的宽和高let nw = ~~(width / count)let nh = ~~(height / count)tCanvas.width = nwtCanvas.height = nhfor (let i = 0; i < count; i++) {for (let j = 0; j < count; j++) {tctx.drawImage(img,i * nw * ratio,j * nh * ratio,nw * ratio,nh * ratio,0,0,nw,nh)ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh)}}} else {ctx.drawImage(img, 0, 0, width, height)}//进行最小压缩let minData = canvas.toDataURL('image/jpeg', 0.1)tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0return minData
}

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

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

相关文章

中国各城市土地利用类型(城市功能)矢量数据集(shp)

中国各城市土地利用类型(城市功能)数据集 时间:2018年 全国范围的城市用地类型数据(居住/商业/交通用地等共计11类) 分类:居住用地、商业用地、工业用地、医疗设施用地、体育文化设施用地、交通场站用地、绿地等用地类型 含城市编码、一级分类5个、二级分类11个 数据按…

纷享销客BI,助力企业激活数据价值,科学企业决策

10月25日上午&#xff0c;国家数据局正式挂牌成立&#xff0c;这标志着我国数字经济发展将进入新的发展阶段&#xff0c;也将有力促进数据要素技术创新、开发利用和有效治理&#xff0c;以数据强国支撑数字中国的建设。伴随数据作为企业新的生产要素的意义不断凸显&#xff0c;…

SpringBoot----自定义Start(自定义依赖)

一&#xff0c;为什么要定义Start 向阿里云OSS如果我们要引入的话很麻烦&#xff0c;所以我们可以自定义一些组件&#xff0c; 然后我们只需要在pom文件中引入对应的坐标就可以 二&#xff0c;怎么定义&#xff08;以阿里云OSS为例&#xff09; 1&#xff0c; 定义两个组件模块…

pytorch打印模型结构和参数

两种方式 当我们使用pytorch进行模型训练或测试时&#xff0c;有时候希望能知道模型每一层分别是什么&#xff0c;具有怎样的参数。此时我们可以将模型打印出来&#xff0c;输出每一层的名字、类型、参数等。 常用的命令行打印模型结构的方法有两种&#xff1a; 一是直接prin…

2023 CSP-J题解

T1 小苹果 题目描述 理论分析 对于第一问&#xff0c;我们按照题意模拟每天取走的是多少个苹果即可。由于每天可以取走原来的,数据范围没次会降低到&#xff0c;也就是说这样的过程的时间复杂度可以用下式表示&#xff1a; 对于本题的数据范围n<1e9&#xff0c;这个时间复杂…

二叉树问题——平衡二叉树问题

摘要 本博文主要介绍平衡二叉树问题包括&#xff0c;二叉树的高度差&#xff0c;是否为平衡二叉树&#xff0c;有序链表转二叉搜索树&#xff0c;将二叉搜索树变平衡等。 一、平衡二叉树详解 1.1 判断二叉树是否平衡 /*** Definition for a binary tree node.* public class…

浅谈安科瑞无线测温产品在埃及某房建配电项目中的应用

1.电气接点测温的必要性 电力系统的一次系统一般由供电线路&#xff08;包括架空线路和电缆&#xff09;、变压器、母线、开关柜等电气设备组成。其相互之间存在大量的电气连接点&#xff0c;由于电流流过产生热量&#xff0c;所以几乎所有的电气故障都会导致故障点温度的变化…

cnpm windows系统安装后查看版本cnpm -v报错Error: Cannot find module ‘node:util‘

1、报错截图 2、原因 在网上查了一些资料&#xff0c;有的说配置环境变量就可以&#xff0c;但经过配置后发现还是会报错。又查到说是由于cnpm和npm的版本不一致导致的&#xff0c;最后尝试成功解决&#xff01;&#xff01;&#xff01; 2、解决办法 1、先卸载掉之前安装的c…

Stable Diffusion WebUI扩展openpose-editor如何使用

先上地址: GitHub - fkunn1326/openpose-editor: Openpose Editor for AUTOMATIC1111s stable-diffusion-webuiOpenpose Editor for AUTOMATIC1111s stable-diffusion-webui - GitHub - fkunn1326/openpose-editor: Openpose Editor for AUTOMATIC1111s stable-diffusion-webu…

apache seatunnel支持hive jdbc

上传hive jdbc包HiveJDBC42.jar到seatunel lib安装目录 原因是cloudera 实现了add batch方法 创建seatunnel任务文件mysql2hivejdbc.conf env {execution.parallelism = 2job.mode = "BATCH"checkpoint.interval = 10000 } source {Jdbc {url = "jdbc:mysql:/…

AWS认证考试的那些事

1 为啥会有这个认证 你既然点进来了这个也就不重要了&#xff0c;重要的是怎么拿到他&#xff0c;以SAA-C03为例&#xff0c;从开始到结束我们一起来进行准备 2 考试卷 目前AWS的考试是要交钱的&#xff0c;正常情况下拿到5折劵很容易&#xff0c;比如你之前考过AWS的认证会给…

Django实战项目-学习任务系统-兑换物品管理

接着上期代码框架&#xff0c;开发第5个功能&#xff0c;兑换物品管理&#xff0c;再增加一个学习兑换物品表&#xff0c;主要用来维护兑换物品&#xff0c;所需积分&#xff0c;物品状态等信息&#xff0c;还有一个积分流水表&#xff0c;完成任务奖励积分&#xff0c;兑换物品…

函数总结

一、main函数 //argc 统计命令行传参的个数 //argv 保存命令行传的具体参数,每个参数当做字符串来存储&#xff0c;const是为了不让main函数修改argv数组里的内容 1.1值传递 此为值传递;形参的值改变不影响实参的值 1.2 地址传递 形参拿到的是实参的地址&#xff0c;实际操…

okhttp post请求 header post参数加密遇到的两个问题

如果你对于网络请求用了https后是否还有必要对参数加密有疑问可以看我上篇的文章&#xff1a;网络安全https 记得耐心看完&#xff0c;下面说问题&#xff1a; Caused by: java.lang.IllegalArgumentException: Unexpected char 0x0a 一开始以为是okhttp框架对特殊字符做了现在…

高效改名,文件夹名称替换:一键批量替换文件夹名中间部分内容

在我们的日常生活和工作中&#xff0c;经常需要处理大量的文件夹&#xff0c;其中有些文件夹名称可能包含我们需要替换的内容。但如果我们一个一个地手动修改文件夹名称&#xff0c;不仅耗时而且容易出错。为了解决这个问题&#xff0c;我们可以使用云炫文件管理器高效的文件夹…

[AUTOSAR][诊断管理][ECU][$2F] 通过ID控制IO

文章目录 一、简介服务功能功能描述应用场景服务请求请求格式控制参数(IOCP)请求实例服务响应响应格式正响应实例负响应NRC支持二、 示例代码2f_io_ctl_by_id.c一、简介 2F诊断服务主要在车身域比较常见,比如车窗控制,传感器开关、执行器控制等。 UDS诊断服务协议都以ISO标准…

Centos虚拟机安装配置与MobaXterm工具及Linux常用命令

目录 一、Centos操作系统 1.1 Centos介绍 1.2 Centos虚拟机安装 1.3 配置centos的镜像 1.4 虚拟机开机初始设置 1.4.1 查看网络配置 1.4.2 编辑网络配置 二、MobaXterm工具 2.1 MobaXterm介绍 2.2 MobaXterm安装 2.3 切换国内源 三、Linux常用命令和模式 3.1 …

【漏洞复现】CNVD-2023-08743

【漏洞复现】 CNVD-2023-08743 【漏洞介绍】 Hongjing Human Resource Management System - SQL Injection 【指纹】 title”人力资源信息管理系统” 【系统UI】 【payload】 /servlet/codesettree?flagc&status1&codesetid1&parentid-1&categories~31…

Word插入图片显示不全?学会这4个方法,轻松解决!

“为了让我的文档看起来更专业&#xff0c;我在Word里插入了一些图片&#xff0c;但是这些图片有些只显示了部分&#xff0c;有些都无法正常显示。有什么方法可以让图片显示齐全吗&#xff1f;” 在使用Word时&#xff0c;添加一些图片不仅会让我们的文档看起来更美观&#xff…

探求flutter全栈开发

显示一种网络图片 import package:flutter/material.dart; main(){runApp(MaterialApp(theme: ThemeData.dark(),home:Home(),));}class Home extends StatelessWidget{overrideWidget build(BuildContext context) {// TODO: implement buildreturn Scaffold(appBar:AppBar(t…