html5前端压缩图片,移动端图片压缩
H5活动已经非常受欢迎，其中一种形式是让用户上传图片参与。用户在移动端上传图片时，一般都是上传手机相册中的图片，但现在手机的拍摄质量越来越高，单张照片的大小一般在3M左右。直接上传的话，流量消耗很大，体验效果也不好。所以上传前需要本地压缩。
接下来总结在h5活动的开发中图片压缩上传的功能，并标记其中踩过的几个坑，分享给大家：
小白区必看
如果你对在移动端上传图片毫无概念，那就需要补充三个概念：FileReader、Blob和FormData。
1.FileReader
定义
使用FileReader对象，web应用程序可以异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容，并可以使用File对象或Blob对象来指定要处理的文件或数据。
方法
事件处理程序
使用
var file reader=new fileReader()；file reader . onload=function(){ var URL=this . result；}//or file reader . onload=function(e){ var URL=e . target . result；}2.Blob
BLOB(二进制大对象)，大型二进制对象，是一种可以存储二进制文件的容器。
3.FormData
使用FormData对象，您可以模拟一个包含一系列键值对的完整表单，然后使用XMLHttpRequest发送“表单”。
谈话或文章的主题
移动端图片压缩上传过程：
1)输入文件上传图片，使用FileReader读取用户上传的图片；
2)图像数据输入img对象，在画布上绘制img，然后用canvas.toDataURL压缩；
3)获取base64格式的压缩图像数据，转换成二进制，塞进formdata，最后通过xmlHttpRequest提交给formdata；
1.获取图片数据
fileEle.onchange=function() { if(！this.files.length)返回；//下面是单图var _ ua=window . navigator . user agent的情况；var _ simple file=this . files[0]；//判断是否是图片如果(！/\/(?JPEG png gif)/I . test(_ simple file . type))return；//插件exif.js获取ios图片的方位信息var _ orientationif(_ ua . index of( iphone )0){ EXIF . getdata(_ simple file，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)；上传照片(_数据，_方位)；};};_ reader . readasdataurl(_ simple file)；};2.压缩图片
/** * 计算图片的尺寸，根据尺寸压缩* 1.苹果手机手机html5上传图片方向问题，借助exif.js * 2 .安卓大学学院浏览器不支持新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(_ img width===_ goal width _ img height===_ goal height){ } else if(_ img width _ goal width _ img height _ goal height){//宽高都大于目标图，需等比压缩_ r=_ img宽度/_ goal宽度；if(_ img height/_ goal height _ r){ _ r=_ img height/_ goal height；} _ temp width=数学。ceil(_ img width/_ r)；_ temp height=数学。ceil(_ img height/_ r)；} else { if(_ img width _ goal width _ img height _ goal height){//宽高都小于_ r=_ goal width/_ img width；if(_ goal height/_ img height _ r){ _ r=_ goal height/_ img height；} }否则{ if(_ img width _ goal width){//宽小于_ r=_ goal width/_ img width；} else{ //高小于_ r=_ goal height/_ img height；} } _ temp width=数学。ceil(_ img width * _ r)；_ temp height=数学。ceil(_ img height * _ r)；} //3.利用帆布对图片进行裁剪，等比放大或缩小后进行居中裁剪var _ canvas=e . _ $ get( canvas-clip )；如果(!_canvas.getContext)返回；var _ context=_ canvas。获取上下文(“2d”)；_ canvas . width=_ temp width _ canvas . height=_ tempHeightvar _ degree//IOs bug，iphone手机上可能会遇到图片方向错误问题开关(_方向){ //iphone横屏拍摄，此时家键在左侧情况三：_ degree=180 _ temp width=-_ img width；_ temp height=-_ img height；打破；//iphone竖屏拍摄，此时家键在下方（正常拿手机的方向)案例六：_ canvas . width=_ img height _ canvas . height=_ img width _ degree=90 _ temp width=_ img width _ temp height=-_ img height；打破；//iphone竖屏拍摄，此时家键在上方案例八：_ canvas . width=_ img height _ canvas . height=_ img width _ degree=270 _ temp width=-_ img width；_ tempHeight=_ imgHeight打破；}如果(窗口。领航员。用户代理。( iphone )0的索引！_度){ _上下文。旋转(_度*数学.PI/180)；_context.drawImage(_img，0，0，_tempWidth，_ temp height)；} else { _context.drawImage(_img，0，0，_tempWidth，_ temp height)；}//今天aurl方法，可以获取格式为数据：image/png；base64，*** 的base64图片信息；var _ data=_ canvas。toda taurl( image/JPEG )；return _ data}3.上传图片
/** * 上传图片到NOS * @ param { Object } _博客一滴格式的图片* @ return { Void } */函数uploadPhoto(_data) { //4 .获取帆布中的图片信息//window.atob方法将其中的base64格式的图片转换成二进制字符串；若将转换后的值直接赋值给一滴会报错，需Uint8Array转换：最后创建一滴对象；_data=_data.split(，)[1]；_ data=窗口。atob(_ data)；//如果不用ArrayBuffer，发送给服务器的图片格式是[对象Uint8Array]，上传失败.var _ buffer=新数组缓冲区(_ data。长度)；var _ u buffer=new uint 8 array(_ buffer)；for(var I=0；我_数据。长度；I){ _ ubuffer[I]=_ data。charcode at(I)；} //安卓大学学院浏览器不支持新Blob()，使用BlobBuilder var _ blobtry { _ Blob=new Blob([_ buffer]，{ type: image/JPEG })；} catch(ee) { window .BlobBuilder=window .BlobBuilder 窗口WebKitBlobBuilder 窗口MozBlobBuilder 窗口MSBlobBuilderif(ee . name== type error 窗口. BlobBuilder){ var _ bb=new BlobBuilder()；_ bb。追加(_ buffer)；_ blob=_ bb。获取blob(“image/JPEG”)；} } var _ suffix= jpgif(_ blob。type=== image/JPEG ){ _ suffix= jpg ；} //获取不要说这个。_ _缓存. requestDWRByGet({ URL: image bean。 gentokens ，param: [_suffix，，，， 1]，onload:function(_ tokens){ _ tokens=_ tokens []；var _ token=_ tokens[0]；如果(!_token ！_token.objectName ！_ token。上传令牌){ alert(令牌获取失败！);返回false} //上传图片到NOS var _ object name=_ token。对象名称，_ upload token=_ token。上传令牌，_ bucket name=_ token。存储桶名称；var _ formData=new formData()；_formData.append(Object ，_ Object name)；_formData.append(x-nos-token ，_ upload token)；_formData.append(file ，_ blob)；var _ xhr如果（窗口XMLHttpRequest) { _xhr=新窗口XMLHttpRequest()；} else if(窗口ActiveX object){ _ xhr=new ActiveX object( Microsoft .XMLHTTP’)；} _ xhr。onreadystatechange=function(){ if(_ xhr。就绪状态===4){ if((_ xhr。status=200 _ xhr。状态300) _ xhr。status===304){ var _ imgurl= http://nos .网易。com/ _ bucket name / _ object name ？imageView ；var _ new URL=MB。x . _ $ imgResize(_ imgurl，750，750，1，true)；窗户。位置。http://www.lofter.com/act/taxiu？op=effectorigimgurl= _ newUrl } } }；_xhr.open(POST ， http://号网易。com/ _ bucket name，true)；_ xhr。send(_ formData)；}});}判断苹果手机拍摄图片方向的插件：exif
以上所述是小编给大家介绍的HTML5移动开发图片压缩上传功能，实现一个模拟后台数据登入的效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。