H5移动端图片压缩上传开发流程

H5活动已十分普遍，其中一种形式是让用户上传图片进行参与。移动端上传图片，用户一般都是上传手机相册中的图片，而现在手机的拍摄质量越来越高，一般单张照片的尺寸都在3M左右。若直接上传，十分耗流量，并且体验效果也不佳。因此需要在上传之前，先进行本地压缩。
接下来总结在h5活动的开发中图片压缩上传的功能，并标记其中踩过的几个坑，分享给大家：
小白区必看
对于移动端图片上传毫无概念的话，需要补充FileReader、Blob、FormData三个概念。
1.FileReader
定义
使用FileReader对象,web应用程序可以异步的读取存储在用户计算机上的文件（或者原始数据缓冲）内容,可以使用File对象或者Blob对象来指定所要处理的文件或数据.

方法

事件处理程序

使用

var fileReader = new FileReader（）;fileReader.onload = function（） { var url = this.result;}//orfileReader.onload = function（e） { var url = e.target.result;}

2.Blob
BLOB（binary large object），二进制大对象，是一个可以存储二进制文件的容器。

3.FormData
利用FormData对象,你可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个”表单”.

正题
移动端图片压缩上传过程：
1）input file上传图片，使用FileReader读取用户上传的图片；
2）图片数据传入img对象，将img绘制到canvas上，再使用canvas.toDataURL进行压缩；
3）获取压缩后的base64格式图片数据，转成二进制，塞入formdata，最后通过xmlHttpRequest提交formdata;
1.获取图片数据

