移动端图片上传需求
每次传手机相片都费劲得很，照片大得一张得占手机内存3M多，这不光让电脑跑得慢，咱心里也挺烦的不是？所以传之前得先把照片给缩小点儿。今天我就来手把手教你们怎么用HTML5搞出压缩和上传图的功能。这个小绝招帮你轻松搞定手机传图难题！
H5活动中的图片上传
嘿~HTML5活动挺火爆，大家都在分享自己的精彩瞬间！但你们知道不，用手机参与，大部分人都是直接将手机里的照片上传的。因为现在手机相机功能太强了，拍出来的照片质量棒棒哒，所以文件也比较大，上传和查看起来可能会有些麻烦。所以，搞HTML5活动得考虑到缩图这个问题才行，别让用户觉得麻烦！
移动端图片压缩原因
为啥要把手机传的图压小呀？理由大概有以下几点，首先，咱们在外面上网时，传大图特别费钱呢；再说了，催人嫌的大图发起来还慢吞吞的，谁都想快点收到对不对；最后，有些网站或者APP可能限制文件大小，一旦上传超过限制，可就上传不了。于是，传照片到手机上最好还是先压缩一下！
FileReader、Blob、FormData概念补充
聊到传图这个事儿，记得搞定三件事就能轻松办到了：首先是FileReader，它就是你的眼睛，能让你看清电脑里的图；然后是Blob，它像个大布袋子，可以装得下整张图片哦；最后是FormData，它像个邮差，带着刚才那俩家伙传过去。这下，压缩上传图片就没那么难！
移动端图片压缩过程
实现移动端图片压缩上传功能主要包括以下几个步骤：
1.用户通过input file选择要上传的图片文件；
2.使用FileReader读取用户选择的图片数据；
把读到的数据放到img里，然后画在canvas上。
var fileReader = new FileReader();
fileReader.onload = function() {
var url = this.result;
}
//or
fileReader.onload = function(e) {
var url = e.target.result;
}
Canvas的”toDataURL”功能，可以帮我们把画好的图片先”瘦身”保存起来！
快点把那个base64压缩过的图转成二进制data哈。
6.将二进制数据添加到FormData对象中；
其实就是通过 XMLHttpRequest 把数据给 FormData 传递过去。
踩过的几个坑
搞懂图片压缩上传这事儿，真心不简单，要小心别掉坑里喽！
小提醒：用手机拍的照片上可能会有EXIF方向的标记。处理这类图片时要多留心！
选压缩法子：不同的压缩法子处理不一样的图，得看情况来挑；
兼容性问题大，html5在各种浏览器里显示都可能有所不同！
小白区必看
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);
};
萌新们，首次接触移动设备开发是不是觉得“移动端图片处理”有点摸不着头脑呀?别急，下面我就简单讲讲FileReader、Blob和FormData这3个词，学完之后，你们绝对能在HTML5手机开发上如鱼得水！
总结与展望
今天咱们就来说说怎么用HTML5解决移动开发里上传图片的压缩问题，还会分享一些我实际操作中的遭遇和解决方法。你知道吗？现在手机上的App数量多到数不清了，提升用户满意度和省点流量才是重点！相信读完这篇文章，你一定能更轻松地运用HTML5开发移动应用了。
/**
* 计算图片的尺寸，根据尺寸压缩
* 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;
}
。
评论0