首页 > 其他分享 >vue 图片压缩

vue 图片压缩

时间:2024-05-23 20:09:03浏览次数:15  
标签:resolve 压缩 vue result file error image 图片

  • 使用image-conversion实现图片压缩到指定大小
// 导入
import * as imageConversion from 'image-conversion'

/**
  * 压缩小图到100kb
 */
compressImg(file) {
  console.log('file: ', file)
  return new Promise((resolve, reject) => {
    if (file.size / 1024 <= 100) {
      resolve(file)
    } else {
      try {
        imageConversion.compressAccurately(file, { size: 100, width: 500 }).then(result => {
          result = new File([result], file.name, { type: file.type, lastModified: Date.now() }) // blob转file
          resolve(result)
        })
      } catch (error) {
        console.log('compressImg error', error)
        resolve(file)
      }
    }
  })
}
  • 这里的指定大小,只会压缩到指定大小左右,不会非常精准,width需要根据size调整

标签:resolve,压缩,vue,result,file,error,image,图片
From: https://www.cnblogs.com/jia-zq/p/18209232

相关文章

  • vue3 设置 表单或者页面 懒加载 (或者组件的异步加载)
    用到的工具库  vueUse和useIntersectionObserver1.UseIntersectionObserver函数参数:observerList:由被观察目标所组成的数组,数组项是由React.createRef构建出来的对象callback:当目标元素被曝光所需要触发的函数,该函数接受一个参数indexList,由被曝光元素在observerList......
  • PNG图片数据格式
    存储类型[编辑]PNG图片主要由三种类型存储PNG8:图片使用8bits来存储,可以用2的8次方大小个种类颜色来存储一张黑白的图片。也就是说PNG8能存储256种颜色,因为颜色少,文件体积也非常小,一张图片如果颜色简单,将它设置成PNG8的图片是非常省空间合适的。PNG24:图片使用24bits来存储......
  • 把文件压缩成zip包并设置密码
    引入依赖<!--zip--><dependency><groupId>net.lingala.zip4j</groupId><artifactId>zip4j</artifactId><version>1.3.2</version></dependency>代码p......
  • vue知识点: v-if和v-for为何不能同时使用?
    在vue2和vue3的官方文档里都写到不推荐 v-if和v-for同时使用,如下代码所示:<liv-for="todointodos"v-if="!todo.isComplete">{{todo.text}}</li>一、vue3文档:列表渲染|Vue.js在vue3中,是因为当它们同时存在于一个节点上时,v-if比v-for的优先级更高。这意味着......
  • Vue 使用 Devextreme框架,下拉框不会随页面的滚动而移动的问题解决
    Devextreme的DxSelectBox组件的下拉选项部分,默认是绝对位置布局,导致页面滚动时,下拉部分不会上下移动个人的解决方案,监听页面滚动事件,如果目前有打开的下拉框,先关闭下拉框,随后迅速再打开,视觉效果上可以做到下拉选项跟随组件滚动vue项目中可能会有很多页面,很多下拉框,我是用的给每......
  • VUE3.0的安装教程
    一、下载nodejs    访问nodejs官网或者中文网:nodejs中文网  二、点击下载得到的.msi文件   (1) 点击next (2)接收协议,下一步        三、配置npm相关文件  (1)打开刚才安装node.js的文件夹,在里面新建两个文件夹,分别为node_......
  • vue 输入框maxlength不影响拼音输入
    直接设置input的maxlength会导致最后几个字无法用拼音输入,比如最大长度还剩两个字,我想输入'项目',当我拼音输入'xi'之后,后面的'angmu'是打不出的。可以不设置maxlength,而是用 this.$nextTick(()=>{})在用户输入完之后,裁剪文字<template><viewclass="input-view">......
  • Vue搭建移动端h5项目(已开源,附带git地址)Vant+Vue Router+Vuex+axios封装+案例交互+部分
    一、项目介绍以及项目地址             项目介绍:vue2搭建。项目通过amfe-flexible与postcss-pxtorem实现移动端适配;通过Vantui作为项目的组件库;通过Vuex管理数据状态,进行模块化管理;通过VueRouter配置项目路由,进行模块化管理;封装axios进行数据的请求,以及一些页......
  • 记录一个批量压缩文件夹的方法
    importosimportzipfilefromtkinterimportfiledialogclassZipDir:"""ZipFile()用于创建1个zip文件对象,示例中的三个参数分别表示:filename:压缩成的zip包的路径(含压缩包名称);例如:xxx.zipmode:可选r,w,a,代表不同的打开文件的方式;r只读;w重写;a添加......
  • Electron-Vue3-Vadmin后台系统|vite2+electron桌面端权限管理系统
    Electron-Vue3-Vadmin后台系统|vite2electron桌面上端管理权限智能管理系统根据vite2.xelectron12桌面上端后台管理智能管理系统Vite2ElectronVAdmin。继上一次共享vite2融合electron构建后台框架,此次产生的是全新开发设计的跨桌面上中后台管理管理权限智能管理系统。应用全新......