js实现图片本地压缩并上传

最新推荐文章于 2024-04-13 21:56:47 发布

lxy123456780

最新推荐文章于 2024-04-13 21:56:47 发布

阅读量654

点赞数

分类专栏： js 图片压缩文章标签： javascript html5 html

本文链接：https://blog.csdn.net/lxy123456780/article/details/107233386

版权

js 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

图片压缩

1 篇文章 0 订阅

订阅专栏

首先本地上传一张图片进行大小及格式验证
获取图片base64编码
设置压缩后的宽高
并new 一个 Image，canvas绘制出改Image，并设置压缩后的宽高
利用canvas对图片进行压缩
获取到压缩后的base64编码，可以进行图片上传等操作

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图片压缩</title>
</head>
<body>
	<input type="file" id="upload" name="">
	<script>
		const ACCEPT = ['image/jpg', 'image/png', 'image/jpeg'];
		const MAXSIZE = 1024 * 1024;
		const MAXSIZE_STR = '1MB';

		function convertImageToBase64(file, callback) {
			let reader = new FileReader();
			reader.readAsDataURL(file);
			reader.addEventListener('load', function(e){
				// console.log(e.target.result);
				// console.log(reader.result);
				const base64Image = e.target.result;
				callback && callback(base64Image);
				reader = null;
			})
			reader.readAsDataURL(file);
		}
		// 图片压缩
		function compress(base64Image, callback){
			// console.log(base64Image);
			let maxW = 1024;
			let maxH = 1024;
			const image = new Image();
			image.addEventListener('load', function(e){
				let ratio; //图片的压缩比
				let needCompress = false; // 是否需要压缩
				if(maxW < image.naturalWidth) {
					needCompress = true;
					ratio = image.naturalWidth / maxW;
					maxH = image.naturalHeight / ratio;
				}
				//经过处理后，实际图片的尺寸为1024 * 640;
				if(maxH < image.naturalHeight) {
					needCompress = true;
					ratio = image.naturalHeight / maxH;
					maxW = image.naturalWidth / ratio;
				}
				if(!compress) {
					maxW = image.naturalWidth;
					maxH = image.naturalHeight;
				}//如果不需要压缩，需要获取图片的实际尺寸

				const canvas = document.createElement('canvas');
				canvas.setAttribute('id','__compress__');
				canvas.width = maxW;
				canvas.height = maxH;
				canvas.style.visibility = 'hidden';
				// document.body.appendChild(canvas);

				const ctx = canvas.getContext('2d');
				ctx.clearRect(0,0,maxW,maxH);
				ctx.drawImage(image, 0, 0, maxW, maxH);
				// toDataURL的第二个参数表示图片质量，取值为0-1 1为原图
				const compressImage = canvas.toDataURL('image/jpeg', 0.5);
				callback && callback(compressImage);


				// 在页面上展示压缩后的图片
				// const _image = new Image();
				// _image.src = compressImage;
				// document.body.append(_image);
				// canvas.remove();

				// console.log('压缩比:'+image.src.length / _image.src.length);
			});
			image.src = base64Image;
			// document.body.appendChild(image);

		}
		//获得压缩后的base64
		function uploadToServer(compressImage) {
			//这里调用上传图片base64编码的接口
			console.log('upload to server...', compressImage);
		}
		
		const upload = document.getElementById('upload');
		upload.addEventListener('change', function(e){
			console.log(e.target.files);
			const [file] = e.target.files;
			if(!file) {
				return;
			}
			const { type: fileType, size: fileSize } = file;

			//图片支持类型检查
			if(!ACCEPT.includes(fileType)) {
				alert(`不支持[${fileType}]文件类型!`);
				upload.value = '';
				return;
			}

			//图片容量检查
			if(fileSize > MAXSIZE) {
				alert(`文件大小超出${MAXSIZE_STR}!`);
				upload.value = '';
				return;
			}

			//压缩图片
			convertImageToBase64(file, (base64Image) => compress(base64Image, uploadToServer));
		})	
	</script>
</body>
</html>