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

忘是亡心i 2022-06-17 05:30 240阅读 0赞

<!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" οnchange="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("压缩失败!");
    			//调用上传方式  不压缩
    		}
    	}
    }

新手  大神勿喷