web app上传图片

以前，web app上传图片需要通过cordova插件

 后来一个html标签就可以了

<input type="file" class="upload" capture="camera"  accept="image/*" onchange="angular.element(this).scope().uploadhead(this)" />

 js里的代码：

        $scope.uploadhead = function(file) {
            fileSelected(file);
        }

        function fileSelected(obj) {
            if (obj) {
                var file = obj.files[0];
                if (ImgCompress.checkType(file)) {
                    ImgCompress.getBase64(file, obj, getBase);
                }
            }
        }

        function getBase(data) {
            $("#myavatar").attr("src", data);
        }

        var ImgCompress = {

            checkType: function(file) {
                if (!file.type.match('image.*')) {
                    return false;
                } else {
                    return true;
                }
            },

            getBase64: function(file, obj, callBack) {
                var _this = this;
                _this.readFile(file, obj, callBack);
            },

            readFile: function(file, obj, callBack) {
                var _this = this;
                //读取文件
                if (window.FileReader) {
                    var fr = new FileReader();
                    fr.onloadend = function(e) {
                        //显示图片
                        var src = e.target.result;

                        //压缩图片获取base64编码
                        _this.compress(src, callBack);

                    };
                    fr.readAsDataURL(file);
                } else {
                    alert("请使用高版本浏览器！");
                }
            },

            compress: function(src, callBack) {
                var _this = this;
                var img = new Image();
                img.src = src;
                img.onload = function() {
                    //生成比例
                    var width = img.naturalWidth,
                        height = img.naturalHeight,
                        scale = width / height;
                    width = parseInt(750);
                    height = parseInt(width / scale);

                    //生成canvas
                    var $canvas = document.createElement("canvas");
                    var ctx = $canvas.getContext('2d');
                    $canvas.width = width;
                    $canvas.height = height;

                    //压缩
                    ctx.drawImage(img, 0, 0, width, height);
　　　　　　　　　　　　//这里转成jpeg，也可以不转
                    callBack($canvas.toDataURL('image/jpeg', 0.5));
                }
            }
        };