移动前端图片压缩上传的实例


Posted in Javascript onDecember 06, 2017

摘要:之前在做一个小游戏平台项目,有个“用户中心”模块,就涉及到了头像上传的功能。在做移动端图片上传的时候,传的都是手机本地图片,而本地图片一般都相对比较大,拿现在的智能手机来说,平时拍很多图片都是两三兆的,如果直接这样上传,那图片就太大了,如果用户用的是移动流量,完全把图片上传显然不是一个好办法。所以上传之前进行压缩处理是必要的,在网上找了很多资料之后,尝试了很多方法,遇到了很多坑,比如安卓能够成功压缩上传图片,在ios上却上传不了,折腾了很久才发现ios的坑。一下这种已经进过实践证明是可行的,几兆的图片最后都能压缩到我们后端要求的200k以内!这么可行的方法必须给大家看看【ps:都是些东拼西凑别人的方法出来的,嘻嘻~】。

目前来说,HTML5的各种新API都在移动端的webkit上得到了较好的实现。根据查看caniuse,本demo里使用到的FileReader、Blob、Formdata对象均已在大部分移动设备浏览器中得到了实现(safari6.0+、android 3.0+),所以直接在前端压缩图片,已经成了很多移动端图片上传的必备功能了。

在移动端压缩图片并且上传主要用到filereader、canvas 以及 formdata 这三个h5的api。逻辑并不难。整个过程就是:

(1)用户使用input file上传图片的时候,用filereader读取用户上传的图片数据(base64格式)

(2)把图片数据传入img对象,然后将img绘制到canvas上,再调用canvas.toDataURL对图片进行压缩

(3)获取到压缩后的base64格式图片数据,转成二进制塞入formdata,再通过XmlHttpRequest提交formdata。

如此三步,就完成了图片的压缩和上传。

说起来好像挺简单,其实还是有些坑的。接下来就直接用代码进行分析:

【一】获取图片数据

先是获取图片数据,也就是监听input file的change事件,然后获取到上传的文件对象files,将类数组的files转成数组,然后进行forEach遍历。

接着判断文件类型,如果不是图片则不作处理。如果是图片就实例化一个filereader,以base64格式读取上传的文件数据,判断数据长度,如果大于200KB的图片就调用compress方法进行压缩,否则调用upload方法进行上传。

filechooser.onchange = function() {
 if (!this.files.length) return;
 var files = Array.prototype.slice.call(this.files);
 if (files.length > 9) {
  alert("最多同时只可上传9张图片");
  return;
 }
 files.forEach(function(file, i) {
  if (!/\/(?:jpeg|png|gif)/i.test(file.type)) return;
  var reader = new FileReader();
  var li = document.createElement("li");
  li.innerHTML = '<div class="progress"><span></span></div>';
  $(".img-list").append($(li));
  reader.onload = function() {
   var result = this.result;
   var img = new Image();
   img.src = result;
   //如果图片大小小于200kb,则直接上传
   if (result.length <= maxsize) {
    $(li).css("background-image", "url(" + result + ")");
    img = null;
    upload(result, file.type, $(li));
    return;
   }
   //图片加载完毕之后进行压缩,然后上传
   if (img.complete) {
    callback();
   } else {
    img.onload = callback;
   }
   function callback() {
    var data = compress(img);
    $(li).css("background-image", "url(" + data + ")");
    upload(data, file.type, $(li));
    img = null;
   }
  };
  reader.readAsDataURL(file);
 })
};

【2】压缩图片

上面做完图片数据的获取后,就可以做compress压缩图片的方法了。而压缩图片也并不是直接把图片绘制到canvas再调用一下toDataURL就行的。

在IOS中,canvas绘制图片是有两个限制的:

首先是图片的大小,如果图片的大小超过两百万像素,图片也是无法绘制到canvas上的,调用drawImage的时候不会报错,但是你用toDataURL获取图片数据的时候获取到的是空的图片数据。

再者就是canvas的大小有限制,如果canvas的大小大于大概五百万像素(即宽高乘积)的时候,不仅图片画不出来,其他什么东西也都是画不出来的。

应对第一种限制,处理办法就是瓦片绘制了。瓦片绘制,也就是将图片分割成多块绘制到canvas上,我代码里的做法是把图片分割成100万像素一块的大小,再绘制到canvas上。

而应对第二种限制,我的处理办法是对图片的宽高进行适当压缩,我代码里为了保险起见,设的上限是四百万像素,如果图片大于四百万像素就压缩到小于四百万像素。四百万像素的图片应该够了,算起来宽高都有2000X2000了。

