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

如果我们不尊重权威,源码看起来也没有什么借鉴意义,如果我们完全的信服权威,那么源码中未发现的bug就天然的被忽略了

本文链接：https://blog.csdn.net/bestcxx/article/details/53780998

前言

用户把手机里的图片传递给服务器，借助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