前台图片Canvas压缩上传小结

需求来源：之前有个提交审核表单的业务，表单中含有大量附件图片，大约有20多张吧，为了省事，采用的同步上传，一次需要上传很多照片，本来单张图片限制为200KB，这样子总图片大小约为5MB左右，想想也可以接收。业务上线后，得知用户大部分都是中老年人居多，手机拍照的图片很大，不会压缩。放开图片尺寸上传限制后，上传数据太大，体验很不好，就有了前台图片压缩的需求。

业务实现要点：

1、上传的图片使用canvas压缩图片，并导出base64字符串数据；

2、每一类型附件可以传多张图片，这些图片的base64数据存放到hashmap集合中，key值为file的id；

3、后台将接收到图片的base64字符串转存为图片格式。

核心业务代码如下：

-- 前台图片压缩保存

/**

 * 存储图片数据

 * @param _this

 * @param picType

 */

function picStrore(_this,picType) {

    var obj = $(_this);

    var id = obj.attr('id');// 元素id

    // $("#fw_pic_1")[0].files[0]  是否包含文件

    var file = $("#"+id)[0].files[0];

    if(file){ // 有图片

        imgeToBase64_save(file,id,picType); // 保存数据到hashmap

    }else{ // 无图片

        removeImgdata(id,picType); // 从hashmap中移除数据

    }

}

/**

 * 将图片转成base64字符串存储hashmap中

 * @param file  文件对象

 * @param fileId 元素id

 * @param picType 文件类型

 * @returns {boolean}

 */

function imgeToBase64_save(file,fileId,picType) {

    if (!/image\/\w+/.test(file.type)) {

        return false;

    }

    var reader = new FileReader();

    reader.readAsDataURL(file);

    reader.onload = function (e) {

        var img = new Image,

            width = 640,quality = 0.8,canvas = document.createElement("canvas"),drawer = canvas.getContext("2d");

        img.src = this.result;

        img.onload = function () {

            // 计算绘图尺寸（重构的图片尺寸宽度显示最大为640，图片质量设置为0.8）

            if (img.height > img.width) {

                if (img.width < width) {

                    canvas.width = img.width;

                    canvas.height = img.height;

                } else {

                    canvas.width = width;

                    canvas.height = width * (img.height / img.width);

                }

            } else {

                if (img.height < width) {

                    canvas.width = img.width;

                    canvas.height = img.height;

                } else {

                    canvas.height = width;

                    canvas.width = width * (img.width / img.height);

                }

            }

            drawer.drawImage(img, 0, 0, canvas.width, canvas.height);

            var tmpsrc = canvas.toDataURL("image/jpeg", quality);

            var imgbase64 = tmpsrc.substr(23); // base64字符串

            // 保存base64数据到hashmap

            if('fw_pic'== picType){ // 房屋所有权证

                fw_pic_map.put(fileId,imgbase64);

            }else if('td_pic'== picType){ // 国有土地使用权证

                td_pic_map.put(fileId,imgbase64);

            }else if('bdc_pic'== picType){ // 不动产权证

                bdc_pic_map.put(fileId,imgbase64);

            }else if('syf_pic'== picType){ // 住房买卖合同

                syf_pic_map.put(fileId,imgbase64);

            }else if('fp_pic'== picType){ // 购房发票

                fp_pic_map.put(fileId,imgbase64);

            }else if('sfz_pic'== picType){ // 身份证

                sfz_pic_map.put(fileId,imgbase64);

            }else if('zl_pic'== picType){ // 户口簿资料页

                zl_pic_map.put(fileId,imgbase64);

            }else if('gzs_pic'== picType){ // 委托书/公证书/通知书

                gzs_pic_map.put(fileId,imgbase64);

            }else if('other_pic'== picType){ // 其他材料

                other_pic_map.put(fileId,imgbase64);

            }

        }

    }

}

/**

 * 从hashmap中移除数据

 * @param fileId

 * @param picType

 */

function removeImgdata(fileId,picType) {

    if('fw_pic'== picType){ // 房屋所有权证

        fw_pic_map.remove(fileId);

    }else if('td_pic'== picType){ // 国有土地使用权证

        td_pic_map.remove(fileId);

    }else if('bdc_pic'== picType){ // 不动产权证

        bdc_pic_map.remove(fileId);

    }else if('syf_pic'== picType){ // 住房买卖合同

        syf_pic_map.remove(fileId);

    }else if('fp_pic'== picType){ // 购房发票

        fp_pic_map.remove(fileId);

    }else if('sfz_pic'== picType){ // 身份证

        sfz_pic_map.remove(fileId);

    }else if('zl_pic'== picType){ // 户口簿资料页

        zl_pic_map.remove(fileId);

    }else if('gzs_pic'== picType){ // 委托书/公证书/通知书

        gzs_pic_map.remove(fileId);

    }else if('other_pic'== picType){ // 其他材料

        other_pic_map.remove(fileId);

    }

}

