【ionic&AngularJS】用户头像压缩上传，按比例缩小。

整合了网上angularjs关于头像上传，图片压缩以及文件传输的功能代码。

1.摆放一个固定大小为(100,100)的头像选择框，将图片与输入框重叠，输入内容改变时调用imgChange()方法生成缩小的图片。

		<ion-item class="item-input item-stacked-label">
			<input οnchange="angular.element(this).scope().imgChange(this)" type="file" multiple accept="image/*" style="width: 100px; height: 100px; display:block; border: none;opacity: 0;position: absolute;" />
			<img id="face" ng-src="{{userInfo.headImage}}" style="width: 100px; height: 100px;">
		</ion-item>

2.将图片转换成base64字符串类型，再将图片压缩赋值给userInfo.headImage，打印原始图片的字符串长度，压缩后图片的字符串及长度。

        $scope.imgChange = function (element) {
            if (!element.files[0]) {
                console.log("未选择图片！");
                return;
            }
            $scope.$apply(function(scope) {
                var photofile = element.files[0];
                var reader = new FileReader();
                reader.onload = function(e) {
                    var prev_img = document.getElementById("face");
                    prev_img.src = e.target.result;
                    console.log(prev_img.src.length);
                    $scope.userInfo.headImage = reduceImage.compress(prev_img, 50).src;
                    console.log($scope.userInfo.headImage);
                    console.log($scope.userInfo.headImage.length);
                };
                reader.readAsDataURL(photofile);
            });
        };


        var reduceImage = {
            /**
             * Receives an Image Object (can be JPG OR PNG) and returns a new Image Object compressed
             * @param {Image} source_img_obj The source Image Object
             * @param {Integer} quality The output quality of Image Object
             * @return {Image} result_image_obj The compressed Image Object
             */
            compress: function(source_img_obj, quality, output_format){
                var mime_type = "image/jpeg";
                if(output_format!=undefined && output_format=="png"){
                    mime_type = "image/png";
                }
                var cvs = document.createElement('canvas');
                //naturalWidth真实图片的宽度
                //cvs.width = source_img_obj.naturalWidth;
                //cvs.height = source_img_obj.naturalHeight;
                var xRate = 100 / source_img_obj.naturalWidth;
                var yRate = 100 / source_img_obj.naturalHeight;
                cvs.width = 100;
                cvs.height = 100;
                var cvsContext = cvs.getContext('2d');
                cvsContext.scale(xRate, yRate);
                var ctx = cvsContext.drawImage(source_img_obj, 0, 0);
                var newImageData = cvs.toDataURL(mime_type, quality/100);
                var result_image_obj = new Image();
                result_image_obj.src = newImageData;
                return result_image_obj;
            }
        };

3.上传头像只需上传userInfo.headImage字符串的值就行了，后台将字符串存为图片格式即可。

		var face = headImage.Substring(23);
		var filepath = HttpContext.Current.Server.MapPath("");
		var index = filepath.LastIndexOf(@"\", StringComparison.Ordinal);
		filepath = filepath.Substring(0, index) + "\\upload\\images\\";
		//如果不存在就创建file文件夹
		if (Directory.Exists(filepath) == false)
		{
			Directory.CreateDirectory(filepath);
		}
		filepath += "face.png";
		try
		{
			var stream = new MemoryStream(Convert.FromBase64String(face));
			var img = new Bitmap(stream);
			img.Save(filepath, ImageFormat.Png);
		}
		catch (Exception)
		{
			filepath = "upload/images/default.png";
		}