敲好用的图片压缩工具image-conversion

最新推荐文章于 2025-02-17 13:28:17 发布

yj小耳朵

最新推荐文章于 2025-02-17 13:28:17 发布

阅读量2.6k

点赞数 2

分类专栏：图片压缩前端 vue 文章标签： vue.js javascript

本文链接：https://blog.youkuaiyun.com/yjITcsdn/article/details/115914511

版权

前端同时被 3 个专栏收录

30 篇文章

订阅专栏

vue

14 篇文章

订阅专栏

图片压缩

1 篇文章

订阅专栏

image-conversion

下载依赖

npm/cnpm i image-conversion --save

封装成单独的文件img-util.js

 const imageConversion = require("image-conversion")
 /**  
 * file:文件
 * config:{ //压缩配置
 * size     Number  指定压缩大小
 * scale    Number  相对于原始图像的缩放比例，范围0-10
 * width    Number  结果图像的宽度
 * height   Number  结果图像的高度
 * quality  Number  0-1 默认0.92
 * }
 * 
*/
 export async  function compressConversion(file,config){ 
   const resAvatarBlob = await imageConversion.compressAccurately(file, config)
   // console.log('压缩后',resAvatarBlob)
   const resAvatarFile = new window.File(
    [resAvatarBlob],
    file.name,
    { type: file.type },
   ) 
  // console.log('压缩后的大小',resAvatarFile.size/1024)
  return resAvatarFile 
}

在其他地方调用

import {compressConversion} from '@/utils/img-util.js'

methods:{
	async uploadFiles(fileObject){ 
		// 压缩
		let file = await compressConversion(fileObject,{width:172,height:230,size:80})
	}
}