code学习

uniapp 获取图片信息及图片保存、压缩

一、uni.getImageInfo(OBJECT)

获取图片信息。

小程序下获取网络图片信息需先配置download域名白名单才能生效。

OBJECT 参数说明

参数名 类型 必填 说明
src String 图片的路径,可以是相对路径,临时文件路径,存储文件路径,网络图片路径
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

success 返回参数说明

参数名 类型 说明 平台差异说明
width Number 图片宽度,单位px
height Number 图片高度,单位px
path String 返回图片的本地路径
orientation String 返回图片的方向,有效值见下表 App、小程序、京东小程序
type String 返回图片的格式 App、小程序、京东小程序

orientation 参数说明

枚举值 说明
up 默认
down 180度旋转
left 逆时针旋转90度
right 顺时针旋转90度
up-mirrored 同up,但水平翻转
down-mirrored 同down,但水平翻转
left-mirrored 同left,但垂直翻转
right-mirrored 同right,但垂直翻转

示例

uni.chooseImage({
	count: 1,
	sourceType: ['album'],
	success: function (res) {
		uni.getImageInfo({
			src: res.tempFilePaths[0],
			success: function (image) {
				console.log(image.width);
				console.log(image.height);
			}
		});
	}
});           

二、uni.saveImageToPhotosAlbum(OBJECT)

保存图片到系统相册。

平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 字节跳动小程序、飞书小程序 QQ小程序 快手小程序 京东小程序
x

OBJECT 参数说明

参数名 类型 必填 说明
filePath String 图片文件路径,可以是临时文件路径也可以是永久文件路径,不支持网络图片路径
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

success 返回参数说明

参数名 类型 说明
path String 保存到相册的图片路径,仅 App 3.0.5+ 支持
errMsg String 调用结果

注意

  • 可以通过用户授权API来判断用户是否给应用授予相册的访问权限https://uniapp.dcloud.io/api/other/authorize(opens new window)
  • H5没有API可触发保存到相册行为,下载图片时浏览器会询问图片存放地址。

示例代码:

uni.chooseImage({
	count: 1,
	sourceType: ['camera'],
	success: function (res) {
		uni.saveImageToPhotosAlbum({
			filePath: res.tempFilePaths[0],
			success: function () {
				console.log('save success');
			}
		});
	}
});           

三、uni.compressImage(OBJECT)

压缩图片接口,可选压缩质量

平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 字节跳动小程序、飞书小程序 QQ小程序 快手小程序 京东小程序
x √(基础库版本>=3.110.3)

OBJECT 参数说明

属性 类型 默认值 必填 说明 平台差异说明
src String 图片路径,图片的路径,可以是相对路径、临时文件路径、存储文件路径
quality Number 80 压缩质量,范围0~100,数值越小,质量越低,压缩率越高(仅对jpg有效)
width String auto 缩放图片的宽度,支持像素值(如"100px")、百分比(如"50%")、自动计算(如"auto",即根据width与源图宽的缩放比例计算,若未设置width则使用源图宽度) App 3.0.0+
height String auto 缩放图片的高度,支持像素值(如"100px")、百分比(如"50%")、自动计算(如"auto",即根据height与源图高的缩放比例计算,若未设置height则使用源图高度) App 3.0.0+
rotate Number 旋转度数,范围0~360 App 3.0.0+
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

success 返回参数说明

属性 类型 说明
tempFilePath String 压缩后图片的临时文件路径

示例代码:

uni.compressImage({
  src: '/static/logo.jpg',
  quality: 80,
  success: res => {
    console.log(res.tempFilePath)
  }
})           

蓦然、回首,那人就在灯火阑珊处