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

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

通过参照别人的例子，写了一个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" οnchange="handleFiles(this.files)"/>  <input type="button" id="upload" value="upload" οnclick="uploadFiles()"/>  </form><div><hr></div><div id="filecontent"></div>  <div id='imageList'></div></body>
</html>

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

Bmob+Luban（鲁班）压缩图片实现相册选择图片压缩后上传到Bmob后台Glide加载图片显示到本地
源代码已上传CSDN:https://download.csdn.net/download/qq_16519957/11068345 因为本章需要跟前面的知识结合起来看所以就做了一个前面链接方便大家查 ...
手机web页面调用打开QQ聊天功能（个人项目经验）
在实现手机web功能时候,会出现咨询页面客服的需求,此时客服使用的是QQ方式交流,就要求能够调用手机QQ的聊天功能,这个其实很简单,希望下面的分享会对各位博友有用. 在代码中添加点击事件: <a ...
【Android -- 相机】调用摄像头拍照选择照片
效果图现在很多应用中都会要求用户上传一张图片来作为头像,首先我在这接收使用相机拍照和在相册中选择图片.接下来先上效果图: 实现代码 1. 布局文件: <?xml version="1 ...
android+代码调用+相册+小米,Android调用系统相册选择图片,支持小米4云相册
用小米4调用系统相册选择照片时,如果云相册功能开启的话.云相册中的图片也会显示在选择列表中.经过测试,选择到云相册中的图片的话,uri的scheme是file,而不再试content.本文支持云相册的 ...
android 调用相册功能吗,Android调用系统相册选择图片,支持小米4云相册
用小米4调用系统相册选择照片时,如果云相册功能开启的话.云相册中的图片也会显示在选择列表中.经过测试,选择到云相册中的图片的话,uri的scheme是file,而不再试content.本文支持云相册的 ...
华为手机设置页面黑色_华为手机简单设置一下，来电直接显示对方照片视频，个性又炫酷...
阅读本文前,请您先点击上面的"蓝色字体",再点击"关注",这样您就可以继续免费收到最新文章了.每天都有分享.完全是免费订阅,请放心关注.声明:图文来源于网络,版 ...
Android--使用手机拍照获取图片路径，小米手机选择照片问题处理
Android开发选取照片问题本文主要记录使用手机自带相机拍照获取返回照片路径,以及从本地相册选取已有照片时返回Intent data; 数据处理操作.(小米手机获取照片路径与其他手机不一致问题! ...
android 解决小米手机上选择照片路径为null的问题
之前做了一个获取相册选择图片的功能,后来测试人员在小米的手机测试时出现崩溃现象.自己就在网上查找资料,发现是小米的获取图片路径的代码与其他的手机不一样,于是修改了代码,解决了这个问题,这里记录一下. ...
android如何在登录界面嵌入图片,Android内嵌H5页面调用手机图片操作
我们在APP中有一个功能是引导商家入驻我们平台,商家入驻就需要填写一些企业信息和上传营业执照或宣传照片等.为了考虑到方便及兼容性问题,我们产品就考虑用H5开发这个功能,然后内嵌到APP中,刚开始我们A ...
android小米手机上传图片,android 解决小米手机上选择照片路径为null的问题
释放双眼,带上耳机,听听看~! 之前做了一个获取相册选择图片的功能,后来测试人员在小米的手机测试时出现崩溃现象.自己就在网上查找资料,发现是小米的获取图片路径的代码与其他的手机不一样,于是修改了代码 ...

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

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

最新文章

热门文章