angularjs客户端实现压缩图片文件并上传实例


Posted in Javascript onJuly 06, 2015

主要是利用html5的canvas来进行图片的压缩,然后转化为dataURL,再有dataURL转化为Blob文件,Blob对象可以直接赋值给Formdata.

app.service('Util', function($q) {
  var dataURItoBlob = function(dataURI) {
    // convert base64/URLEncoded data component to raw binary data held in a string
    var byteString;
    if (dataURI.split(',')[0].indexOf('base64') >= 0)
      byteString = atob(dataURI.split(',')[1]);
    else
      byteString = unescape(dataURI.split(',')[1]);

    // separate out the mime component
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

    // write the bytes of the string to a typed array
    var ia = new Uint8Array(byteString.length);
    for (var i = 0; i < byteString.length; i++) {
      ia[i] = byteString.charCodeAt(i);
    }

    return new Blob([ia], {
      type: mimeString
    });
  };

  var resizeFile = function(file) {
    var deferred = $q.defer();
    var img = document.createElement("img");
    try {
      var reader = new FileReader();
      reader.onload = function(e) {
        img.src = e.target.result;

        //resize the image using canvas
        var canvas = document.createElement("canvas");
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0);
        var MAX_WIDTH = 800;
        var MAX_HEIGHT = 800;
        var width = img.width;
        var height = img.height;
        if (width > height) {
          if (width > MAX_WIDTH) {
            height *= MAX_WIDTH / width;
            width = MAX_WIDTH;
          }
        } else {
          if (height > MAX_HEIGHT) {
            width *= MAX_HEIGHT / height;
            height = MAX_HEIGHT;
          }
        }
        canvas.width = width;
        canvas.height = height;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, width, height);

        //change the dataUrl to blob data for uploading to server
        var dataURL = canvas.toDataURL('image/jpeg');
        var blob = dataURItoBlob(dataURL);

        deferred.resolve(blob);
      };
      reader.readAsDataURL(file);
    } catch (e) {
      deferred.resolve(e);
    }
    return deferred.promise;

  };
  return {
    resizeFile: resizeFile
  };

});

由于目前angualrjs暂不支持通过multiform data上传文件,所以利用如下的代码可以上传formdata里的文件

app.controller('CompanyCtrl', function($http, Util) {

    Util.resizeFile(input.files[0]).then(function(blob_data) {
      var fd = new FormData();
      fd.append("imageFile", blob_data);
      $http.post('http://your.domain.com/upload', fd, {
        headers: {'Content-Type': undefined },
        transformRequest: angular.identity
      })
        .success(function(data) {
          $scope.model.company_pict = data[0];
        })
        .error(function() {
          console.log("uploaded error...")
        });
    }, function(err_reason) {
      console.log(err_reason);
    });


}

Javascript 相关文章推荐
让焦点自动跳转
Jul 01 Javascript
JS效率个人经验谈(8-15更新),加入range技巧
Jan 09 Javascript
在JQuery dialog里的服务器控件 事件失效问题
Dec 08 Javascript
Javascript Objects详解
Sep 04 Javascript
jquery输入数字随机抽奖特效的简单实现代码
Jun 10 Javascript
详解原生js实现offset方法
Jun 15 Javascript
Angular4 中内置指令的基本用法
Jul 31 Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
Sep 05 Javascript
解决vue无法设置滚动位置的问题
Oct 07 Javascript
小程序文字跑马灯效果
Dec 28 Javascript
js实现unicode码字符串与utf8字节数据互转详解
Mar 21 Javascript
js判断两个数组相等的5种方法
May 06 Javascript
jQuery 遍历函数详解
Jul 05 #Javascript
php结合imgareaselect实现图片裁剪
Jul 05 #Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
Jul 05 #Javascript
jQuery插件pagewalkthrough实现引导页效果
Jul 05 #Javascript
IE浏览器下PNG相关功能
Jul 05 #Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
Jul 05 #Javascript
javascript实现控制的多级下拉菜单
Jul 05 #Javascript
You might like
Zend framework处理一个http请求的流程分析
2010/02/08 PHP
ThinkPHP 连接Oracle数据库的详细教程[全]
2012/07/16 PHP
跟我学Laravel之路由
2014/10/15 PHP
Chrome中模态对话框showModalDialog返回值问题的解决方法
2010/05/25 Javascript
js中escape对应的C#解码函数 UrlDecode
2012/12/16 Javascript
JavaScript设置body高度为浏览器高度的方法
2015/02/09 Javascript
Javascript实现可旋转的圆圈实例代码
2015/08/04 Javascript
JavaScript实现动态删除列表框值的方法
2015/08/12 Javascript
jQuery插件制作的实例教程
2016/05/16 Javascript
深入理解Ajax的get和post请求
2016/06/02 Javascript
通过sails和阿里大于实现短信验证
2017/01/04 Javascript
angular过滤器实现排序功能
2017/06/27 Javascript
vue父组件异步获取数据传给子组件的方法
2018/07/26 Javascript
vue百度地图 + 定位的详解
2019/05/13 Javascript
重学JS之显示强制类型转换详解
2019/06/30 Javascript
layui table 多行删除(id获取)的方法
2019/09/12 Javascript
浅谈VUE中演示v-for为什么要加key
2020/01/16 Javascript
vue实现简单图片上传
2020/06/30 Javascript
跟老齐学Python之复习if语句
2014/10/02 Python
Python Sleep休眠函数使用简单实例
2015/02/02 Python
Python爬虫之xlml解析库(全面了解)
2017/08/08 Python
使用python绘制二元函数图像的实例
2019/02/12 Python
Python实现动态给类和对象添加属性和方法操作示例
2020/02/29 Python
Python偏函数Partial function使用方法实例详解
2020/06/17 Python
python list等分并从等分的子集中随机选取一个数
2020/11/16 Python
Herschel美国官网:背包、手提袋及配件
2020/03/10 全球购物
委托与事件是什么关系?为什么要使用委托
2014/04/18 面试题
主管职责范文
2013/11/09 职场文书
英语道歉信范文
2014/01/09 职场文书
关于毕业的中学校园广播稿
2014/01/26 职场文书
个人自我评价范文
2014/02/05 职场文书
商场周年庆活动方案
2014/08/19 职场文书
2014年挂职干部工作总结
2014/12/06 职场文书
2015年出纳个人工作总结
2015/04/02 职场文书
2019年年中工作总结讲话稿模板
2019/03/25 职场文书
mysql备份策略的实现(全量备份+增量备份)
2021/07/07 MySQL