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

8 篇文章 0 订阅

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

引言

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

使用的插件

图片压缩

插件出现的问题

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

解决方法

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

在这里插入图片描述

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

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

结尾

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

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

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值