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 相关文章推荐
解决JS中乘法的浮点错误的方法
Jan 03 Javascript
js在指定位置增加节点函数insertBefore()用法实例
Jan 12 Javascript
深入理解JavaScript系列(33):设计模式之策略模式详解
Mar 03 Javascript
深入分析Javascript跨域问题
Apr 17 Javascript
js判断图片加载完成后获取图片实际宽高的方法
Feb 25 Javascript
canvas实现图像放大镜
Feb 06 Javascript
详谈js中window.location.search的用法和作用
Feb 13 Javascript
解析jquery easyui tree异步加载子节点问题
Mar 08 Javascript
Webpack中publicPath路径问题详解
May 03 Javascript
浅谈webpack-dev-server的配置和使用
May 17 Javascript
webuploader实现上传图片到服务器功能
Aug 16 Javascript
vue实现购物车小案例
Sep 27 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
php获取url字符串截取路径的文件名和扩展名的函数
2010/01/22 PHP
php中记录用户访问过的产品,在cookie记录产品id,id取得产品信息
2011/05/04 PHP
PHP PDOStatement:bindParam插入数据错误问题分析
2013/11/13 PHP
详解PHP的Yii框架中扩展的安装与使用
2016/04/01 PHP
PHP中类属性与类静态变量的访问方法示例
2016/07/13 PHP
php设计模式之模板模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
JS实现标签页效果(配合css)
2013/04/03 Javascript
自己用jQuery写了一个图片的马赛克消失效果
2014/05/04 Javascript
js实现鼠标滑过文字链接色彩变化的效果
2015/05/06 Javascript
javascript设置页面背景色及背景图片的方法
2015/12/29 Javascript
AngularJS之依赖注入模拟实现
2016/08/19 Javascript
pc加载更多功能和移动端下拉刷新加载数据
2016/11/07 Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
2016/12/19 Javascript
基于JavaScript实现购物车功能
2017/02/07 Javascript
Vue2.0实现组件数据的双向绑定问题
2018/03/06 Javascript
JS实现的DOM插入节点操作示例
2018/04/04 Javascript
基于vue和react的spa进行按需加载的实现方法
2018/09/29 Javascript
VSCode搭建React Native环境
2020/05/07 Javascript
Node.js API详解之 dgram模块用法实例分析
2020/06/05 Javascript
Python实现简单字典树的方法
2016/04/29 Python
Python之str操作方法(详解)
2017/06/19 Python
PyQt5打开文件对话框QFileDialog实例代码
2018/02/07 Python
Python异常处理知识点总结
2019/02/18 Python
python中matplotlib实现随鼠标滑动自动标注代码
2020/04/23 Python
使用Python判断一个文件是否被占用的方法教程
2020/12/16 Python
英国女士家居服网站:hush
2017/08/09 全球购物
销售人员个人求职信
2013/09/26 职场文书
办公室文员工作自我评价
2013/12/01 职场文书
爱护公共设施标语
2014/06/24 职场文书
幼儿园大班开学寄语
2014/08/02 职场文书
2014年街道办事处工作总结
2014/12/11 职场文书
2015年学生会工作总结范文
2015/03/31 职场文书
汽车车尾标语大全
2015/08/11 职场文书
考研经验交流会策划书
2015/11/02 职场文书
2016年感恩父亲节活动总结
2016/04/01 职场文书
windows系统搭建WEB服务器详细教程
2022/08/05 Servers