手机通过页面调用摄相头或选择照片压缩后并显示

来源：互联网发布：js合并单元格编辑：程序博客网时间：2024/04/28 12:07

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

通过参照别人的例子，写了一个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>

0 0