当前位置: 首页 > news >正文

uni-app 开发小程序项目中实现前端图片压缩,实现方式

方式一:使用 <canvas> 实现图片压缩(推荐,兼容性好)

这是最常见的一种方式,通过将图片绘制到 <canvas> 上,然后用 canvas.toTempFilePathcanvas.toDataURL 得到压缩后的图片。

示例代码(小程序平台):

<template><view><button @click="chooseImage">选择图片并压缩</button></view>
</template><script>
export default {methods: {chooseImage() {uni.chooseImage({count: 1,success: (res) => {const tempFilePath = res.tempFilePaths[0];this.compressImage(tempFilePath);}});},compressImage(path) {// 创建 canvas 实例const ctx = uni.createCanvasContext('myCanvas', this);uni.getImageInfo({src: path,success: (img) => {const maxW = 800; // 最大宽度const scale = maxW / img.width;const w = maxW;const h = img.height * scale;// 画图ctx.drawImage(path, 0, 0, w, h);ctx.draw(false, () => {// 延迟一点,确保画完setTimeout(() => {uni.canvasToTempFilePath({canvasId: 'myCanvas',destWidth: w,destHeight: h,success: (res) => {console.log('压缩后图片路径:', res.tempFilePath);// 可以用 res.tempFilePath 上传或预览},fail: (err) => {console.error('canvas 转图片失败', err);}}, this);}, 200);});}});}}
};
</script><canvas canvas-id="myCanvas" style="width: 800px; height: 600px;" />

方式二:使用 uni.compressImage API(简单但压缩能力有限)

这是 uni-app 封装的一个简单压缩接口,用于压缩临时文件路径图片

uni.chooseImage({count: 1,success: (res) => {const filePath = res.tempFilePaths[0];uni.compressImage({src: filePath,quality: 80, // 取值 0 - 100,越小压缩率越高success: (res) => {console.log('压缩成功:', res.tempFilePath);},fail: (err) => {console.error('压缩失败:', err);}});}
});

注意:

  • uni.compressImage 目前只支持 App 和微信小程序平台,在 H5 和其他平台会失效或无效果。

  • 图片质量压缩效果受限,不能调整尺寸。

方式三:使用三方库(仅 H5 适用,如 compressorjs

这种方式适合在 H5 中运行的 uni-app 项目,小程序端不支持 DOM。

 

npm install compressorjs
import Compressor from 'compressorjs';new Compressor(file, {quality: 0.6,success(result) {console.log('压缩后的 Blob:', result);// 你可以用 FileReader 或 FormData 处理这个文件},error(err) {console.error(err.message);},
});
方式平台支持优点缺点
Canvas 压缩✅ 微信小程序、App自由控制尺寸和质量,通用性强需要一定代码量
uni.compressImage✅ 微信小程序、App简单易用无法控制尺寸,兼容性不够
compressorjs❌ 仅 H5封装好,效果不错不支持小程序环境

 最后:封装公共方法

// utils/compressImage.js/*** 通用图片压缩函数(兼容小程序/APP/H5)* @param {String} src 原始图片路径* @param {Object} options 配置项 { quality, width, height }* @returns {Promise<String>} 返回压缩后图片路径*/
export function compressImage(src, options = {}) {const { quality = 0.7, width = 800, height = null } = options;return new Promise((resolve, reject) => {// 判断运行平台const system = uni.getSystemInfoSync().platform;// 优先使用 canvas 压缩#ifdef MP-WEIXIN || APP-PLUSuni.getImageInfo({src,success(imgInfo) {const ratio = width / imgInfo.width;const targetWidth = width;const targetHeight = height || imgInfo.height * ratio;const canvasId = 'compressCanvas';const ctx = uni.createCanvasContext(canvasId);ctx.drawImage(src, 0, 0, targetWidth, targetHeight);ctx.draw(false, () => {setTimeout(() => {uni.canvasToTempFilePath({canvasId,destWidth: targetWidth,destHeight: targetHeight,fileType: 'jpg',quality,success(res) {resolve(res.tempFilePath);},fail(err) {reject(err);}});}, 200);});},fail: reject});#endif// H5 平台(用原图或者 compressorjs)#ifdef H5// 可以在此扩展 compressorjs 逻辑resolve(src); // 默认返回原图#endif});
}

http://www.lryc.cn/news/594887.html

相关文章:

  • uniapp使用uni-ui怎么修改默认的css样式比如多选框及样式覆盖小程序/安卓/ios兼容问题
  • 云原生周刊:K8s 中的后量子密码学
  • 【iOS】锁[特殊字符]
  • 类似腾讯会议的私有化音视频会议软件,BeeWorks Meet
  • MYSQL:数据库约束
  • Mysql(存储过程)
  • JVM 类加载过程笔记
  • MySQL 主从结构停库后重启操作及常见错误处理方法
  • javaSE(从0开始)day13
  • Ubuntu 22.04 安装 MySQL 8.0 完整步骤文档
  • MySQL 核心知识点梳理(3)
  • MySQL二进制包安装
  • 图论(2):最短路
  • 基于deepseek的LORA微调
  • 【深度学习新浪潮】如何系统性地学习扩散模型?
  • 分布式定时任务系列13:死循环是任务触发的银弹?
  • uniapp 输入时动态修改值(如含单位)光标被强制移至末尾
  • docker 软件bug 误导他人 笔记
  • 装饰器模式分析
  • java解析nc气象数据
  • numpy库的基础知识
  • 用Dify构建气象智能体:从0到1搭建AI工作流实战指南
  • React-useEffect的闭包陷阱(stale closure)
  • react 录音功能
  • 《Linux 环境下 Nginx 多站点综合实践:域名解析、访问控制与 HTTPS 加密部署》​
  • 大模型——Prompt 优化还是模型微调
  • Ubuntu 22.04 安装 Docker (安装包形式)
  • WPF 项目设置应用程序图标和设置程序集图标
  • 移星科技 modbus-tcp 转 modbus-Rtu模块
  • (数据结构)线性表(中):SLIst单链表