1500字范文 > 前台图片Canvas压缩上传小结

前台图片Canvas压缩上传小结

时间：2018-11-01 07:43:42

相关推荐

前台图片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数据到hashmapif('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对象提交请求，具体代码如下：

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。