js压缩图片（ajax上传）

最新推荐文章于 2025-05-27 11:56:37 发布

原创

最新推荐文章于 2025-05-27 11:56:37 发布 · 8.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#js压缩图片 #ajax图片上传

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);
            thi