js压缩图片（ajax上传）
来源：互联网 发布：淘宝欢乐豆怎么刷的 编辑：程序博客网 时间：2024/05/22 14:55
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="http://www.w3.org/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; //生成canvas var 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); // 修复IOS if (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); } // 修复android if (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下载
http://pan.baidu.com/s/1o68area
参考资料
http://www.cnblogs.com/manongxiaobing/p/4720568.html
http://blog.csdn.net/hfhwfw/article/details/5544408
0 0
- js压缩图片（ajax上传）
- H5压缩图片 AJAX上传图片
- H5压缩图片 AJAX上传图片
- 上传图片前端js压缩
- JS图片压缩上传处理
- 前端压缩图片+ajax+php 异步上传
- js图片转base64编码压缩上传
- 使用JS压缩用户上传的图片
- js文件上传—图片压缩
- 使用JS压缩用户上传图片
- 使用ajax上传图片(ajaxfileupload.js)
- 图片压缩上传 上传 压缩
- js上传图片处理：压缩，旋转校正图片
- localResizeIMG先压缩后ajax无刷新上传图片
- js读取图片以及AJAX上传图片注意事项
- 前端js+后端php进行图片压缩上传（解决move_uploaded_file失败并附源码）
- Js（基于jQuey）网页端压缩图片后上传服务器
- 手机网页中通过js+html5压缩上传图片
- 解决gson实体转json时当字段值为空时，json串中就不存在该属性
- Git常用命令速查02 - 本地修改
- Android如何重新签名APK
- shell杂记
- ANR异常的产生和解决方案
- js压缩图片（ajax上传）
- 详解HTTP中的摘要认证机制
- Socket-TCP-1
- Android硬件抽象层（HAL）概要介绍和学习计划
- 帝国cms在任意位置调用指定id的栏目名称和链接
- Java JNI 简单介绍 HelloWorld
- Java 单例模式 SingletTon
- WPF 获得DataGridRow和 DataGridCell的方法
- I2C 协议
