uniapp H5 图片压缩并且转blob

创建image.js文件用于存放封装的方法(压缩图片)

export function translate(imgSrc, scale) {
	//imgSrc:图片的路径
	//scale:缩放比例 0-1之间
	return new Promise((reslove, reject) => {
		var img = new Image(); //创建Image对象生成一个<img>标签
		img.src = imgSrc; //将图片路径赋给<img>标签的src
		img.onload = () => {//onload在图片加载成功后触发，在onload中完成压缩功能
			var h = img.height; // 获取原本图片的宽高
			var w = img.width;  //默认按比例压缩,根据需求修改
			var canvas = document.createElement('canvas');//创建画布
			var ctx = canvas.getContext('2d');  //设置为2d效果
			var width = document.createAttribute("width"); //创建属性节点
			width.nodeValue = w; //设置属性值
			var height = document.createAttribute("height");
			height.nodeValue = h;
			canvas.setAttributeNode(width); //设置画布宽高
			canvas.setAttributeNode(height);
			ctx.drawImage(img, 0, 0, w,h);//将图片贴到画布上
			//img:图片 0,0:粘贴的位置 w,h:粘贴图片的大小
			var base64 = canvas.toDataURL('image/jpeg', scale);
			//'image/png':压缩返回图片的类型 scale:图片质量
			//如果要base64的流，可以直接将结果返回了
			canvas = null; //清除画布
			var blob = base64ToBlob(base64); //需要二进制流调用该方法拿到
			let blobUrl = window.URL.createObjectURL(blob);//blob地址
			reslove(blobUrl)
		}
	})
 }

base64转Blob

function base64ToBlob(base64) { 
	var arr = base64.split(','),
	mime = arr[0].match(/:(.*?);/)[1],
	bstr = atob(arr[1]),
	n = bstr.length,
	u8arr = new Uint8Array(n);
	while (n--) {
		u8arr[n] = bstr.charCodeAt(n);
	}
	return new Blob([u8arr],  {
		type: mime,
	});
}

使用方法

import {
	translate
} from './image.js';


chooseImageAfterUploadVehicleLicense() {
	uni.chooseImage({
		count: 1, // 默认9，设置图片的最大选择数，设置为1则仅选择一张图片
		sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
		sourceType: ['camera', 'album'], // 可以指定来源是相册还是相机，默认二者都有
		success: (res) => {
			// 返回选定照片的本地文件路径列表
			uni.showLoading({
				title: '上传中...'
			});
			const tempFilePath = res.tempFilePaths[0]; // 选中的图片临时路径
			Promise.all([translate(tempFilePath,0.2)]).then(item=>{
				console.log(item)
                uni.hideLoading()
			})
			
		}
	});