不用后端了，前端也可以压缩图片

大风写全栈

发布于 2025-07-27 12:41:43

10900

代码可运行

文章被收录于专栏：锤子代码锤子代码

运行总次数：0

代码可运行

图片太大，发送失败

有个场景，需要发送图片base64给接口。

但原图转换后，base64超过1M，发送失败。

之前写过转base64,参考：

uni-app图片转换base64，看起来很难，实际一点也不简单？

于是找到了下面这个js库（感谢作者！），压缩带转base64一步完成。

image-compressor太香了谁用谁知道

安装:

npm i image-compressor

新建一个js文件,比如/compress-image/index.js：

import { ImageCompressor } from 'image-compressor';
const compressFile = (file) => new Promise((resolve, reject) => {
const imageCompressor = new ImageCompressor;
const compressorSettings = {
toWidth: 100,
toHeight: 100,
mimeType: 'image/png',
mode: 'strict',
quality: 0.6,
grayScale: true,
sepia: true,
threshold: 127,
vReverse: true,
hReverse: true,
speed: 'low'
	};
	imageCompressor.run(file, compressorSettings, (result) => {
resolve({result})
	});
})
export {
	compressFile
}

使用:

import { compressFile } from '/compress-image/index.js';


// path.path是文件路径，类似: blob:http://192.168.0.7/1234-6661-6660-6666-6666-6666
const fileCompress = await compressFile(path.path);
// fileCompress是base64文本.
console.log(fileCompress);

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2025-07-24，如有侵权请联系 cloudcommunity@tencent.com 删除

接口