uniapp本身是自帶壓縮圖片的方式的，但是他只適用于APP，做不到多端的適配，如果只考慮app，就非常容易實(shí)現(xiàn)了。
使用uni.compressImage()這個(gè)API即可

compressImage(url) {
	return new Promise((reslove, reject) => {
		   const tempFilePath = url //url是選中圖片的路徑
		   uni.compressImage({ 
		       src: tempFilePath,
		       quality: 50, //壓縮的程度
		       success: (res) => {
					reslove(res.tempFilePath) //壓縮成功返回的路徑
		       },
		       fail: (error) => {
		            console.log('壓縮失敗', error)
		       }
		   })	
		})
	},

要適配H5和APP可以使用canvas的方式進(jìn)行壓縮
原理：按照需求等比例創(chuàng)建空白畫布，將圖片粘到畫布上，最后保存畫布的base64流文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-729541.html

translate(imgSrc, scale) {
	//imgSrc:圖片的路徑
	//scale:縮放比例 0-1之間
	return new Promise((reslove, reject) => {
		var img = new Image(); //創(chuàng)建Image對(duì)象生成一個(gè)<img>標(biāo)簽
		img.src = imgSrc; //將圖片路徑賦給<img>標(biāo)簽的src
		img.onload = () => {//onload在圖片加載成功后觸發(fā)，在onload中完成壓縮功能
			var h = img.height/2; // 獲取原本圖片的寬高
			var w = img.width/2;  //默認(rèn)按比例壓縮,根據(jù)需求修改
			var canvas = document.createElement('canvas');//創(chuàng)建畫布
			var ctx = canvas.getContext('2d');  //設(shè)置為2d效果
			var width = document.createAttribute("width"); //創(chuàng)建屬性節(jié)點(diǎn)
			width.nodeValue = w; //設(shè)置屬性值
			var height = document.createAttribute("height");
			height.nodeValue = h;
			canvas.setAttributeNode(width); //設(shè)置畫布寬高
			canvas.setAttributeNode(height);
			ctx.drawImage(img, 0, 0, w,h);//將圖片貼到畫布上
			//img:圖片 0,0:粘貼的位置 w,h:粘貼圖片的大小
			var base64 = canvas.toDataURL('image/png', scale);
			//'image/png':壓縮返回圖片的類型 scale:圖片質(zhì)量
			//如果要base64的流，可以直接將結(jié)果返回了
			canvas = null; //清除畫布
			var blob = this.base64ToBlob(base64); //需要二進(jìn)制流調(diào)用該方法拿到
			let blobUrl = window.URL.createObjectURL(blob);//blob地址
			reslove(blobUrl)
		}
	})
 },
// base64轉(zhuǎn)Blob
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,
	});
},

到了這里，關(guān)于uniapp-圖片壓縮(適配H5,APP)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！