fileEle.onchange = function（） {if （！this.files.length） return;//以下考虑的是单图情况var _ua = window.navigator.userAgent;var _simpleFile = this.files[0];//判断是否为图片if （！//（?:jpeg|png|gif）/i.test（_simpleFile.type）） return;//插件exif.js获取ios图片的方向信息var _orientation;if（_ua.indexOf（"iphone"） > 0） {EXIF.getData（_simpleFile,function（）{_orientation=EXIF.getTag（this,"Orientation"）;}）;}//1.读取文件，通过FileReader，将图片文件转化为DataURL，即data:img/png;base64，开头的url，可以直接放在image.src中;var _reader = new FileReader（）,_img = new Image（）,_url;_reader.onload = function（） {_url = this.result;_img.url = _url;_img.onload = function （） {var _data = compress（_img）;uploadPhoto（_data, _orientation）;};};_reader.readAsDataURL（_simpleFile）;};

2.压缩图片

/** * 计算图片的尺寸，根据尺寸压缩 * 1. iphone手机html5上传图片方向问题，借助exif.js * 2. 安卓UC浏览器不支持 new Blob（），使用BlobBuilder * @param {Object} _img 图片 * @param {Number} _orientation 照片信息 * @return {String} 压缩后base64格式的图片 */function compress（_img, _orientation） {//2.计算符合目标尺寸宽高值，若上传图片的宽高都大于目标图，对目标图等比压缩；如果有一边小于，对上传图片等比放大。var _goalWidth = 750, //目标宽度_goalHeight = 750, //目标高度_imgWidth = _img.naturalWidth, //图片宽度_imgHeight = _img.naturalHeight,//图片高度_tempWidth = _imgWidth,//放大或缩小后的临时宽度_tempHeight = _imgHeight, //放大或缩小后的临时宽度_r = 0;//压缩比if（_imgWidth === _goalWidth && _imgHeight === _goalHeight） {} else if（_imgWidth > _goalWidth && _imgHeight > _goalHeight） {//宽高都大于目标图，需等比压缩_r = _imgWidth / _goalWidth;if（_imgHeight / _goalHeight < _r） {_r = _imgHeight / _goalHeight;}_tempWidth = Math.ceil（_imgWidth / _r）;_tempHeight = Math.ceil（_imgHeight / _r）;} else {if（_imgWidth < _goalWidth && _imgHeight < _goalHeight） {//宽高都小于_r = _goalWidth / _imgWidth;if（_goalHeight / _imgHeight < _r） {_r = _goalHeight / _imgHeight;}} else {if（_imgWidth < _goalWidth） { //宽小于_r = _goalWidth / _imgWidth;} else{ //高小于_r = _goalHeight / _imgHeight;}}_tempWidth = Math.ceil（_imgWidth * _r）;_tempHeight = Math.ceil（_imgHeight * _r）;}//3.利用canvas对图片进行裁剪，等比放大或缩小后进行居中裁剪var _canvas = e._$get（"canvas-clip"）;if（！_canvas.getContext） return;var _context = _canvas.getContext（"2d"）;_canvas.width = _tempWidth;_canvas.height = _tempHeight;var _degree;//ios bug，iphone手机上可能会遇到图片方向错误问题switch（_orientation）{//iphone横屏拍摄，此时home键在左侧case 3:_degree=180;_tempWidth=-_imgWidth;_tempHeight=-_imgHeight;break;//iphone竖屏拍摄，此时home键在下方（正常拿手机的方向）case 6:_canvas.width=_imgHeight;_canvas.height=_imgWidth; _degree=90;_tempWidth=_imgWidth;_tempHeight=-_imgHeight;break;//iphone竖屏拍摄，此时home键在上方case 8:_canvas.width=_imgHeight;_canvas.height=_imgWidth; _degree=270;_tempWidth=-_imgWidth;_tempHeight=_imgHeight;break;}if（window.navigator.userAgent.indexOf（"iphone"） > 0 && ！！_degree） {_context.rotate（_degree*Math.PI/180）;_context.drawImage（_img, 0, 0, _tempWidth, _tempHeight）; } else {_context.drawImage（_img, 0, 0, _tempWidth, _tempHeight）;}//toDataURL方法，可以获取格式为"data:image/png;base64,***"的base64图片信息；var _data = _canvas.toDataURL（"image/jpeg"）;return _data;}

3.上传图片

/** * 上传图片到NOS * @param {Object} _blog Blob格式的图片 * @return {Void} */function uploadPhoto（_data） {//4.获取canvas中的图片信息//window.atob方法将其中的base64格式的图片转换成二进制字符串；若将转换后的值直接赋值给Blob会报错，需Uint8Array转换：最后创建Blob对象；_data = _data.split（","）[1];_data = window.atob（_data）;//如果不用ArrayBuffer,发送给服务器的图片格式是[object Uint8Array],上传失败...var _buffer = new ArrayBuffer（_data.length）;var _ubuffer = new Uint8Array（_buffer）;for （var i = 0; i < _data.length; i++） {_ubuffer[i] = _data.charCodeAt（i）;}// 安卓 UC浏览器不支持 new Blob（），使用BlobBuildervar _blob;try {_blob = new Blob（[_buffer], {type:"image/jpeg"}）;} catch（ee） {window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder || window.MSBlobBuilder;if （ee.name == "TypeError" && window.BlobBuilder） {var _bb = new BlobBuilder（）;_bb.append（_buffer）;_blob = _bb.getBlob（"image/jpeg"）;}}var _suffix = "jpg";if（_blob.type === "image/jpeg"） {_suffix = "jpg";}//获取NOStokenthis.__cache._$requestDWRByGet（{url: "ImageBean.genTokens",param: [_suffix,"","","","1"],onload: function（_tokens） {_tokens = _tokens || [];var _token = _tokens[0];if（！_token || ！_token.objectName || ！_token.uploadToken）{alert（"token获取失败！"）;return false;}//上传图片到NOSvar _objectName = _token.objectName,_uploadToken = _token.uploadToken,_bucketName = _token.bucketName;var _formData = new FormData（）;_formData.append（"Object", _objectName）;_formData.append（"x-nos-token", _uploadToken）;_formData.append（"file",_blob）;var _xhr;if （window.XMLHttpRequest） {_xhr = new window.XMLHttpRequest（）;} else if （window.ActiveXObject） {_xhr = new ActiveXObject（"Microsoft.XMLHTTP"）;}_xhr.onreadystatechange = function（） {if（_xhr.readyState === 4） {if（（_xhr.status >= 200 && _xhr.status < 300） || _xhr.status === 304） {var _imgurl = "http://nos.netease.com/" + _bucketName + "/" + _objectName + "?imageView";var _newUrl = mb.x._$imgResize（_imgurl, 750, 750, 1, true）;window.location.href = "http://www.lofter.com/act/taxiu?op=effect&originImgUrl=" + _newUrl;}}};_xhr.open（"POST", "http://nos.netease.com/" + _bucketName, true）;_xhr.send（_formData）;}}）;}

判断iphone拍摄图片方向的插件：exif
至此H5图片压缩上传的流程结束。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。