uniapp实现小程序打开相册或拍照上传图片附赠兼容H5方法_uniapp打开相册

前言

小程序上传图片，或者拍照上传图片，并附带兼容H5上传图片方法，压缩图片。

一、支持相册选择和拍照

支持选择相册和拍照，可以使用uniapp提供的api，当然也可以自己去封装自己想要的样式，我这里直接是使用了uni的方法。uni.chooseImage配置sourceType: ['album', 'camera']

openSelectImage() {
	let tempList = []
	uni.chooseImage({
		sizeType: ['compressed'],
		sourceType: ['album', 'camera'],
		success: (res) => {
			if (res.tempFilePaths?.length > 0) {
				tempList = res.tempFilePaths
				// #ifdef MP
				this.recursionCompressMP(tempList, (e) => {
					console.log('压缩后结果-----', e)
				})
				// #endif
				// #ifdef H5
				this.recursionCompressH5(tempList, (e) => {
					console.log('压缩后结果-----', e)
				})
				// #endif
			}
		},
		fail: (err) => {
			console.log("err: ------", err);
		}
	})
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

// 微信
async recursionCompressMP(urlList, callback) {
	let imgCompressList = []
	let imageSize = 0
	for (let itemUrl of urlList) {
		const result = await this.jumpImageCompress(itemUrl)
		if (result?.size < 150000) {
			this.tempImageList.push(itemUrl)
			continue
		}
		await this.getUserImageCompress(itemUrl, callback, result?.size)
	}
},
1
2
3
4
5
6
7
8
9
10
11
12
13

压缩图片主要用canvas提供的api
1、uni.createCanvasContext 创建 canvas 绘图上下文。
2、CanvasContext.drawImage 绘制图像到画布。
3、CanvasContext.draw将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中。
4、当canvas绘制完成后，将canvas导出成为图片，把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径。uni.canvasToTempFilePath

//微信压缩图片
getUserImageCompress(itemUrl, callback, size){
	let that = this;
	return new Promise ((resolve, reject)=>{
		uni.getImageInfo({
			src: itemUrl,
			success: (res) => {
				//获取设备像素比，不获取最后图片展示有问题
				uni.getSystemInfo({
					success: function(info) {
						let ratio = 2;
						let canvasWidth = res.width //图片原始长宽
						let canvasHeight = res.height
						let compressWidth = res.width
						let quality = 0.1
						compressWidth = res.width - 120
						canvasHeight = res.height - 120
						while (canvasWidth > compressWidth || canvasHeight > canvasHeight) { // 保证宽高在400以内
							canvasWidth = Math.trunc(res.width / ratio)
							canvasHeight = Math.trunc(res.height / ratio)
							ratio++;
						}
						that.canvasWidth = canvasWidth
						that.canvasHeight = canvasHeight
						let ctx = uni.createCanvasContext('mycanvas')
						ctx.drawImage(res.path, 0, 0, canvasWidth, canvasHeight)
						ctx.draw(false, setTimeout(() => {
							uni.canvasToTempFilePath({
								canvasId: 'mycanvas',
								destWidth: canvasWidth,
								destHeight: canvasHeight,
								fileType: 'jpg',
								quality: quality,
								success: function(res1) {
									callback && callback(res1.tempFilePath) //拿到图片压缩后的临时路径
									uni.getFileInfo({
										filePath: res1.tempFilePath,
										success: (ress) => {
											console.log('压缩之后----',ress) //返回图片尺寸
											callback && callback(res1.tempFilePath)
											console.log('添加数据----', that.tempImageList)
											
											resolve(res1.tempFilePath)
											that.tempImageList.push(res1.tempFilePath)
										}
									})
								},
								fail: function(res) {
									console.log('canvas错误---',res.errMsg)
								}
							})
						}, 100)) //留一定的时间绘制canvas
					}
				})
			},
			fail: (e) => {
				console.log('错误----', e)
			}
		})
	})
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

利用返回的图片大小去控制压缩的比例，重复执行压缩函数。

//返回图片大小
jumpImageCompress (itemUrl) {	
	return new Promise((resolve, reject)=>{
		uni.getFileInfo({
			filePath: itemUrl,
			success: (res) => {
				console.log('压缩之前图片大小----',res) //返回图片尺寸
				resolve(res)
			},
			fail: (err) =>{
				reject(err)
			}
		})
	})
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

//h5
recursionCompressH5(url, callback) {
if (typeof url === 'string') {
		this.getUserImageCompressH5(url,callback)
	} else if (typeof url === 'object') {
		for (let itemImg of url) {
			this.getUserImageCompressH5(itemImg,callback)
		}
	}
},
1
2
3
4
5
6
7
8
9
10

Tips：因为H5端 Canvas 内绘制的图像需要支持跨域访问才能成功。所以h5端uni.canvasToTempFilePath会返回为空，所以需要使用toBlob转为文件，再利用createObjectURL转为url，这样就可以获取到图片信息。控制压缩比例。

// h5压缩图片
getUserImageCompressH5 (imgUrl,callback) {
	let that = this;
	return new Promise((resolve, reject)=>{
		uni.getImageInfo({
			src: imgUrl,
			success(res) {
				let canvasWidth = res.width; //图片原始长宽
				let canvasHeight = res.height;
				let img = new Image();
				img.src = res.path;
				console.log(5435435353)
				let canvas = document.createElement("canvas");
				let ctx = canvas.getContext("2d");
				canvas.width = canvasWidth / 2;
				canvas.height = canvasHeight / 2;
				ctx.drawImage(img, 0, 0, canvasWidth / 2, canvasHeight / 2);
				canvas.toBlob(function(fileSrc) {
					let imgSrc = window.URL.createObjectURL(fileSrc);
					uni.getFileInfo({
						filePath: imgSrc,
						success: (resFileInfo) => {
							if (resFileInfo.size > 150000) {
								//压缩后大于1M就继续压缩
								that.recursionCompressH5(imgSrc, callback);
								return;
							} else {
								callback && callback(imgSrc)
								resolve(imgSrc)
								that.tempImageList.push(imgSrc)
							}
						},
					});
				});
			}
		});
	})
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

二、删除图片

删除功能很简单，直接使用数组方的删除方法splice就可以了。

deleteSelectImg(index) {
	this.tempImageList.splice(index, 1)
},
1
2
3

三、效果图

至于页面ui结构，这里就不粘贴了，可以根据自己实际需求去实现。

存在问题

在控制压缩比例的地方，还有一些缺陷，并没有很完美的解决压缩指定大小图片问题。
如有问题欢迎指出…