手机通过页面调用摄相头或选择照片压缩后并显示
2015-07-15 16:54
399 查看
功能：通过手机页面打开摄相头或选择相册中的照片，然后对图片进行压缩，并显示在页面上。
通过参照别人的例子，写了一个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>
通过参照别人的例子，写了一个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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Java 图片压缩实现思路及代码
- Android中3种图片压缩处理方法
- android图片压缩的3种方法实例
- java实现文件上传下载和图片压缩代码示例
- php商品图片压缩
- android图片压缩总结
- 关于网站App缩略图的一些思考
- android处理图片方法
- 在RHEL5中安装grunt-contrib-imagemin，并与J2EE集成
- Android图片压缩
- IOS开发基础之——图像压缩成指定大小（高度/宽度）
- Android 框架练成 教你打造高效的图片加载框架
- android 比较靠谱的图片压缩
- android拍照，并获取压缩后的图片。
- struts2多文件上传（修改名称、压缩图片、删除图片）
- android开发之就本地和网络图片的压缩以及缓存详解
- 网页图片压缩优化，提高网站打开速度
- 简单粗暴的图片压缩，可以压到100kb以内
- IOS 图片上传处理 图片压缩 图片处理
- ios中摄像头/相册获取图片，图片压缩，图片上传