uni-app h5 上传图片 压缩图片

由于uni-app h5 不支持sizeType,如果需要压缩图片就只能自己去实现了。

1. 选择图片:


				uni.chooseImage({
					count: 6, //默认9
					// sizeType: ['compressed'], //可以指定是原图还是压缩图,默认二者都有
					sourceType: ['album'], //从相册选择
					success: function (res) {
						let tempPaths = res.tempFilePaths
						if(tempPaths.length + _this.imgList.length > 6) {
							uni.showToast({
								title: '上传图片最多可选6张',
								icon: 'none'
							})
						} else {
							_this.imgList = _this.imgList.concat(tempPaths)
							_this.compressImage()
						}
					}
				})

			compressImage(){
				for(let i in this.imgList){
					let imgFile = this.imgList[i]
					this.getImageInfo(imgFile)
				}
			},

 2. 获取图片信息并压缩

// 获取图片信息
			getImageInfo(src) {
				let _this = this
				uni.getImageInfo({
					src,
					success(res) {
						console.log('压缩前', res)
						let canvasWidth = res.width //图片原始长宽
						let canvasHeight = res.height
						let img = new Image()
						img.src = res.path
						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)
							console.log('压缩后', imgSrc)
							_this.uploadFile(imgSrc)
						})
					}
				})
			},

3. 上传

// 上传图片
			uploadFile(filePath) {
				let _this = this
				uni.uploadFile({
					url: '/api/api/Profile/UploadImg',
					name: 'file',
					filePath,
					formData: {},
					success: (res) => {
						let { data } = JSON.parse(res.data)
						_this.imgResults.push(data)
					},
					fail: (err) => {
						uni.showToast({
							title: err.errMsg,
							icon: 'none'
						})
					}
				});
			},

 

UniApp 的 `chooseImage` API 可以帮助你在 H5 应用中选择图片,但是原生处理图片压缩并转成 base64 格式通常是在客户端完成的。要在 UniApp 中限制图片大小到100KB以内,你可以使用 JavaScript 或者 UniApp 提供的一些内置或第三方库,比如 vant-weapp 的 image-preview 组件。 下面是一个简单的步骤概述: 1. 使用 `uni.chooseImage` 获取用户选择的图片: ```javascript uni.chooseImage({ count: 1, // 取消选择限制 sourceType: ['album', 'camera'], success: function(res) { let tempFiles = res.tempFiles; if (tempFiles.length > 0) { processImage(tempFiles[0]); } }, }); ``` 2. 定义 `processImage` 函数,对图片进行压缩: ```javascript function processImage(file) { uni.getImageInfo({ src: file.path, success: function(imgInfo) { const originalSize = imgInfo.size; // 获取原始图片大小 // 使用 uniapp-sdk-image-resizer 这样的库进行压缩 uni.imageCompress({ src: file.path, quality: 0.8, // 设置压缩质量,范围0-1 size: 100 * 1024, // 目标大小,单位是字节 destType: 'base64', success: function(compressedData) { // 压缩后的 base64 编码 const compressedBase64 = compressedData.result; // ...这里可以保存或发送压缩后的 base64 数据 }, fail: function(error) { console.error('压缩失败:', error); }, }); }, }); } ``` 请注意,实际效果可能因浏览器兼容性和图片本身的编码等因素略有差异。如果需要更精确的控制,你可能需要额外检查压缩后的文件大小是否达到目标。
评论 18
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

俊刚、

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值