uniapp H5实现图片压缩限制在500KB内

yyhh~

已于 2022-09-21 14:49:47 修改

阅读量1k

点赞数

分类专栏： JS语法文章标签： uni-app 前端

于 2022-09-20 17:16:46 首次发布

本文链接：https://blog.csdn.net/m0_60067558/article/details/126957477

版权

JS语法专栏收录该内容

12 篇文章 0 订阅

订阅专栏

有个问题就是如果传啥图片都压的话，会压缩过份，导致图片像素都没得了图片失真这些问题，最好限制一下图片size如果大于500KB这些再压

	uploadImg(field, item, index, val, key) {
				let imgurl
				let that = this
				if (val.value) {
					// that.formData[index].list[key].value = ''
					// that.formParams[field] = ''
					that.previewImg(field, item, index, val, key)
				} else if (field) {
					that.canvasParams.width = 0
					that.canvasParams.height = 0
					uni.chooseImage({
						count: 1,
						sizeType: ['compressed'], //H5不可用
						success(res) {
							if (res && res.tempFilePaths && res.tempFilePaths[0]) {
								const tempFilePaths = res.tempFilePaths[0]
								let base64
								uni.getImageInfo({
									src: tempFilePaths,
									success: function(res) {
										// uni.showLoading({
										// 	title: '加载中',
										// })
										console.log('压缩前', res)
										// that.sourceImg.push(res.path)
										let canvasWidth = res.width //图片原始长宽
										let canvasHeight = res.height
										let base = canvasWidth / canvasHeight
										if (canvasWidth > 5000) {
											canvasWidth = 5000;
											canvasHeight = Math.floor(canvasWidth / base)
										}
										let img = new Image()
										img.src = res.path
										let canvas = document.createElement('canvas');
										let ctx = canvas.getContext('2d')
										canvas.width = 200
										canvas.height = 200
										ctx.drawImage(img, 0, 0, 200, 200)
										canvas.toBlob(function(fileSrc) {
											let imgSrc = window.URL.createObjectURL(fileSrc)
											// that.totalImg.push(imgSrc)
											imgurl = imgSrc
											that.query.field = field
											that.query.index = index
											that.query.key = key
											// base64图片过大，三张图片一起上传超过10M会失败
											// that.setImg(res.tempFilePaths[0])
											// blob图片和实际图片大小一样
											if (that.query.index != -1 && that.query.key != -1) {
												// that.formData[that.query.index].list[that.query.key].value = res.tempFilePaths[0]
												that.formData[that.query.index].list[that.query.key].value = imgurl
											}
											// that.formParams[that.query.field] = res.tempFilePaths[0]
												that.formParams[that.query.field] = imgurl
											that.$emit('change', that.formParams)
											uni.hideLoading()
											// console.log(imgSrc, '压缩之后的图片路径')
										})
									}
								})
							}
						},
						fail(err) {
							uni.showToast({
								title: err.errMsg,
								icon: 'none'
							})
						},
					})
				}
			},

原创博主：uniapp上传多张图片 - SpongGirl - 博客园