uni-app H5端 图片上传压缩，并判断压缩后大小

uni-app H5端 图片上传压缩，并判断压缩后大小

公司要做uni-app 的H5图片压缩，之前app端使用 plus.zip.compressImage 在H5端已经不能使用，所以在网上找了一下，但是很多不使用，需要改造下，得到压缩后的图片路径和大小

1.创建imageZip.js

/** * 压缩 * @param {Object} imgSrc 图片url * @param {Object} callback 回调设置返回值 */
export function translate(imgSrc, callback) {
	var img = new Image();
	img.src = imgSrc;
	img.onload = function() {
		var that = this;
		var h = that.height; // 默认按比例压缩		
		var w = that.width;
		var canvas = document.createElement('canvas');
		var ctx = canvas.getContext('2d');
		var anw = document.createAttribute("width");
		anw.nodeValue = w;
		var anh = document.createAttribute("height");
		anh.nodeValue = h;
		canvas.setAttributeNode(anw);
		canvas.setAttributeNode(anh);
		ctx.drawImage(that, 0, 0, w, h); //压缩比例		
		var quality = 0.1;
		var base64 = canvas.toDataURL('image/jpeg', quality);
		canvas = null;
		var blob = base64ToBlob(base64);
		//压缩之后的图片大小
		var sizeZip = blob.size		
		//Blob对象转blob地址		
		var blobUrl = window.URL.createObjectURL(blob);
		let res = {
			url:blobUrl,
			size:sizeZip
		}
		callback(res);
	}
} /** * base转Blob对象 * @param {Object} base64 base64地址 */
export 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
	});
}

2.在request.js引入imageZip.js

import * as TranslateImage from './imageZip.js'

3.在request.js,使用

// 图片压缩
						TranslateImage.translate(res.tempFiles[0].path, ((res) => {
							// console.log(res)
							if (Number(res.size) > 1000000) {
								uni.showModal({
									content: `图片过大${(e.size)},请重新上传`,
									showCancel: false,
									success() {

									}
								})
								return
							}
							let files = [{
								"path": res.url,
								"size": res.size,
							}]
//调用上传图片服务器
							return
						}))