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

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

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

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";}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！