您的位置：首页 > 移动开发 > IOS开发

安卓、IOS-web调用摄像头/本地文件夹以base64压缩图片传递给服务器并还原为图片

2016-12-21 12:29 661 查看

前言

用户把手机里的图片传递给服务器，借助localResizeIMG.js可以将图片转化为base64格式，也可以生成缩略图

这样的好处是，极大的缩小了图片的大小，原本2-3M的图片传递到服务器只有十几到几十KB，即提高了图片传输速率，也为用户节约了流量

而在图片质量上几乎没有损耗，或者说质量是可控的。

兼容安卓和IOS，可以从手机的文件夹选取图片，也可以直接调取手机的摄像头，支持一般的手机浏览器也支持微信。

开始实施

1、js文件的准备

需要三个js文件

jquery.min.js

localResizeIMG.js

mobileBUGFix.mini.js （在IDE中该文件报错，但是不影响使用。原因是有关键字const，可以修改为var不报错，也可以不修改。）

下载地址

http://download.csdn.net/detail/bestcxx/9717224

2、jsp页面

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>上传文件</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

</head>

<body>
<input type="file"  accept="image/*">
<form action="<%=path %>/photoUp/receivePhoto.action" method="post">
<input type="hidden" name="pictureBase64" id="pictureBase64">
<br />
<input type="submit"  id="toUp" value="正在上传">
</form>

<script src="./photoUp/js/jquery.min.js" type="text/javascript"></script>
<script src="./photoUp/js/localResizeIMG.js" type="text/javascript"></script>
<!-- mobileBUGFix.js 兼容修复移动设备 -->
<script src="./photoUp/js/mobileBUGFix.mini.js" type="text/javascript"></script>
<script type="text/javascript">
$('input:file').localResizeIMG({
width: 700,//设置文件的宽度
quality: 0.8,//设置文件的高度
success: function (result) {
var img = new Image();
img.src = result.base64;
img.height=80;//设置缩略图高度
img.width=100;//设置缩略图宽度

$('body').append(img);//缩略图显示在页面
console.log(result);
$("#pictureBase64").val(result.clearBase64);
$("#toUp").val("提交");//修改页面提交按钮为可提交状态
}
});
</script>
</body>
</html>

3、后台java

package com.demo.photo;

import java.io.DataOutputStream;
import java.io.FileOutputStream;
import java.io.IOException;

import sun.misc.BASE64Decoder;

import com.opensymphony.xwork2.ActionSupport;

@SuppressWarnings("serial")
public class PhotoUp extends ActionSupport{
private String pictureBase64;

/*
* 跳转到上传图片页面
*/
public String toReceivePhoto(){
return SUCCESS;
}

/**
* 处理前台的base64编码，转化为图片保存到指定路径
* @return
* @throws IOException
*/
public String receivePhoto() throws IOException{

BASE64Decoder decoder = new BASE64Decoder();

// Base64解码
byte[] b = decoder.decodeBuffer(pictureBase64);// 增加一个判空
for (int i = 0; i < b.length; ++i) {
if (b[i] < 0) {// 调整异常数据
b[i] += 256;
}
}

String localPath = "d://a//";//生成jpeg图片的保存路径

String fileName="testPhotoUp.jpeg";//图片名称

DataOutputStream ous = new DataOutputStream(new FileOutputStream(localPath+fileName));//把文件保存到指定路径
ous.write(b);
ous.flush();
ous.close();

return "success";
}

public String getPictureBase64() {
return pictureBase64;
}

public void setPictureBase64(String pictureBase64) {
this.pictureBase64 = pictureBase64;
}

}

4、xml配置文件

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.1.7//EN"
"http://struts.apache.org/dtds/struts-2.1.7.dtd">
<struts>
<!--struts-default-->

<package name="phptoUp" extends="struts-default" namespace="/photoUp">

<!-- http://localhost:8080/struts2go/photoUp/toReceivePhoto.action -->
<action name="toReceivePhoto" class="com.demo.photo.PhotoUp" method="toReceivePhoto">
<result name="success">/photoUp/toPhotoUp.jsp</result>
</action>

<action name="receivePhoto" class="com.demo.photo.PhotoUp" method="receivePhoto">
<result name="success">/photoUp/photoUp.jsp</result>
<result name="error">/photoUp/toPhotoUp.jsp</result>
</action>
</package>
</struts>

原创声明：本文原创链接http://blog.csdn.net/bestcxx/article/details/53780998

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 手机 base64 照片上传微信

相关文章推荐

新的分享

章节导航