js压缩图片（ajax、form提交）（pc、mobile测试ok）（Java）
1. 目的：
上传先进行图片压缩，然后再把压缩后的图片上传到服务器。
2. 思路：
上传前用js对图片压缩，把利用canvas生成的base64字符串，传入后台，（无所谓ajax或者form，同时也可以解决图片无刷新上传），在Java后台将获取到的base64字符串输出为图片，即可。
3. 代码：
引用mobileBUGFix.mini.js（移动端的补丁）
<!DOCTYPE><%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>上传前js压缩图片（ajax、form提交）（pc、mobile测试ok）（Java）</title></head><script type="text/javascript" src="jquery-2.1.1.min.js"></script><script type="text/javascript" src="mobileBUGFix.mini.js"></script><script type="text/javascript">var pre;//源图片名称/*** 获得base64* @param {Object} obj* @param {Number} [obj.width] 图片需要压缩的宽度，高度会跟随调整* @param {Number} [obj.quality=0.8] 压缩质量，不压缩为1* @param {Function} [obj.before(this, blob, file)] 处理前函数,this指向的是input:file* @param {Function} obj.success(obj) 处理后函数**/$.fn.localResizeIMG = function(obj) {this.on('change', function() {var file = this.files[0];pre = file.name;var URL = window.URL || window.webkitURL;var blob = URL.createObjectURL(file);// 执行前函数if ($.isFunction(obj.before)) {obj.before(this, blob, file);}_create(blob, file);this.value = ''; // 清空临时数据});/*** 生成base64* @param blob 通过file获得的二进制*/function _create(blob) {var img = new Image();img.src = blob;img.onload = function() {var that = this;//生成比例var w = that.width, h = that.height, scale = w / h;w = obj.width || w;h = w / scale;//生成canvasvar canvas = document.createElement('canvas');var ctx = canvas.getContext('2d');$(canvas).attr({width : w,height : h});ctx.drawImage(that, 0, 0, w, h);/*** 生成base64* 兼容修复移动设备需要引入mobileBUGFix.js*/var base64 = canvas.toDataURL('image/jpeg', obj.quality || 0.8);// 修复IOSif (navigator.userAgent.match(/iphone/i)) {var mpImg = new MegaPixImage(img);mpImg.render(canvas, {maxWidth : w,maxHeight : h,quality : obj.quality || 0.8});base64 = canvas.toDataURL('image/jpeg', obj.quality || 0.8);}// 修复androidif (navigator.userAgent.match(/Android/i)) {var encoder = new JPEGEncoder();base64 = encoder.encode(ctx.getImageData(0, 0, w, h),obj.quality * 100 || 80);}// 生成结果var result = {base64 : base64,clearBase64 : base64.substr(base64.indexOf(',') + 1)};// 执行后函数obj.success(result);};}};$(function() {$("input[type=file]").each(function() {var _this = $(this);_this.localResizeIMG({width : 400,quality : 0.001,success : function(result) {//获取后缀名var att = pre.substr(pre.lastIndexOf("."));//压缩后图片的base64字符串var base64_string = result.clearBase64;//图片预览var imgObj = $("#img");imgObj.attr("src", "data:image/jpeg;base64," + base64_string) .show();//拼接data字符串，传递会后台var fileData = $("#fileData");fileData.val(att + "," + imgObj.attr("src"));//此处可直接使用ajax上传，也可存于form，表单提交上传//此处例子使用ajax提交$.ajax({type : "POST",url : "<%=request.getContextPath()%>/doUploadImg",data :{imgData : fileData.val()},dataType : "json",success : function(msg){alert(msg);}});}});});});</script><body><p>上传前js压缩图片（ajax、form提交）（pc、mobile测试ok）（Java）</p>选择文件：<input id="file" class="form-control" type="file" accept="image/*" name="file1"><img id="img" name="img" width="200" height="100" style="display: none;" /><input type="text" id="fileData" name="fileData" /></body></html>
4. localResizeIMG参数：
width:缩略图宽度quality:图片质量，0—1，越大越好localResizeIMG返回值
5. localResizeIMG使用：
result.base64：带图片类型的base64编码，可直接用于img标签的src，如"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/…2wBDAAYEBQYFBAY”;result.clearBase64：不带图片类型的编码，如“/9j/4AAQSkZJRgABAQAAAQABAAD/…2wBDAAYEBQYFBAY”
$(document).ready(function(e) {$('input:file').localResizeIMG({width: 400,quality: 1,success: function (result) {var base64_string = result.clearBase64, }});});
6. 保存文件
在上面一步中，我们把base64_string 通过ajax传入到doUploadImg中，接下来我们就要在doUploadImg中接收base64参数，把它转换成img文件保存来服务器中，并给出提示。
package cn.gluepudding.test;import java.io.File;import java.io.FileInputStream;import java.io.FileOutputStream;import java.io.IOException;import java.io.InputStream;import java.io.OutputStream;import java.io.PrintWriter;import java.util.UUID;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import sun.misc.BASE64Decoder;import sun.misc.BASE64Encoder;@WebServlet("/doUploadImg")public class DoUploadImg extends HttpServlet {private static final long serialVersionUID = 1L;protected void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {PrintWriter out = response.getWriter();// 获取参数String imgData = request.getParameter("imgData");// 绝对路径String path = request.getSession().getServletContext().getRealPath("upload");File targetFile = new File(path);if (!targetFile.exists()) {targetFile.mkdirs();}// 生成新的图片名称（入库）String imgSuffix = imgData.split(",")[0];String fileName = UUID.randomUUID().toString().replaceAll("-", "") + imgSuffix;boolean flag = GenerateImage(imgData.split(",")[2], fileName, path);out.print(flag);out.flush();out.close();}protected void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {doGet(request, response);}// 将base64字符文件输出图像public static boolean GenerateImage(String imgStr, String fileName, String path) {// 对字节数组字符串进行Base64解码并生成图片if (imgStr == null) // 图像数据为空return false;BASE64Decoder decoder = new BASE64Decoder();try {// Base64解码byte[] b = decoder.decodeBuffer(imgStr);for (int i = 0; i < b.length; ++i) {if (b[i] < 0) {// 调整异常数据b[i] += 256;}}// 生成jpeg图片String imgFilePath = path + "\\" + fileName;// 新生成的图片OutputStream out = new FileOutputStream(imgFilePath);out.write(b);out.flush();out.close();return true;} catch (Exception e) {e.printStackTrace();return false;}}// 图片转化成base64字符串public static String GetImageStr() {// 将图片文件转化为字节数组字符串，并对其进行Base64编码处理String imgFile = "d://test.jpg";// 待处理的图片InputStream in = null;byte[] data = null;// 读取图片字节数组try {in = new FileInputStream(imgFile);data = new byte[in.available()];in.read(data);in.close();} catch (IOException e) {e.printStackTrace();}// 对字节数组Base64编码BASE64Encoder encoder = new BASE64Encoder();return encoder.encode(data);// 返回Base64编码过的字节数组字符串}}
7. 不足之处：
当图片宽度小于localResizeIMG设置的width参数时，图片会被拉申，从而引起图片失真（比如width高为600，图片只在400px时，压缩后的图片就变成了600px,图片尺寸变大了，会失真）。
8. Demo下载
/s/1o68area
参考资料
/manongxiaobing/p/4720568.html
/hfhwfw/article/details/5544408