-- 后台图片保存

	/**

	 * 保存BASE64图片数据

	 * @param imgStr 图片base64数据

	 * @param savePath 图片保存路径

	 */

	public static void saveBase64Img(String imgStr,String savePath) {

		if (imgStr == null) //图像数据为空

			return;

		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图片

			OutputStream out = new FileOutputStream(savePath);

			out.write(b);

			out.flush();

			out.close();

		} catch (Exception e) {

			e.printStackTrace();

		}

	}

压缩效果：压缩后的图片附件总大小控制在1MB左右。

注：canvas的大小有限制，如果canvas的大小大于大概五百万像素（即宽高乘积）的时候，不仅图片画不出来，其他什么东西也都是画不出来的。

坑：前台上传使用ajax提交请求，但是必须保证enctype = "multipart/form-data",否则post的数据长度会超出限制，使用FormData对象提交请求，具体代码如下：

    var formData = new FormData();

    formData.append('buyerone',$("#buyerone").val());

    formData.append('buyerone_no',$("#buyerone_no").val());

    formData.append('buyerone_phone',$("#buyerone_phone").val());

    formData.append('buyertwo',$("#buyertwo").val());

    formData.append('buyertwo_no',$("#buyertwo_no").val());

    formData.append('buyertwo_phone',$("#buyertwo_phone").val());

    formData.append('buyerthree',$("#buyerthree").val());

    formData.append('buyerthree_no',$("#buyerthree_no").val());

    formData.append('buyerthree_phone',$("#buyerthree_phone").val());

    formData.append('handler',$("#handler").val());

    formData.append('handler_no',$("#handler_no").val());

    formData.append('handler_phone',$("#handler_phone").val());

    formData.append('remark',$("#remark").val());

    formData.append('house_site',$("#house_site").val());

    formData.append('house_area',$("#house_area").val());

    formData.append('loft_area',$("#loft_area").val());

    formData.append('sign_date',$("#sign_date").val());

    formData.append('ownership_no',$("#ownership_no").val());

    formData.append('landuse_no',$("#landuse_no").val());

    formData.append('immovable_no',$("#immovable_no").val());

    formData.append('apply_type',$("input[name='apply_type']:checked").val());

    formData.append('buy_total',$("#buy_total").val());

    formData.append('house_price_v',$("#house_price_v").val());

    formData.append('loft_price_v',$("#loft_price_v").val());

    formData.append('estimate_total_v',$("#estimate_total_v").val());

    formData.append('pay_price_v',$("#pay_price_v").val());

    formData.append('fw_pic',fw_pic);

    formData.append('td_pic',td_pic);

    formData.append('bdc_pic',bdc_pic);

    formData.append('syf_pic',syf_pic);

    formData.append('fp_pic',fp_pic);

    formData.append('sfz_pic',sfz_pic);

    formData.append('zl_pic',zl_pic);

    formData.append('gzs_pic',gzs_pic);

    formData.append('other_pic',other_pic);

    $.ajax({

        url: http_url+"/api/upfile/houseApplyUpload2",

        type: "POST",

        cache: false,

        data: formData,

        processData: false,

        contentType: false,

        dataType: "json",

        success: function(res){

            var resobj = res;

            if(resobj.code=="4901"){ // 上传文件超限

                window.parent.layer.alert("上传文件大小超出限制", {icon: 0});

            }else if(resobj.code=="0000"){

                var data = resobj.data;

                var isSuccess = data.isSuccess;

                var msg = data.msg;

                if(isSuccess==0){ //成功

                    window.location.href="houseApplyOk.shtml";

                }else if(isSuccess==1){// 失败

                    window.parent.layer.alert(msg, {icon: 0});

                }else{ // 异常

                    window.parent.layer.alert("申请审核表提交失败", {icon: 0});

                }

            }

            window.parent.layer.close(ha_index);// 清除加载

        },

        error:function(res) {

            window.parent.layer.close(ha_index);// 清除加载

        }

    });

巴特西

前台图片Canvas压缩上传小结

最新文章

热门文章