vue uni-app 上传图片图片压缩优化

最新推荐文章于 2024-07-05 16:23:37 发布

北境程序员

最新推荐文章于 2024-07-05 16:23:37 发布

阅读量500

点赞数 2

本文链接：https://blog.csdn.net/weixin_42796490/article/details/123416578

版权

uni-app 小程序 vue 上传图片压缩优化专栏收录该内容

1 篇文章 0 订阅

订阅专栏

该博客介绍了在前端使用uni-app进行图片选择和压缩的实现过程。通过调用uni.chooseImage方法获取图片，然后根据图片大小决定是否进行压缩。利用util.js中的compressImg函数进行压缩，依据图片大小调整压缩比例，并将压缩后的图片转换回file类型。压缩主要目的是减少图片大小，以满足上传限制。

摘要由CSDN通过智能技术生成

<view class="content">
	<view @tap="ChooseImage()">点击上传图片</view>
</view>
import {compressImg } from '../../utils/util.js'   公用的图片压缩路径
methods: {
		ChooseImage() {
			let that = this
			uni.chooseImage({
				count: 1,
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], //从相册选择
				success: res => {
					const imgSize = res.tempFiles[0] && res.tempFiles[0].size ? res.tempFiles[0].size : 0; //图片大小
					//判断图片大于 1m 走下面的图片压缩
					if (imgSize > 1024) {
						let b = compressImg(res.tempFiles[0]).then(res => {
							console.log(res)
						})
					} else {

					}
				}
			})
		}
	}



// util.js文件 看清楚路径
function compressImg(file) {
 	var src;
 	var files;
	var fileName = file&&file.name?file.name:'';
 	var fileSize = parseFloat(parseInt(file['size']) / 1024 / 1024).toFixed(2);
 	var read = new FileReader();
 	read.readAsDataURL(file);
 	return new Promise(function(resolve, reject) {
 		read.onload = function(e) {
 			var img = new Image();
 			img.src = e.target.result;
 			img.onload = function() {
 				//默认按比例压缩
 				var w = this.width,
 					h = this.height;
 				//生成canvas
 				var canvas = document.createElement('canvas');
 				var ctx = canvas.getContext('2d');
 				var base64;
 				// 创建属性节点
 				canvas.setAttribute("width", w);
 				canvas.setAttribute("height", h);
 				ctx.drawImage(this, 0, 0, w, h);
 				if (fileSize < 1) {
 					//如果图片小于一兆 那么不执行压缩操作
 					base64 = canvas.toDataURL(file['type'], 1);
 				} else if (fileSize > 1 && fileSize < 2) {
 					//如果图片大于1M并且小于2M 那么压缩0.5
 					base64 = canvas.toDataURL(file['type'], 0.5);
 				} else {
 					//如果图片超过2m 那么压缩0.2
 					base64 = canvas.toDataURL(file['type'], 0.2);
 				}
 				// 回调函数返回file的值（将base64编码转成file）
 				files = dataURLtoFile(base64,fileName); //如果后台接收类型为base64的话这一步可以省略
 				resolve(files)
 			}
 		}
 	})
 };
 function dataURLtoFile(dataurl,filename) {
     var arr = dataurl.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 File([u8arr],filename,  { type: mime });
 }
 module.exports = {
	 compressImg
 }