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

àì夳堔傛蜴生んèń 2022-07-13 02:43 82阅读 0赞

## 前言 ##

用户把手机里的图片传递给服务器，借助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][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>
    		
    		<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>
    		
    		               
    		<package name="phptoUp" extends="struts-default" namespace="/photoUp">
    		
    		
    			<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

[http_download.csdn.net_detail_bestcxx_9717224]: http://download.csdn.net/detail/bestcxx/9717224