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 相关文章推荐
splice slice区别
Oct 09 Javascript
JS 树形递归实例代码
May 18 Javascript
SeaJS入门教程系列之SeaJS介绍(一)
Mar 03 Javascript
javascript实现无限级select联动菜单
Jan 02 Javascript
JS+CSS实现可拖动的弹出提示框
Feb 16 Javascript
js数组依据下标删除元素
Apr 14 Javascript
使用JavaScript实现旋转的彩圈特效
Jun 23 Javascript
javascript中的五种基本数据类型
Aug 26 Javascript
vuex实现简易计数器
Oct 27 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
Apr 18 Javascript
解决vuejs项目里css引用背景图片不能显示的问题
Sep 13 Javascript
Ant Design Vue table中列超长显示...并加提示语的实例
Oct 31 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
模拟OICQ的实现思路和核心程序(三)
2006/10/09 PHP
php 文件下载 出现下载文件内容乱码损坏的解决方法(推荐)
2016/11/16 PHP
javascript radio 联动效果
2009/03/04 Javascript
默认让页面的第一个控件选中的javascript代码
2009/12/26 Javascript
jQuery 幻灯片插件(带缩略图功能)
2011/01/24 Javascript
js修改table中Td的值(定义td的单击事件)
2013/01/10 Javascript
javascript利用apply和arguments复用方法
2013/11/25 Javascript
基于jQuery实现的旋转彩圈实例
2015/06/26 Javascript
详解js实现线段交点的三种算法
2016/08/09 Javascript
微信小程序前端源码逻辑和工作流
2016/09/25 Javascript
vue+axios实现登录拦截的实例代码
2017/05/22 Javascript
详解利用jsx写vue组件的方法示例
2017/07/17 Javascript
JavaScript函数的特性与应用实践深入详解
2018/12/30 Javascript
VUE路由动态加载实例代码讲解
2019/08/26 Javascript
解决Vue大括号字符换行踩的坑
2020/11/09 Javascript
[05:59]带你看看DPC的台前幕后
2021/03/11 DOTA
零基础写python爬虫之打包生成exe文件
2014/11/06 Python
Python最长公共子串算法实例
2015/03/07 Python
使用Python编写一个在Linux下实现截图分享的脚本的教程
2015/04/24 Python
python 中的divmod数字处理函数浅析
2017/10/17 Python
Python实现的三层BP神经网络算法示例
2018/02/07 Python
详解Python发送email的三种方式
2018/10/18 Python
浅谈pandas用groupby后对层级索引levels的处理方法
2018/11/06 Python
使用python Telnet远程登录执行程序的方法
2019/01/26 Python
Python实现线性判别分析(LDA)的MATLAB方式
2019/12/09 Python
python中not、and和or的优先级与详细用法介绍
2020/11/03 Python
微软澳洲官方网站:Microsoft Australia
2017/01/10 全球购物
倩碧英国官网:Clinique英国
2018/08/10 全球购物
印度最好的在线药品订购网站:PharmEasy
2018/11/30 全球购物
大学生演讲稿范文
2014/01/11 职场文书
大学同学聚会邀请函
2014/01/19 职场文书
扩大国家免疫规划实施方案
2014/03/21 职场文书
以幸福为主题的活动方案
2014/08/22 职场文书
python通配符之glob模块的使用详解
2021/04/24 Python
深入探讨opencv图像矫正算法实战
2021/05/21 Python
SQL Server一个字符串拆分多行显示或者多行数据合并成一个字符串
2022/05/25 SQL Server