通过js前端实现图片压缩上传

前言：在平常的业务中，有时候会遇到前端需要上传图片给后端识别，使用的第三方识别对图片大小有限制（通常，小于1M），但是，用户上传图片的时候，并没有限制，所以，需要前端对图片的大小进行判断，是否需要进行压缩上传。

一、html页面

<div class="weui-cell" style="height:100px;" id="bbrIDCardPass">
    <div class="weui-cell_hd" style="margin-left:14px;">
        <div class="update-photo" ng-click="choosePics1('#cardFront')">
            <img src="{{cardImg.front}}"/>
            <input type="file" id="cardFront" accept="image/*"/>
        </div>
    </div>
    <div class="weui-cell_bd" style="margin-left:40px;">
        <div class="update-photo" ng-click="choosePics2('#cardBack')">
            <img src="{{cardImg.back}}"/>
            <input type="file" id="cardBack" accept="image/*"/>
        </div>
    </div>
</div>

二、js部分

 $scope.choosePics1 = function (inputId) {
            // 回调函数
            //被保人身份证正面
            var fn = function (c) {
                var timestamp = (new Date()).getTime();
                //这里调用文件上传接口
                $ionicLoading.show({});
                zytHttp.post("ZYT_TB_032", {
                    fileName: $rootScope.appId + $scope.insureParams.BBRS[0].InsuredIdNo + "Z" + timestamp + ".png",//文件名上传规则：设备号+身份证号+正/反+时间戳
                    file: c,     //base64字符串
                    fileType:"IDCard",
                    IDCardFlag:"face",
                    OCROrganization: $rootScope.OCROrganization,
                    IsNeedOCR:"1",
                }, function (data) {
                    if (data.error.isSuc == '1') {
                        //请求成功
                        $ionicLoading.hide({});
                        //校验被保人填写的四项信息是否与身份证一致
                        var bbrSex = '';
                        if(data.item.sex=='男'){
                            bbrSex = '1';
                        }else if(data.item.sex=='女'){
                            bbrSex = '2';
                        }
                        if(($scope.insureParams.BBRS[0].InsuredName==data.item.name)&&
                            ($scope.insureParams.BBRS[0].InsuredSex==bbrSex)&&
                            ($scope.insureParams.BBRS[0].InsuredBirth==data.item.birth)&&
                            ($scope.insureParams.BBRS[0].InsuredIdType == '1')&&($scope.insureParams.BBRS[0].InsuredIdNo==data.item.certiCode)){
                                $scope.insureParams.BBRS[0].IDCardFont = data.item.filePath;
                                if($scope.insureParams.BBRS[0].TbrRelation == '0'){
                                    $scope.insureParams.TBR.IDCardFont = $scope.insureParams.BBRS[0].IDCardFont;
                                }
                                if ($scope.insureParams.BBRS[0].IDCardFont && $scope.insureParams.BBRS[0].IDCardReverse) {
                                    $scope.bbrIDCardPass = true;
                                } else {
                                    $scope.bbrIDCardPass = false;
                                }
                        }else{
                            alert({
                                type: 'error',
                                title: '温馨提示',
                                msg: '您上传的证件影像与被保人'+$scope.insureParams.BBRS[0].InsuredName+'的个人信息不匹配，请重新上传。'
                            });
                        }
                        $scope.$apply();
                    } else {
                        $ionicLoading.hide({});
                        $scope.bbrIDCardPass = false;
                        alert({ type: 'error', title: '错误', msg: data.error.msg, foot: '返回重试' });
                    }
                    console.log(data);
                }, function (data) {
                    $ionicLoading.hide({});
                    alert({ type: 'error', title: '错误', msg: '服务器繁忙，请稍后重试！', foot: '返回重试' });
                })
            };
            upDataPic2(inputId, fn);
        };

引用utils.js文件，对上传照片返回base64，并进行压缩

// 上传照片返回base64,针对OCR识别
var upDataPic2 = function(inputId, fn) {
    $(inputId).click();
    $(inputId).off("change");
    $(inputId).change(function() {
        var photSize = (this.files[0].size)/1024;
        if(photSize<1024){ //不压缩方法
            directTurnIntoBase64(this.files[0], function(data) {       
                var a = data.indexOf(',');
                var base64 = data.substr(a + 1);
                $(inputId).prev().attr('src', data); //显示预览图片
                fn(base64);
            }); 
        }else{  //压缩方法
            photoCompress(this.files[0], {
                quality: 0.2
            }, function(base64Codes){
                var a = base64Codes.indexOf(',');
                var base64 = base64Codes.substr(a + 1);
                $(inputId).prev().attr('src', base64Codes); //显示预览图片
                fn(base64);
            });
        }   
    });
    // 不对图片进行压缩，直接转成base64
    var directTurnIntoBase64 = function(fileObj, callback) {
            var r = new FileReader();
            // 转成base64
            r.onload = function() {
                //变成字符串
                imgBase64 = r.result;
                callback(imgBase64);
            }
            r.readAsDataURL(fileObj); //转成Base64格式
        }
};

// 对图片进行压缩
function photoCompress(file,w,objDiv){
    var ready=new FileReader();
    /*开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.*/
    ready.readAsDataURL(file);
    ready.onload=function(){
        var re=this.result;
        canvasDataURL(re,w,objDiv)
    }
}
function canvasDataURL(path, obj, callback){
    var img = new Image();
    img.src = path;
    img.onload = function(){
        var that = this;
        // 默认按比例压缩
        var w = that.width,
            h = that.height,
            scale = w / h;
        w = obj.width || w;
        h = obj.height || (w / scale);
        var quality = 0.7;  // 默认图片质量为0.7
        //生成canvas
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        // 创建属性节点
        var anw = document.createAttribute("width");
        anw.nodeValue = w;
        var anh = document.createAttribute("height");
        anh.nodeValue = h;
        canvas.setAttributeNode(anw);
        canvas.setAttributeNode(anh);
        ctx.drawImage(that, 0, 0, w, h);
        // 图像质量
        if(obj.quality && obj.quality <= 1 && obj.quality > 0){
            quality = obj.quality;
        }
        // quality值越小，所绘制出的图像越模糊
        var base64 = canvas.toDataURL('image/jpeg', quality);
        // 回调函数返回base64的值
        callback(base64);
    }
}

版权声明：本文为博主原创文章，未经博主允许不得转载 。