你的位置:首页 > 软件开发 > 网页设计 > 移动前端—图片压缩上传实践

移动前端—图片压缩上传实践

发布时间:2015-06-28 00:00:05
此前有同事跟我聊过关于移动端用canvas压缩图片后再上传的功能,最近有了点空闲时间,所以就实践了一下。demo效果链接在文章底部贴出。  在做移动端图片上传的时候,用户传的都是手机本地图片,而本地图片一般都相对比较大,拿iphone6来说,平时拍很多图片都是一两M的,如果直接这 ...

移动前端—图片压缩上传实践

   此前有同事跟我聊过关于移动端用canvas压缩图片后再上传的功能,最近有了点空闲时间,所以就实践了一下。demo效果链接在文章底部贴出。

  在做移动端图片上传的时候,用户传的都是手机本地图片,而本地图片一般都相对比较大,拿iphone6来说,平时拍很多图片都是一两M的,如果直接这样上传,那图片就太大了,如果用户用的是移动流量,完全把图片上传显然不是一个好办法。

  目前来说,HTML5的各种新API都在移动端的webkit上得到了较好的实现。所以直接在前端压缩图片,已经成了很多移动端图片上传的必备功能了。

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

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

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

  (3)获取到压缩后的base64格式图片数据,转成二进制塞入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 ><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);    })  };

原标题:移动前端—图片压缩上传实践

关键词:前端

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。