js压缩图片（ajax上传）

最新推荐文章于 2023-08-07 17:02:49 发布

不可爱的彭可爱

最新推荐文章于 2023-08-07 17:02:49 发布

阅读量8.5k

点赞数

分类专栏： jquery 文章标签： js压缩图片 ajax图片上传

本文链接：https://blog.csdn.net/PL_12345_/article/details/49509561

版权

jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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
点赞
踩
2

收藏

觉得还不错? 一键收藏
3
评论
js压缩图片（ajax上传）

1. 目的：上传先进行图片压缩，然后再把压缩后的图片上传到服务器。2. 思路：上传前用js对图片压缩，把利用canvas生成的base64字符串，传入后台，（无所谓ajax或者form，同时也可以解决图片无刷新上传），在Java后台将获取到的base64字符串输出为图片，即可。3. 代码：引用mobileBUGFix.mini.js（移动端的补丁） <!DOCTYPE><%@ page la
复制链接

扫一扫