jquery实现图片压缩上传功能

使用说明 , 此插件默认上传的图片大于2MB会自动压缩 , 可手动设置限制大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上传图片压缩并预览</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <style>
       div#previewImg{
           background: #eeeeee;
           width: 400px;
           height: 300px;
           display: table-cell;
           vertical-align: middle;
           text-align: center;
       }
        #previewImg img{
            max-width: 100%;
            max-height: 100%;
            display: block;
        }
        #upload{
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="ImgDemoContainer">
                    <div class="form-group">
                        <input type="file" class="form-control" id="upload" name="image"/>
                    </div>
                    <div id="previewImg">
                        <img src="" id="viewImg">
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
<script>
$(function () {
    $('#upload').on('change',function () {
        var filePath = $(this).val(), //获取input的value,里面是文件的路径
            fileFormat = filePath.substring(filePath.lastIndexOf('.')).toLowerCase(),
            imgBase64 = '', //存储图片的base64
            maxSize = 2*1024*1024,  //默认是大于2MB的图片自动压缩
            fileObj = document.getElementById('upload').files[0]; //上传文件的对象,要这样写才行，用jquery写法获取不到对象
            console.log('实际图片大小'+fileObj.size);
             console.log('限制图片大小'+maxSize);
        //检查文件格式
        if(!fileFormat.match(/.png|.jpg|.jpeg|.gif/)){
            alert('文件类型错误,文件格式必须为:png/jpg/jpeg!');
            $(this).val('')
            return;
        }
        if(fileObj.size > maxSize){
            //调用函数,对图片进行压缩
            compress(fileObj,function (imgBase64) {
                imgBase64 = imgBase64;
                $('#viewImg').attr('src',imgBase64);
            })
        }else{
            directTurnIntoBase64(fileObj,function (imgBase64) {
                imgBase64 = imgBase64;
                $('#viewImg').attr('src',imgBase64);
                console.log('大小没超过2M,不同进行压缩')
            });
        }


    });

    //不对图片进行压缩
    function directTurnIntoBase64(fileObj,callback) {
        var r = new FileReader();
        //转成base64
        r.onload = function () {
            imgBase64 = r.result;
         //   console.log(imgBase64);
            callback(imgBase64)
        }
        r.readAsDataURL(fileObj);//转成base64格式
    }

    //对图片进行压缩

    function compress(fileObj,callback) {
        if(typeof (FileReader) === 'undefined'){
            console.log("当前浏览器内核不支持base64图片压缩")
            directTurnIntoBase64(fileObj,callback);
        }else{
            try{
                var reader = new FileReader();
                reader.onload = function (e) {
                    var image = $('<img/>');
                    image.load(function () {
                        var squareW = 700,//定义画布大小,也就是图片压缩之后的像素
                            squareH = 600,
                            canvas = document.createElement('canvas'),
                            context = canvas.getContext('2d'),
                            imageWidth = 0, //压缩图片大小
                            imageHeight = 0,
                            offsetX = 0,
                            offsetY = 0,
                            data = '';
                            canvas.width = squareW;
                            canvas.height = squareH;
                            context.clearRect(0,0,squareW,squareH);

                        if(this.width > squareW){
                            imageWidth = Math.round(squareW);
                            imageHeight = squareH;
                            offsetX = Math.round((imageWidth-squareW)/2);
                        }else{
                            imageHeight = Math.round(squareH);
                            imageWidth = squareW;
                            offsetY = Math.round((imageHeight - squareH)/2)
                        }
                        context.drawImage(this,offsetX,offsetY,imageWidth,imageHeight);
                        var data = canvas.toDataURL('image/jpeg')
                        callback(data)
                    });
                    image.attr('src',e.target.result)
                };
                reader.readAsDataURL(fileObj);
            }catch (e) {
                console.log('压缩失败!')
                //调用不压缩方法
                directTurnIntoBase64(fileObj,callback)
            }
        }
    }
})

</script>
</html>
最后编辑于：2019.11.16 11:04:14