手机通过页面调用摄相头或选择照片压缩后并显示_手机页面从手机选择照片-CSDN博客

本文链接：https://blog.csdn.net/dhappy05/article/details/46895573

本文介绍了一种在手机网页中实现图片压缩并上传的方法。通过HTML5和JavaScript，用户可以选择摄像头拍摄或从相册选取图片，之后对图片进行压缩处理以减少传输的数据量。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

功能：通过手机页面打开摄相头或选择相册中的照片，然后对图片进行压缩，并显示在页面上。

通过参照别人的例子，写了一个html，在小米四的手机上测试通过。

写下该文章以做备忘。

代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5.0 Transitional//EN">  
<html>  
  <head>  
  <meta http-equiv="content-type" content="text/html; charset=utf-8">  
  <meta name="author" content="oscar999">  
  <title></title>  
  <script> 
	/**
	 * Receives an Image Object (can be JPG OR PNG) and returns a new Image Object compressed
	 * @param {Image} source_img_obj The source Image Object
	 * @param {Integer} quality The output quality of Image Object
	 * @return {Image} result_image_obj The compressed Image Object
	 */
	function compress(source_img_obj, quality, output_format){
		//alert('aa');
		 var mime_type = "image/jpeg";
		 if(output_format!=undefined && output_format=="png"){
			mime_type = "image/png";
		 }

		 var cvs = document.createElement('canvas');
		 //naturalWidth真实图片的宽度
		 cvs.width = source_img_obj.naturalWidth;
		 cvs.height = source_img_obj.naturalHeight;
		 
		 var ctx = cvs.getContext("2d").drawImage(source_img_obj, 0, 0);
		 var newImageData = cvs.toDataURL(mime_type, quality/100);
		 var result_image_obj = new Image();
		 result_image_obj.src = newImageData;
		 return result_image_obj;
	};

	function  handleFiles(files){  
		if(files.length){
			var divObj=document.createElement("div");
			divObj.contentEditable = true;//使DIV可编辑
			divObj.style.border="100px";
 
			var file = files[0];
			var imageId = file.name;
			divObj.innerHTML="<image src='' id=" + imageId + " alt='picture'><br>";
			var imageList = document.getElementById("imageList");
			imageList.appendChild(divObj);
			
			var divLine=document.createElement("div");
			divLine.innerHTML="<hr>";
			imageList.appendChild(divLine);
			
			//alert(file.name);
			var reader = new FileReader();
			reader.onload = function(){
				var i = document.getElementById(imageId);
				i.src = this.result;
				var quality = 20;
				i.src = compress(i,quality).src;
				i.width="220";
				i.height='180';
			};  
		   reader.readAsDataURL(file);
		}  
  }
  
  function uploadFiles(){
	var images = document.getElementsByTagName("img");
	var url = "你的url";
	/*if (typeof(images) == "undefined") {
		alert("please select picture");
		return;
	}*/
	var num = images.length;
	if(num < 1){
		alert("please select picture");
		return;
	}
	for(var i=0;i<num;i++){
		alert("a");
		var xhr = new XMLHttpRequest();
		var fromData = new FormData(document.getElementById('upload_form'));
		//fromData.append("base64", images[i].src);
		//xhr.open("post",url, true);
		xhr.open("POST",url);
		xhr.send(fromData);
	}	
  }
  </script>  
    
  </head>  
  <body>  
	<form id="upload_form" enctype="multipart/form-data" method="post" action="upload.php">
		<input type="file" id="file" onchange="handleFiles(this.files)"/>  
		<input type="button" id="upload" value="upload" onclick="uploadFiles()"/>  
	</form>
	<div><hr></div>
	<div id="filecontent"></div>  
  
	<div id='imageList'></div>
  </body>  
</html>