移动端图片上传需求
现在大家都爱玩那种叫H5游戏的玩意儿。玩儿的时候总得放点图片呗对？但是那些从手机里翻出来的图，动辄三四兆！直接发上去，那流量可不得了，还糟心。所以说，要用图片上传来着，先给它压个缩，这事儿特关键。
移动端图片压缩上传原理
搞定图片这事儿，其实不难。跟着下面几招来做就能解决啦：
1.用户通过input file选择要上传的图片文件；
2.使用FileReader读取用户选择的图片文件数据；
给图片提取出信息放在标签上，再用canvas小画板在纸上画出来！
想把大图变小吗？只需用Canvas的toDataURL压缩功能！
只需要把图压缩后转成二进制再传进 FormData 对象里就行！
有了那个叫XmlHttpRequest的小帮手，搞定我们的FormData表单就so easy！
技术要点解析
搞定HTML5移动端图片压缩上传，得注意这几点：
写入器简直是你的小助手！直接用它就可以把电脑硬盘里的文件资料挖出来！
var fileReader = new FileReader();
fileReader.onload = function() {
var url = this.result;
}
//or
fileReader.onload = function(e) {
var url = e.target.result;
}
这么说，Blob能帮你存下任何二进制文件~
FormData好使，就是把表单里的值和标签丢进那家伙，然后用XMLHttpRequest送出去，秒杀了不？
移动端图片压缩上传流程
下面我们来详细描述一下移动端图片压缩上传的具体流程：
直接让用户选图就行了，写上<input type=”file”>，然后挑你想要传的图片。
搞定图片数据：先用FileReader这个小工具把要修的图读出来，然后丢进img文件夹就全都可以了！
把你想要的那个图片直接塞到画板里面，再用canvas的toDataURL这个功能稍微压缩一下图片就搞定了。
搞定这个步骤就跟玩似的，简单说就是说你得先把文件压成base64编码，然后再变成二进制数塞到FormData里去。
小伙伴们，只需要把FormData表单扔出去，HTTP请求会搞定剩下的步骤。然后等你的图片整理好了，XMLHttpRequest会帮你把它发到服务器去！
小白区必看
别急！要是你第一次在手机上传相片，那咱们先学点基础知识！
用FileReader就能快速搞定电脑文件的读取，还不影响其他操作~
Blob：Blob就是用来装二进制文件的空间。
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);
};
所谓“挂明片大法”，其实就是利用FormData这个小助手，虚拟出完整的表单内容。然后像发快递似的，用XMLHttpRequest把这些信息传出去就行了！
移动端图片处理插件exif介绍
拍完手机照，发现大小眼咋办？不用慌，下载个exif插件看下角度就好。这样子就能调正或美化照片了哟~
总结与展望
/** * 计算图片的尺寸，根据尺寸压缩 * 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 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; }
看了这篇文章，你就能轻松搞定HTML5在手机上传图的事儿！别忘了现在大家手机拍的照片都超清的，要是上传特别大的图，你的手机应用可就得卡住了。赶快学学，让你的使用体验棒棒哒！期待这篇小文能帮到所有喜欢HTML的朋友们。
咱们来谈谈怎样用HTML5轻松搞定手机上图片压缩和上传的事儿，希望这些小技巧会帮到你们！
评论0