vue+vant图片压缩后上传

vue+vant图片压缩后上传

在这里插入图片描述

vue文件写入

<template>
  <div class="home">
    <van-field input-align="left">
      <template #input>
        <van-uploader
          v-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.content
          img.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.width
  let height = img.height
  //如果图片大于四百万像素,计算压缩比并将大小压至400万以下
  let ratio
  if ((ratio = (width * height) / 4000000) > 1) {
    console.log('大于400万像素')
    ratio = Math.sqrt(ratio)
    width /= ratio
    height /= ratio
  } else {
    ratio = 1
  }
  canvas.width = width
  canvas.height = height
  //    铺底色
  ctx.fillStyle = '#fff'
  ctx.fillRect(0, 0, canvas.width, canvas.height)
  //如果图片像素大于100万则使用瓦片绘制
  let count
  if ((count = (width * height) / 1000000) > 1) {
    console.log('超过100W像素')
    count = ~~(Math.sqrt(count) + 1) //计算要分成多少块瓦片
    // 计算每块瓦片的宽和高
    let nw = ~~(width / count)
    let nh = ~~(height / count)
    tCanvas.width = nw
    tCanvas.height = nh
    for (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 = 0
  return minData
}

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

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

相关文章

【计算机网络笔记】传输层——TCP的可靠数据传输

系列文章目录 什么是计算机网络&#xff1f; 什么是网络协议&#xff1f; 计算机网络的结构 数据交换之电路交换 数据交换之报文交换和分组交换 分组交换 vs 电路交换 计算机网络性能&#xff08;1&#xff09;——速率、带宽、延迟 计算机网络性能&#xff08;2&#xff09;…

【npm run dev 报错:error:0308010C:digital envelope routines::unsupported】

问题原因&#xff1a; nodejs版本太高&#xff08;nodejs v17版本发布了openSSL3.0对短发和密钥大小增加了更为严格的限制&#xff0c;nodejs v17之前版本没有影响&#xff0c;但之后的版本会出现这个错误&#xff0c;物品的node版本是20.9.0&#xff09; 解决方式&#xff1…

搜维尔科技:网球运动员使用Xsens寻求精确的动作捕捉

就像其他一些运动一样,近年来网球迷们没有机会去参加许多真正优秀的模拟游戏,所以当一个人出现并承诺有这种体验时,很难不激动。开发者圆环游戏 匹配点:网球锦标赛 现在,我们承诺在单一支付者和多人组成部分的球场上有一个坚实的经验,我们对游戏和游戏的内部和外部都很好奇,我…

XSpirit 2智能边缘计算机使用测评

博客主页&#xff1a;https://tomcat.blog.csdn.net 博主昵称&#xff1a;农民工老王 主要领域&#xff1a;Java、Linux、K8S 期待大家的关注&#x1f496;点赞&#x1f44d;收藏⭐留言&#x1f4ac; 目录 拆箱过程介绍视频使用感受 我之前就参加过 Spirit 1 第一代智能边缘计…

Nginx搭载负载均衡及前端项目部署

目录 ​编辑 一.Nginx安装 1.安装所需依赖 2.下载并解压Nginx安装包 3.安装nginx 4.启动Nginx服务 二.Tomcat负载均衡 1.准备环境 1.1 准备两个Tomcat 1.2 修改端口号 1.3 配置Nginx服务器集群 2.效果展示 ​编辑三.前端项目打包 ​编辑四.前端项目部署 1.上传项目…

Maven修改仓库和镜像地址

目录 1、修改仓库地址2、修改镜像地址 1、修改仓库地址 使用IDEA时,如果不指定自己下载的Maven,idea会默认使用自带的Maven 3&#xff08;bundle)。maven 3默认的仓库路径一般是在c盘的用户文件夹中的.m2目录下&#xff1a; 当maven下的pom文件中的依赖逐渐增加时,maven仓库下…

进程控制(二):进程等待

文章目录 进程控制&#xff08;二&#xff09;进程等待wait函数waitpid函数wait/waitpid获取子进程状态码的过程进程等待相关的宏 总结 进程控制&#xff08;二&#xff09; 延续对于上文进程结束&#xff0c;我们继续对于进程控制进行学习&#xff0c;本文我们主要是对于进程…

详解IPD需求分析工具$APPEALS

够让企业生存下去的是客户&#xff0c;所以&#xff0c;众多企业提出要“以客户为中心”&#xff0c;那如何做到以客户为中心&#xff1f;IPD中给出的答案是需求管理。 需求管理流程&#xff0c;是IPD&#xff08;集成管理开发&#xff09;体系中的四大支撑流程之一&#xff0…

【STM32】基于HAL库建立自己的低功耗模式配置库(STM32L4系列低功耗所有配置汇总)

【STM32】基于HAL库建立自己的低功耗模式配置库&#xff08;STM32L4系列低功耗所有配置汇总&#xff09; 文章目录 低功耗模式&#xff08;此章节可直接跳过&#xff09;低功耗模式简介睡眠模式停止模式待机模式 建立自己的低功耗模式配置库通过结构体的方式来进行传参RTC配置…

python如何使用gspread读取google在线excel数据?

一、背景 公司使用google在线excel管理测试用例&#xff0c;为了方便把手工测试用到的测试数据用来做自动化用例测试数据&#xff0c;所以就想使用python读取在线excel数据&#xff0c;通过数据驱动方式&#xff0c;完成自动化回归测试&#xff0c;提升手动复制&#xff0c;粘…

【深度学习基础】专业术语汇总(欠拟合和过拟合、泛化能力与迁移学习、调参和超参数、训练集、测试集和验证集)

&#x1f4e2;&#xff1a;如果你也对机器人、人工智能感兴趣&#xff0c;看来我们志同道合✨ &#x1f4e2;&#xff1a;不妨浏览一下我的博客主页【https://blog.csdn.net/weixin_51244852】 &#x1f4e2;&#xff1a;文章若有幸对你有帮助&#xff0c;可点赞 &#x1f44d;…

以太网【FPGA】

1物理&#xff1a; 2接线&#xff1a; 信号名 信号类型 对应引脚 备注 sys_clk Input B5 系统晶振输入时钟&#xff0c;频率 50MHz sys_rst_n Input E8 系统复位信号&#xff0c;低有效 eth_rxc Input E17 PHY 输入时钟&#xff0c;频率 125MHz eth_rx_ctl Inpu…

合肥中科深谷嵌入式项目实战——人工智能与机械臂(五)

订阅&#xff1a;新手可以订阅我的其他专栏。免费阶段订阅量1000 python项目实战 Python编程基础教程系列&#xff08;零基础小白搬砖逆袭) 作者&#xff1a;爱吃饼干的小白鼠。Python领域优质创作者&#xff0c;2022年度博客新星top100入围&#xff0c;荣获多家平台专家称号。…

Redis ----使用Java代码操作redis(2)

⭐⭐ Redis专栏&#xff1a;Redis专栏 ⭐⭐ 个人主页&#xff1a;个人主页 目录 一.Java连接redis 二.Java操作redis常见数据类型存储 2.1 String类型的操作 2.2 hash 2.3 集合 list 三.redis的运用场景 一.Java连接redis 第一步&#xff1a;导入依赖…

第十五章 EM期望极大算法及其推广

文章目录 导读符号说明混合模型伯努利混合模型(三硬币模型)问题描述三硬币模型的EM算法1.初值2.E步3.M步初值影响p,q 含义 EM算法另外视角Q 函数BMM的EM算法目标函数LEM算法导出 高斯混合模型GMM的EM算法1. 明确隐变量, 初值2. E步,确定Q函数3. M步4. 停止条件 如何应用GMM在聚…

ConnectionError: HTTPSConnectionPool

ConnectionError: HTTPSConnectionPool(host‘zbbfxstatic.figtingdream.com’, port443): Max retries exceeded with url: /api/cache (Caused by NewConnectionError(‘<urllib3.connection.HTTPSConnection object at 0x00000249795AD9A0>: Failed to establish a ne…

iOS实现弹簧放大动画

效果图 实现代码 - (void)setUpContraints {CGFloat topImageCentery (SCREEN_HEIGHT - 370 * PLUS_SCALE) / 2;[self.topIconView mas_makeConstraints:^(MASConstraintMaker *make) {make.centerX.mas_equalTo(0);make.centerY.equalTo(self.view.mas_top).with.offset(t…

Halcon计算点到直线的垂线方程

一、我们都知道&#xff0c;点到直线最短距离就是垂线。Halcon也有现成的算子可以计算点到直线的距离 distance_pl( : : Row, Column, Row1, Column1, Row2, Column2 : Distance)。但是此算子不会返回具体的垂点坐标。当我们希望显示垂线的时候是需要知道垂点坐标&#xff0c;才…

Leetcode刷题详解——全排列

1. 题目链接&#xff1a;46. 全排列 2. 题目描述&#xff1a; 给定一个不含重复数字的数组 nums &#xff0c;返回其 所有可能的全排列 。你可以 按任意顺序 返回答案。 示例 1&#xff1a; 输入&#xff1a;nums [1,2,3] 输出&#xff1a;[[1,2,3],[1,3,2],[2,1,3],[2,3,1],…

电源管理(PMIC)MAX20428ATIA/VY、MAX20428ATIC/VY、MAX20428ATIE/VY适合汽车ADAS应用的开关稳压器

一、概述 MAX20428是一款高效率、八路输出、低压PMIC。OUT1将输入电源升压至5V&#xff0c;电流高达500mA&#xff0c;而三个同步降压转换器的输入电压范围为3.0V至4.2V&#xff0c;输出电压范围为0.8V至3.9875V&#xff0c;峰值电流分别高达1.3A、1.3A和3.5A。三个300mA pMOS…