引言

由于 uniapp 小程序项目需要在用户上传前压缩图片并上传至 oss ，因此在 uniapp 插件市场找了插件并修改

使用的插件

图片压缩

插件出现的问题

在压缩图片时，发现当上传的图片宽度小于高度的时候会旋转图片，使用 uni.getImageInfo() 获取图片信息时，最大的值就变成了宽度，因此压缩出来的图片就会出现变形

解决方法

在插件市场上导入项目之后，会在项目的 components 目录下出现 w-compress 文件夹，在 w-compress 的 compress.js 文件中的 calcImageSize 方法添加如下代码，就可以解决上传宽度比高度小的图片压缩之后出现变形的情况

// 图片分辨率压缩
const calcImageSize = (res, pixels) => {let imgW, imgHimgW = res.widthimgH = res.height// 此处为添加的判断if (res.orientation === 'left' || res.orientation === 'right') {imgW = res.heightimgH = res.width}let ratioif((ratio = imgW * imgH / pixels) > 1) {ratio = Math.sqrt(ratio)imgW = parseInt(imgW / ratio)imgH = parseInt(imgH / ratio)} else {ratio = 1}return { imgW, imgH }
}

此修改就是判断当前图片有没有进行过旋转

结尾

各位大神如果不想用插件准备自己封装，也需要注意一下在获取图片信息出现旋转的问题，我也是在使用了一些插件之后才发现插件都没有注意图片这个旋转问题！！！

希望此文章对各位大神有所帮助，如有错误，希望各位大神多多指教

uniapp 小程序端上传并压缩图片相关推荐

fastadmin上传图片，小程序端上传多张图到服务器
小程序端代码 uploadfile函数:选择图片,然后循环调用uploadfilepath方法,达到上传多张的效果 uploadfilepath函数:上传图片专用的,并且处理上传完成后要做的事情(例如 ...
微信小程序同时上传视频和图片（支持多选）
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言二.使用步骤 1.小程序页面代码 2.小程序JS内代码总结前言随着小程序的的不断发展,小程序技术也越来越广泛了, ...
微信小程序实现上传文件如图片/word excel到服务器
说道上传文件,首先要想到微信官方文档给的API,wx.uploadFile({ }) 通过这个API来达到上传至服务器的效果:代码示例如下接下来我们先来说说上传图片功能,这个比较简单一些上传图片: ...
uniapp 超过2m无法上传代码！uni-module太大了，小程序无法上传怎么办？
问题描述: 虽然分包了.但是主包里还有很多uniui的组件,占了2m多,之前一直是点击运行,然后再上传代码.提示的超过2m无法上传. 解决办法: 点击发行,然后上传就可以了. 优化建议: 1.组件按需 ...
uniapp 录音_uni-app小程序录音上传解决方案（后续更新Taro版)
能力依赖录音功能的要求与限制与当前页面其余音频播放/录音功能互斥是否在录音中状态显示结束/不须要录音时,回收RecorderManager对象材料 Codeing(结果代码直接看最后) 构造 ...
小程序一次性上传多个本地图片，上拉加载照片以及图片加载延迟解决之道
一:小程序之一次性上传多个本地相片最近由于项目需要所以学了下小程序,也做了一些东西,随后便有了以下的一些总结了,现在说说如何使用小程序一次性上传多个本地相片. 问题描述最近做项目的时候要实现一个上 ...
上传声音微信小程序_SpringBoot开发案例之微信小程序录音上传
前言书接上回的<SpringBoot开发案例之微信小程序文件上传>,正常的业务流程是,口语测评需要学生通过前端微信小程序录入一段音频,通过调用第三方音频处理服务商进行评分,然后服务端对原 ...
微信小程序直接上传文件到阿里云OSS组件封装
微信小程序直接上传文件到OSS 1. 封装公共方法在根目录utils目录新建一个upload文件夹: // utils/upload/base64.jsvar base64EncodeChars = ...
微信小程序：上传的图片显示旋转问题
问题? 开发中遇到微信小程序在上传照片后,会有一定概率旋转,查阅了资料之后,发现是和图片中携带的exif信息中的orientation这个参数有关. 小程序的页面实用webview渲染的,webvie ...
【微信小程序】上传文件到阿里云OSS
小程序上传文件到OSS也是利用OSS提供的PostObject接口来实现表单文件上传到OSS 步骤1:配置Bucket跨域访问客户端进行表单直传到OSS时,会从浏览器向OSS发送带有Origin的请 ...

uniapp 小程序端上传并压缩图片

uniapp 小程序端上传并压缩图片

引言

使用的插件

插件出现的问题

解决方法

结尾

uniapp 小程序端上传并压缩图片相关推荐

最新文章

热门文章