uniapp-图片压缩(适配H5,APP)

uniapp本身是自带压缩图片的方式的,但是他只适用于APP,做不到多端的适配,如果只考虑app,就非常容易实现了。

使用uni.compressImage()这个API即可

javascript 复制代码
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的方式进行压缩

原理:按照需求等比例创建空白画布,将图片粘到画布上,最后保存画布的base64流

javascript 复制代码
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/2; // 获取原本图片的宽高
			var w = img.width/2;  //默认按比例压缩,根据需求修改
			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/png', scale);
			//'image/png':压缩返回图片的类型 scale:图片质量
			//如果要base64的流,可以直接将结果返回了
			canvas = null; //清除画布
			var blob = this.base64ToBlob(base64); //需要二进制流调用该方法拿到
			let blobUrl = window.URL.createObjectURL(blob);//blob地址
			reslove(blobUrl)
		}
	})
 },
// base64转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,
	});
},
相关推荐
JiKun几秒前
一键配置 Web 前端开发环境(PowerShell 自动化脚本)
前端·windows·程序员
合作小小程序员小小店6 分钟前
web网页开发,在线%考试,教资,题库%系统demo,基于vue,html,css,python,flask,随机分配,多角色,前后端分离,mysql数据库
前端·vue.js·后端·前端框架·flask
慧一居士12 分钟前
ES6(ECMAScript 2015)功能介绍,使用场景,对应功能点完整使用示例
前端
吃饺子不吃馅22 分钟前
了解微前端:为何 Web Component 是绕不开的关键技术?
前端·javascript·架构
恋猫de小郭27 分钟前
第一台 Andriod XR 设备发布,Jetpack Compose XR 有什么不同?对原生开发有何影响?
android·前端·flutter
muyouking1129 分钟前
Tailwind CSS 小白快速入门速查手册
前端·css·css3
社恐的下水道蟑螂36 分钟前
用 n8n 打造 AI 科技新闻速览工作流:自动化获取、总结,每天高效充电
前端
陈随易43 分钟前
PaddleOCR-VL可太强了,图片识别转文字的巅峰之作
前端·后端·程序员
盗德43 分钟前
紧急项目下,前端是“先乱炖”还是“慢火煲汤”?我选第三条路
前端·程序员
zmirror1 小时前
Monorepo单仓多包&独立部署
前端