如此一来就解决了IOS上的两种限制了。

除了上面所述的限制,还有两个坑,一个就是canvas的toDataURL是只能压缩jpg的,当用户上传的图片是png的话,就需要转成jpg,也就是统一用canvas.toDataURL('image/jpeg', 0.1) , 类型统一设成jpeg,而压缩比就自己控制了。

另一个就是如果是png转jpg,绘制到canvas上的时候,canvas存在透明区域的话,当转成jpg的时候透明区域会变成黑色,因为canvas的透明像素默认为rgba(0,0,0,0),所以转成jpg就变成rgba(0,0,0,1)了,也就是透明背景会变成了黑色。解决办法就是绘制之前在canvas上铺一层白色的底色。

function compress(img) {
 var initSize = img.src.length;
 var width = img.width;
 var height = img.height;
 //如果图片大于四百万像素,计算压缩比并将大小压至400万以下
 var ratio;
 if ((ratio = width * height / 4000000) > 1) {
  ratio = Math.sqrt(ratio);
  width /= ratio;
  height /= ratio;
 } else {
  ratio = 1;
 }
 canvas.width = width;
 canvas.height = height;
 //铺底色
 ctx.fillStyle = "#fff";
 ctx.fillRect(0, 0, canvas.width, canvas.height);
 //如果图片像素大于100万则使用瓦片绘制
 var count;
 if ((count = width * height / 1000000) > 1) {
  count = ~~(Math.sqrt(count) + 1); //计算要分成多少块瓦片
  //计算每块瓦片的宽和高
  var nw = ~~(width / count);
  var nh = ~~(height / count);
  tCanvas.width = nw;
  tCanvas.height = nh;
  for (var i = 0; i < count; i++) {
   for (var j = 0; j < count; j++) {
    tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh);
    ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);
   }
  }
 } else {
  ctx.drawImage(img, 0, 0, width, height);
 }
 //进行最小压缩
 var ndata = canvas.toDataURL('image/jpeg', 0.1);
 console.log('压缩前:' + initSize);
 console.log('压缩后:' + ndata.length);
 console.log('压缩率:' + ~~(100 * (initSize - ndata.length) / initSize) + "%");
 tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;
 return ndata;
}

【三】图片上传

完成图片压缩后,就可以塞进formdata里进行上传了,先将base64数据转成字符串,再实例化一个ArrayBuffer,然后将字符串以8位整型的格式传入ArrayBuffer,再通过BlobBuilder或者Blob对象,将8位整型的ArrayBuffer转成二进制对象blob,然后把blob对象append到formdata里,再通过ajax发送给后台即可。

XmlHttpRequest2中不仅可以发送大数据,还多出了比如获取发送进度的API,我代码里也进行了简单的实现。

//图片上传,将base64的图片转成二进制对象,塞进formdata上传
function upload(basestr, type, $li) {
 var text = window.atob(basestr.split(",")[1]);
 var buffer = new ArrayBuffer(text.length);
 var ubuffer = new Uint8Array(buffer);
 var pecent = 0,
  loop = null;
 for (var i = 0; i < text.length; i++) {
  ubuffer[i] = text.charCodeAt(i);
 }
 var Builder = window.WebKitBlobBuilder || window.MozBlobBuilder;
 var blob;
 if (Builder) {
  var builder = new Builder();
  builder.append(buffer);
  blob = builder.getBlob(type);
 } else {
  blob = new window.Blob([buffer], {
   type: type
  });
 }
 var xhr = new XMLHttpRequest();
 var formdata = new FormData();
 formdata.append('imagefile', blob);
 xhr.open('post', '/cupload');
 xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
   console.log('上传成功:' + xhr.responseText);
   clearInterval(loop);
   //当收到该消息时上传完毕
   $li.find(".progress span").animate({
    'width': "100%"
   }, pecent < 95 ? 200 : 0, function() {
    $(this).html("上传成功");
   });
   $(".pic-list").append('<a href="' + xhr.responseText + '">' + xhr.responseText + '<img src="' + xhr.responseText + '" /></a>')
  }
 };
 //数据发送进度,前50%展示该进度
 xhr.upload.addEventListener('progress', function(e) {
  if (loop) return;
  pecent = ~~(100 * e.loaded / e.total) / 2;
  $li.find(".progress span").css('width', pecent + "%");
  if (pecent == 50) {
   mockProgress();
  }
 }, false);
 //数据后50%用模拟进度
 function mockProgress() {
  if (loop) return;
  loop = setInterval(function() {
   pecent++;
   $li.find(".progress span").css('width', pecent + "%");
   if (pecent == 99) {
    clearInterval(loop);
   }
  }, 100)
 }
 xhr.send(formdata);
}

