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


Posted in Javascript onNovember 09, 2016

H5活动已十分普遍,其中一种形式是让用户上传图片进行参与。移动端上传图片,用户一般都是上传手机相册中的图片,而现在手机的拍摄质量越来越高,一般单张照片的尺寸都在3M左右。若直接上传,十分耗流量,并且体验效果也不佳。因此需要在上传之前,先进行本地压缩。

接下来总结在h5活动的开发中图片压缩上传的功能,并标记其中踩过的几个坑,分享给大家:

小白区必看

对于移动端图片上传毫无概念的话,需要补充FileReader、Blob、FormData三个概念。

1.FileReader

定义

使用FileReader对象,web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容,可以使用File对象或者Blob对象来指定所要处理的文件或数据.

方法

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

事件处理程序

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

使用

var fileReader = new FileReader();
fileReader.onload = function() {
 var url = this.result;
}
//or
fileReader.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(),使用BlobBuilder
 var _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';
 }

 //获取NOStoken
 this.__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;
  }

  //上传图片到NOS
  var _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图片压缩上传的流程结束。

更多精彩内容请参考专题《ajax上传技术汇总》,《javascript文件上传操作汇总》和《jQuery上传操作汇总》进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
csdn 博客的css样式 v3
Feb 24 Javascript
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
Apr 01 Javascript
JavaScript面向对象之静态与非静态类
Feb 03 Javascript
Asp.net下使用Jquery Ajax传送和接收DataTable的代码
Sep 12 Javascript
javascript 数字格式化输出的实现代码
Dec 10 Javascript
Express的路由详解
Dec 10 Javascript
基于jQuery实现选取月份插件附源码下载
Dec 28 Javascript
微信小程序的日期选择器的实例详解
Sep 29 Javascript
React Native 图片查看组件的方法
Mar 01 Javascript
vue修改对象的属性值后页面不重新渲染的实例
Aug 09 Javascript
JavaScript函数apply()和call()用法与异同分析
Aug 10 Javascript
微信小程序图片右边加两行文字的代码
Apr 23 Javascript
微信小程序 网络API Websocket详解
Nov 09 #Javascript
微信小程序 网络API 上传、下载详解
Nov 09 #Javascript
微信小程序 网络API发起请求详解
Nov 09 #Javascript
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
Nov 09 #Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
Nov 09 #Javascript
微信小程序 loading 详解及实例代码
Nov 09 #Javascript
微信小程序 toast 详解及实例代码
Nov 09 #Javascript
You might like
基于Snoopy的PHP近似完美获取网站编码的代码
2011/10/23 PHP
php结合md5实现的加密解密方法
2016/01/25 PHP
PHP正则获取页面所有图片地址
2016/03/23 PHP
Thinkphp框架开发移动端接口(2)
2016/08/18 PHP
CodeIgniter整合Smarty的方法详解
2017/08/25 PHP
PHP网站常见安全漏洞,及相应防范措施总结
2021/03/01 PHP
IE6浏览器下resize事件被执行了多次解决方法
2012/12/11 Javascript
JavaScript获取和设置CheckBox状态的简单方法
2013/07/05 Javascript
利用window.name实现windowStorage代码分享
2014/01/02 Javascript
javascript动态添加、修改、删除对象的属性与方法详解
2014/01/27 Javascript
JavaScript中几种排序算法的简单实现
2015/07/29 Javascript
jquery结婚电子请柬特效源码分享
2015/08/21 Javascript
jQuery回到顶部的代码
2016/07/09 Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
2016/11/16 Javascript
jQuery树控件zTree使用方法详解(一)
2017/02/28 Javascript
javascript 日期相减-在线教程(附代码)
2017/08/17 Javascript
JS和Canvas实现图片的预览压缩和上传功能
2018/03/30 Javascript
纯js封装的ajax功能函数与用法示例
2018/05/14 Javascript
vue实现简单的星级评分组件源码
2018/11/16 Javascript
详解在create-react-app使用less与antd按需加载
2018/12/06 Javascript
js实现简单放大镜效果
2020/03/07 Javascript
实例讲解Python中的私有属性
2014/08/21 Python
python下setuptools的安装详解及No module named setuptools的解决方法
2017/07/06 Python
Python进阶之自定义对象实现切片功能
2019/01/07 Python
python网络编程 使用UDP、TCP协议收发信息详解
2019/08/29 Python
python 在右键菜单中加入复制目标文件的有效存放路径(单斜杠或者双反斜杠)
2020/04/08 Python
文化与传播毕业生求职信
2014/03/09 职场文书
大学中国梦演讲稿
2014/04/23 职场文书
关于环保的演讲稿
2014/05/10 职场文书
关于青春的演讲稿800字
2014/08/22 职场文书
承诺书模板
2014/08/30 职场文书
教代会闭幕词
2015/01/28 职场文书
走进科学观后感
2015/06/18 职场文书
Python实战之OpenCV实现猫脸检测
2021/06/26 Python
ObjectMapper 如何忽略字段大小写
2021/06/29 Java/Android
排查并解决MySQL生产库内存使用率高的报警
2022/04/11 MySQL