手机网页中通过js+html5压缩上传图片

最新推荐文章于 2020-12-23 23:59:52 发布

夜猫long

最新推荐文章于 2020-12-23 23:59:52 发布

阅读量8.7k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： jquerymobile_js_html 文章标签： canvas 图片处理

本文链接：https://blog.youkuaiyun.com/longzongqin/article/details/39554393

jquerymobile_js_html 专栏收录该内容

14 篇文章

订阅专栏

现在手机1300万像素可谓是随处可见，拍的照片也都是好几兆的，所以在上传之前我们需要进行压缩处理。简单写一下思路：
1.选择完图片通过html5的FileReader拿到base64的图片

2.创建一个Image对象，将base64图片作为Image对象的src

3.拿到Image对象的高宽，按比例计算出想要的高宽（使用image.onload解决各浏览器不兼容拿不到Image对象高宽的问题）

4.按照计算好之后高宽将图片在canvas上绘制出来

5.通过canvas的toDataURL拿到一个转换后的base64图片

6.将最终的base64图片通过ajax传到后台进行保存处理

效果图：支持图片多选（不管多大的图片想压多小就压多小）

<include file='Public:header' />
<title></title>
</head>
<body>
<div data-role="page">
<script type="text/javascript">
var imgTypeArr = new Array();
var imgArr = new Array();
var isHand = 0;//1正在处理图片
var nowImgType = "image/jpeg";
var jic = {
	    compress: function(source_img_obj,imgType){
	    	//alert("处理图片");
	    	source_img_obj.onload = function() {
	    	    var cvs = document.createElement('canvas');
	    	    //naturalWidth真实图片的宽度
	    	    console.log("原图--"+this.width+":"+this.height);
	    	  
	    	    var scale = 1;
	    	    if(this.width > 1600 || this.height > 1600){
	    	    	if(this.width > this.height){
	    	    		scale = 1600 / this.width;
	    	    	}else{
	    	    		scale = 1600 / this.height;
	    	    	}
	    	    }
	    	    cvs.width = this.width*scale;
	    	    cvs.height = this.height*scale;

	    	    var ctx=cvs.getContext("2d");
	    	    ctx.drawImage(this, 0, 0, cvs.width, cvs.height);
	    	    var newImageData = cvs.toDataURL(imgType, 0.8);
	    	    base64Img = newImageData;
	    	    imgArr.push(newImageData);

	    	   // $("#canvasDiv").append(cvs);
				var img = new Image();
				img.src = newImageData;
				$(img).css('width',100+'px');
				$(img).css('height',100+'px');
				$("#canvasDiv").append(img);
				isHand = 0;
	    	
	    	}
	    
	    }
}
	
		function handleFileSelect (evt) {
			isHand = 1;
			imgArr = [];
			imgTypeArr = [];
			$("#canvasDiv").html("");
			var files = evt.target.files;
			for (var i = 0, f; f = files[i]; i++) {
			// Only process image files.
			if (!f.type.match('image.*')) {
			continue;
			}
			 imgTypeArr.push(f.type);
			 nowImgType = f.type;
			var reader = new FileReader();
			// Read in the image file as a data URL.
			reader.readAsDataURL(f);
			// Closure to capture the file information.
			reader.onload = (function(theFile) {
				return function(e) {
					var i = new Image();
					i.src = e.target.result;
					jic.compress(i,nowImgType);
				    
				};
			})(f);
			
			}
			
			}
			 
		$(function(){
			document.getElementById('fileToUpload').addEventListener('change', handleFileSelect, false);
			
		});
	
		
		function catUpload(){
			if(base64Img == ""){
				show_msg("请选择图片！");
				return;
			}
			if(isHand == 1){
				show_msg("请等待图片处理完毕！");
				return;
			}
			$('.ui-loader').show();
			$.ajax({
				type : "POST",
				url : "__URL__/doCatUpload",
				data : {
					'img' : imgArr,
					'type' : imgTypeArr
				},
				success : function(data) {
					$('.ui-loader').hide();
					show_msg(data.info);

				}
			});
			
		}
	
		//消息提示
		function show_msg(msg){
			//消息显示时间
			var time = arguments[1] ? arguments[1] : 1500;
			$('#info_pop p').text(msg);
			$("#info_pop").popup("open");
			setTimeout('$("#info_pop").popup("close");',time);
		}
		
	</script>
	<div data-role="content">
		<table style="width: 100%;">
			<tr>
				<td>
					<input id="fileToUpload" type="file" name="fileToUpload" accept="image/*" multiple="multiple">
				</td>
				<td width="80" align="right">
					<button class="ui-btn ui-icon-add ui-corner-all"  onclick="catUpload();">压缩上传</button>
				</td>
			</tr>
		</table>

	<div id="canvasDiv">
	
	</div>

	
	</div><!-- endContent  -->



	<div data-role="popup" id="info_pop" class="ui-content" data-theme="d" style='font-weight:bold;font-size:14px; z-index: 999; background-color: white;'>
		<p>未知错误</p>
	</div>
</div>
<include file='Public:footer' />