js h5 上传图片转成base64 进行图片压缩不失真

wb54979

已于 2022-04-01 17:57:55 修改

阅读量2.5w

点赞数 2

分类专栏： javascript 文章标签： javascript

于 2017-04-18 13:58:52 首次发布

本文链接：https://blog.csdn.net/wangbo54979/article/details/70227578

版权

javascript 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

本文介绍了一个H5页面的实现方案，该方案允许用户上传照片并进行压缩处理。文章详细展示了如何使用HTML5、JavaScript及Canvas API来实现图片上传、预览及压缩功能，并通过Ajax将压缩后的图片发送到服务器。

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

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>测试</title>
		<link rel="stylesheet" href="./css/index.css" />
		<link rel="stylesheet" href="./css/index_1.css" />
		<script type="text/javascript" src="script/jquery.min.js"></script>
		<script type="text/javascript" src="script/ys.js"></script>
	</head>
	<body>
		<div class="free-upload">
H5页面			<p>
				上传您的约会照片，上传图片
			</p>
			<div class="free-upload-photo">
				<span id="photo_img"></span>
				<input type="file" id="photo" onchange="start_upload(this)"/>
			</div>
		</div>
		<img src="" id="csimg" width="200" height="200"/>
	</body>
	<script>
		function start_upload(obj){
			 if(!isCanvasSupported){
			 	console.log("2222");
			 }else{
			 	compress(event, function(base64Img){
					$("#csimg").attr("src",base64Img);
					console.log(base64Img);
					// 如需保存  或 把base64转成图片  ajax提交后台处理
					// 我这里采用ajax方式 自己封装的 
					ajax('qnl_app/tes_ac_img',{'base64Img':base64Img},function(date){
						console.log(JSON.stringify(date));
					});
				});
			 }
		}
		
	</script>
</html>

以上是H5页面

下面是压缩js

//判断是否存在画布
function isCanvasSupported() {
	var elem = document.createElement('canvas');
	return !!(elem.getContext && elem.getContext('2d'));
}

//压缩方法
function compress(event, callback) {
	if ( typeof (FileReader) === 'undefined') {
		console.log("当前浏览器内核不支持base64图标压缩");
		//调用上传方式  不压缩
	} else {
		try {
			var file = event.currentTarget.files[0];
			 if(!/image\/\w+/.test(file.type)){   
        			alert("请确保文件为图像类型");  
        			return false;  
     		 } 
			var reader = new FileReader();
			reader.onload = function (e) {
			var image = $('<img/>');
			image.load(function () {
			console.log("开始压缩");
			var square = 700;
			var canvas = document.createElement('canvas');
			canvas.width = square;
			canvas.height = square;
			var context = canvas.getContext('2d');
		    context.clearRect(0, 0, square, square);
			var imageWidth;
			var imageHeight;
			var offsetX = 0;
			var offsetY = 0;
			if (this.width > this.height) {
		      imageWidth = Math.round(square * this.width / this.height);
		      imageHeight = square;
		      offsetX = - Math.round((imageWidth - square) / 2);
			} else {
		      imageHeight = Math.round(square * this.height / this.width);
		      imageWidth = square;
		      offsetY = - Math.round((imageHeight - square) / 2);
			}
			context.drawImage(this, offsetX, offsetY, imageWidth, imageHeight);
			var data = canvas.toDataURL('image/jpeg');
			 	//压缩完成执行回调
		     	callback(data);
			});
			image.attr('src', e.target.result);
			};
			reader.readAsDataURL(file);
		} catch(e) {
			console.log("压缩失败!");
			//调用上传方式  不压缩
		}
	}
}

新手大神勿喷