在angularjs客户端压缩图片文件然后上传

主要是利用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);
        });

}

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 07-02

在angularjs客户端压缩图片文件然后上传的相关文章

HTML5实现图片文件异步上传

利用HTML5的新特点做文件异步上传非常简单方便,本文主要展示JS部分,html结构.下面的代码并未使用第三发库,如果有参照,请注意一些未展现出来的代码片段.我这边的效果预览: 1.文件未选择 2.文件已选择 HTML代码部分: 思路:下面代码中我利用css的z-index属性将input="file"标签隐藏在了id=btnSelect元素下面,通过触发a标签的点击后,弹出文件选择框.下面的masklayer用于点击确认按钮后的弹出层,避免用户重复点击确认按钮. <div id

div中粘贴图片并上传服务器 div中拖拽图片文件并上传服务器

应用简介:此文主要是描述如何在前端div中直接ctrl+v 粘贴图片,并上传到服务器,包括拖拽图片文件到div中 应用场景描述:用QQ或者其它切图软件截图,在指定的div中ctrl+v 粘贴并显示,点击上传按钮,图片上传到服务器.类似实现了此功能的网站有 知乎,强力建议博客园实现此功能,                     写博客时插入图片方便的多. 适用环境:本代码目前适用谷歌浏览器,其它浏览器需要稍微改良一下即可,问题不大. 开发环境:vs2015 mvc 不说废话了,开始吧: 1:首先

ssh整合问题总结--在添加商品模块实现图片(文件)的上传

今天在做毕设(基于SSH的网上商城项目)中碰到了一个文件上传的需求,就是在后台管理员的商品模块中,有一个添加商品,需要将磁盘上的图片上传到tomcat保存图片的指定目录中: 完成这个功能需要两个步,第一是图片上传,第二是保存到数据库,在完成这个功能时候碰到了一些小问题,所以把完整的步骤记录一下: 第一步,在form标签下,添加一个属性,enctype="multipart/form-data",  我刚开始脑袋短路将这个属性写到了type为file的那么input标签下,结果死活提交不

文件分块上传客户端实现

首先对文件按内容分块(有块大小的约束),然后对于每个chunk构造单独的一个UDP 数据报进行传输,在应用层的开始是自定义的包头,有块号,块长度,块指纹等元数据信息,这些信息便于接收端能够按序正确接收. /*--vonzhou ---this project is to upload file after chunking using rabin fingerprint, here use UDP so that every packet nodelay. but we need to ensu

SSH深度历险记(九) Struts2+DWZ+Uploadify多文件(文件和图片等。)上传

在gxpt_uas系统,为了实现文件(文件和图片等.,灵活配置)批量上传到mongodb,在学习的过程中,知道mongodb,功能,实现思路:在DWZ的基础上參考官方的实例结合现有的GXPT来实现,期间看了非常多的博客,对于这些框架来说,基本的学习还是应该以文档指导为主,多看官方的手冊(即便来说文档非常少),多查资料.总的来看.能够说这是DWZ集成过来的插件,主要是js来实现,逐步的体会到了JS厉害,我们对于这些前端框架的学习都是一个道理的(easyui.DWZ.ExtJs等等),仅仅要我们有个

plupload 大文件分片上传与PHP分片合并探索

最近老大分给我了做一个电影cms系统,其中涉及到一个功能,使用七牛云的文件上传功能.七牛javascript skd,使用起来很方便,屏蔽了许多的技术细节.如果只满足与调用sdk,那么可能工作中也就没有什么收获了.其中对七牛云的服务很佩服的一点是,无论我上传多大的文件,当我文件最后一片上传完成的时候,就立刻返回到文件链接,这个问题我想了好久,也不知道七牛是如何做到的. 七牛云的sdk分为 JavaScript 与 PHP端. JavaScript端的作用是提供文件上传功能,客户端(浏览器)无需关

UEditor+七牛,实现图片直连上传

最近做的项目,涉及到使用富文本编辑器,我选择了百度的UEditor.同时,我们的图片放在七牛云存储上.关于这两者间的集成,我写下一些个人的经验,与大家分享. 图片上传方案 目前来说,Web端基于七牛等云存储的图片上传方式分为以下两种: 1. 上传图片至服务端,再将数据转发至七牛. 通过服务端接受用户上传的内容,同时可以对内容进行有效性审核,拒绝不合规范的内容,然后从服务端将内容上传至七牛. 这种方法可以有效控制并记录用户提交的内容,但同时也增加了服务器的运行压力. 2. 直接上传图片至七牛,然后

html5+php实现文件拖动上传功能

界面样式我是参考了一个国外的相册网站,改动不大,只是把鸟语转换成中文,以及上传时的样式也进行了改动,之所以选这个的原因就是,我很容易做扩展,它支持3种方式添加图片,一种拖拽上传,一种常规的选择文件上传,另外的就是添加网络图片.它很巧妙的把三种上传模式整合到了一起,而且你可以用IE浏览器浏览下,如果不支持HTML5,是没有拖拽上传图片的提示的,如图: 拖拽上传最重要的就是js部分的代码,它实现了70%的功能,另外30%仅仅是把图片信息提交到后台,然后做对应的处理,比如压缩啊,裁剪啊云云.所以先来看

SpringMVC实现文件的上传和下载

前些天一位江苏经贸的学弟跟我留言问了我这样一个问题:"用什么技术来实现一般网页上文件的上传和下载?是框架还是Java中的IO流".我回复他说:"使用SpringMVC框架可以做到这一点,因为SpringMVC为文件的上传提供了直接的支持,但需要依赖Apache提供Commons FileUpload组件jar包."鉴于这个问题,我上网也百度了一下,网上很多都是介绍的使用IO流来实现文件的上传和下载,也有说到框架的,但介绍的并不是很完整,今天小钱将和大家介绍使用Spr