js h5 上传压缩图片

h5上传压缩图片

首先 我是在用uni 进行h5页面开发 uni.chooseImage 有一个属性 sizeType 但是不支持h5 所以我们只能用比较麻烦的方法.

下面介绍我使用的方法

首先 我们这边上传图片的接口 传入的blob格式 ex:blob:http://localhost:8080/f8c98be7-613c-400c-b973-6a87e6c5bd3c

后台返回的是线上的地址图片

我所使用的办法 在这里给大家介绍一下 是通过uni.chooseImage 获取的blob图片格式 转化为base64 之后通过canvas 压缩 之后转化为blob格式

这里不建议传base64 因为太大了 后端没法接受[^1]

ok 多的不说 上代码

uni.chooseImage({
				count: _self.limitSum,
				success: res => {
					// let resSize = res.tempFiles[0].size;
					// if(resSize > 20971520){
					//     uni.showToast({//143363
					//         title: "上传的图片大小不超过20M",
					//         icon: 'none',
					//         duration: 2000,
					//         mask: true
					//     });
					// return
					// }
					if (this.imageList.length == 0) {
						this.imageList = res.tempFilePaths;
					} else {
						this.imageList.push(res.tempFilePaths[0]);
					}
				}
			});

这是uni的方法 获取上传图片的blob路径 当然你也可以限制图片大小

下一步要做的 就是将获取的blob图片转换为base64

blobToDataURI(blob, callback) {
			// blob 转 base64
			var reader = new FileReader();
			reader.readAsDataURL(blob);
			reader.onload = function(e) {
				callback(e.target.result);
			};
		},

调用这个方法 这uni.chooseImage的回调里面

this.blobToDataURI(res.tempFiles[0], function(data) {
						// 创建img 标签获取宽度高度
						const img = new Image();
						img.src = data;
						img.onload = function() {
							const originWidth = img.width;
							const originHeight = img.height;
							

							// 创建画布
							const canvas = document.createElement('canvas');
							const context = canvas.getContext('2d');
							var quality = 0.8;
							// 设置宽高度为等同于要压缩图片的尺寸
							canvas.width = originWidth / 2;
							canvas.height = originHeight / 2;
							context.clearRect(0, 0, originWidth / 2 , originHeight / 2);
							//将img绘制到画布上
							context.drawImage(img, 0, 0, originWidth / 2, originHeight / 2);

						};
					});

这个回调里面的data 就是图片的base64码
代码里注释很清楚 先获取宽高
const maxWidth = 200,
maxHeihgt = 200; //最大尺寸限制
这个是自己设定 我设定是是200 你也可以根据自己的需求来设定

最后我们得到的canvas 是一个压缩之后的base64 码 所以我们需要转换

	//canvas  压缩后的base64转化为 blob   第二个参数res.tempFiles[0].type 是图片类型
							canvas.toBlob(function(fileSrc) {
								//原生JS生成文件路径
								let imgSrc = window.URL.createObjectURL(fileSrc); 
								console.log('压缩完图片路径', imgSrc);
								_self.$commonURL.uploadFile({
									url: _self.$commonURL.path.uploadFile,
									data: imgSrc,
									name: 'file', //必传name
									success: function(res) {
										console.log(res);
										_self.$setObject(_self.imgs, 0, res);
										_self.choosedImage = _self.imgs[0];
									},
									progressFinish: function(res) {
										_self.$setObject(_self.progressList, 0, res.progress);
									}
								});
							}, res.tempFiles[0].type);

//原生JS生成文件路径
let imgSrc = window.URL.createObjectURL(fileSrc); 

这边有一个坑 canvas.toBlob(function(fileSrc)

.这个获取到的fileSrc是没有本地路径的

就是这样子
所以说 我们需要通过原生的获取本地路径的方法 获取blob路径
let imgSrc = window.URL.createObjectURL(fileSrc);

之后我们直接调用接口 上传我们的压缩好的blob图片格式
好 这就是我完成压缩图片的所用的办法 如果对大家有帮助,可以一键三连哦!!!