至此,整个上传的前端图片压缩就完成了,因为是用了formdata提交,所以后台接数据的时候就跟普通form表单提交数据一样处理即可。

以上这篇移动前端图片压缩上传的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 结合C#后台的数组对文章的关键字自动添加链接的代码
Jul 15 Javascript
javascript中encodeURI和decodeURI方法使用介绍
May 06 Javascript
浅析javascript中的DOM
Mar 01 Javascript
基于javascript实现窗口抖动效果
Jan 03 Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
May 11 Javascript
一个超简单的jQuery回调函数例子(分享)
Aug 08 Javascript
js 实现一些跨浏览器的事件方法详解及实例
Oct 27 Javascript
Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法
Oct 30 Javascript
微信小程序 scroll-view实现锚点滑动的示例
Dec 06 Javascript
基于wordpress的ajax写法详解
Jan 02 Javascript
微信小程序WebSocket实现聊天对话功能
Jul 06 Javascript
JavaScript ES2019中的8个新特性详解
Feb 20 Javascript
详细分析JS函数去抖和节流
Dec 05 #Javascript
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
Dec 05 #Javascript
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
Dec 05 #Javascript
vue+iview写个弹框的示例代码
Dec 05 #Javascript
Node.js创建Web、TCP服务器
Dec 05 #Javascript
实例讲解javascript实现异步图片上传方法
Dec 05 #Javascript
jquery如何实现点击空白处隐藏元素
Dec 05 #jQuery
You might like
Laravel多用户认证系统示例详解
2018/03/13 PHP
PHP实现微信红包金额拆分试玩的算法示例
2018/04/07 PHP
PHP join()函数用法与实例讲解
2019/03/11 PHP
JavaScript高级程序设计 事件学习笔记
2011/09/10 Javascript
使用UglifyJS合并/压缩JavaScript的方法
2012/03/07 Javascript
window.opener用法和用途实例介绍
2013/08/19 Javascript
javascript中全局对象的isNaN()方法使用介绍
2013/12/19 Javascript
禁止IE用右键的JS代码
2013/12/30 Javascript
zeroclipboard 单个复制按钮和多个复制按钮的实现方法
2014/06/14 Javascript
JavaScript移除数组内重复元素的方法
2015/03/18 Javascript
JavaScript获取网页中第一个链接ID的方法
2015/04/03 Javascript
JavaScript通过setTimeout实时显示当前时间的方法
2015/04/16 Javascript
DEDECMS如何为文章添加HOT NEW标志图片
2015/08/14 Javascript
跟我学习javascript的浮点数精度
2015/11/16 Javascript
炫酷的js手风琴效果
2016/10/13 Javascript
基于JavaScript实现图片连播和联级菜单实例代码
2017/07/28 Javascript
JS如何把字符串转换成json
2020/02/21 Javascript
微信小程序中data-key属性之数据传输(经验总结)
2020/08/22 Javascript
[03:34]2014DOTA2西雅图国际邀请赛 淘汰赛7月15日TOPPLAY
2014/07/15 DOTA
使用python在校内发人人网状态(人人网看状态)
2014/02/19 Python
Python玩转Excel的读写改实例
2019/02/22 Python
解决Django layui {{}}冲突的问题
2019/08/29 Python
30秒学会30个超实用Python代码片段【收藏版】
2019/10/15 Python
appium+python adb常用命令分享
2020/03/06 Python
如何卸载python插件
2020/07/08 Python
英国广泛的照明产品网站:Lights4living
2018/01/28 全球购物
澳大利亚最大的在线美发和美容零售商之一:My Hair Care & Beauty
2019/08/24 全球购物
加拿大品牌鞋包连锁店:Little Burgundy
2021/02/28 全球购物
华为智利官方商店:Huawei Chile
2020/05/09 全球购物
应届毕业生的自我鉴定
2013/11/13 职场文书
运动会方阵解说词
2014/02/12 职场文书
中秋节国旗下演讲稿
2014/09/13 职场文书
民警忠诚教育心得体会
2016/01/23 职场文书
校园文化艺术节开幕词
2016/03/04 职场文书
jquery插件实现搜索历史
2021/04/24 jQuery
SQL bool盲注和时间盲注详解
2022/07/23 SQL Server