hbuilder上传图片(带旋转)

版权声明：本文为博主原创文章，需要转载尽管转载。 https://blog.csdn.net/z5976749/article/details/50907311

IOS弹出选择框：代码放在onclick中（mui）环境

function change() {
	if (mui.os.plus) {
		var a = [{
			title: "拍照"
		}, {
			title: "相册选取"
		}];
		plus.nativeUI.actionSheet({
			cancel: "取消",
			buttons: a
		}, function(b) {
			switch (b.index) {
				case 0:
					break;
				case 1:
					getImage(); //调用摄像头
					break;
				case 2:
					galleryImg();
					break;
				default:
					break
			}
		})
	}
}

获取拍照图片：

function getImage() {
			var cmr = plus.camera.getCamera();
			cmr.captureImage(function(p) {
					plus.io.resolveLocalFileSystemURL(p, function(entry) {
							var path = entry.toLocalURL();
							$('#images').prepend('<div class="add-tp" id="dd' + picIndex + '">' +
								'<img src="' + path + '">' +
								'<div><img id="d' + picIndex + '" onclick=DelPic("d' + picIndex + '") src="../images/close.png" /></div>' +
								'</div>');
							picIndex += 1;
							appendFile(path); //处理图片的地方
							setTimeout("upload(1)", 1000);
						},
						function(e) {
							alert("读取拍照文件错误：" + e.message);
						});
				},
				function(e) {
					//					alert("失败：" + e.message);
				}, {
					filename: "_doc/camera/",
					index: 1
				});
		}

var path = entry.toLocalURL(); //把拍照路径转成本地路径

prepend部分可以不用看，这是我添加前台html的地方，根据各自的要求添加

picIndex是给每个div分配id

相册中读取：

		function galleryImg() {
			plus.gallery.pick(function(path) {
				$('#images').prepend('<div class="add-tp"  id="dd' + picIndex + '">' +
					'<img src="' + path + '" >' +
					'<div><img id="d' + picIndex + '" onclick=DelPic("d' + picIndex + '") src="../images/close.png" /></div>' +
					'</div>');
				picIndex += 1;
				appendFile(path); //处理图片的地方
				setTimeout("upload(2)", 1000);
			}, function(e) {
				console.log("取消选择图片");
			}, {
				filter: "none",
				system: false
			});
		}

pick方法就是选取图片了，path是本地路径

这里settimeout是因为立马执行有时会有BUG，求高手解答。

处理图片的地方：appendFile方法

function appendFile(path) {
			var img = new Image();
			img.src = path; // 传过来的图片路径在这里用。
			img.onload = function() {
				var that = this;
				//生成比例 
				var w = that.width,
					h = that.height,
					scale = w / h;
				w = 480 || w; //480  你想压缩到多大，改这里
				h = w / scale;
				//生成canvas
				var canvas = document.createElement('canvas');
				var ctx = canvas.getContext('2d');
				$(canvas).attr({
					width: w,
					height: h
				});
				ctx.drawImage(that, 0, 0, w, h);
				var base64 = canvas.toDataURL('image/jpeg', 1 || 1); //1最清晰，越低越模糊。
				f1 = base64;
			}
		}

w h可以自己设置，根据这种比例压缩的。

在外部定义：var f1 = null;

这里是把图片转成base64类型传入后台。

upload上传到服务器：

function upload(index) {
			var url = 'http://www./Service/ConsultationManager.ashx?action=getImage';
			var dataType = 'json';
			//发送数据  
			var data = {
				files1: f1, //base64数据
				index: index
			};
			$.post(url, data, success, dataType);
			console.log('photo finish');
		}

这里的f1是作为字符串传到后台的。index是为了分辨拍照的还是选取的图片。

上传照片的C#后台：

#region 上传图片
        public string GetImage(HttpContext context)
        {
            string result = context.Request["files1"];
            string index = context.Request["index"];
            byte[] bytes = Convert.FromBase64String(result.Substring(23));
            #region 上传图片            
            TimeSpan ts = DateTime.UtcNow - new DateTime(1970, 1, 1, 0, 0, 0, 0);
            string name = Convert.ToInt64(ts.TotalSeconds).ToString() + ".png";
            FileStream fs = null;
            try
            {
                if (int.Parse(index) == 2)//选取的照片可以直接保存
                {
                    fs = new FileStream(context.Request.MapPath("../photos") + "//" + name, FileMode.Create);
                    fs.Write(bytes, 0, bytes.Length);
                }
                else if (int.Parse(index) == 1)//拍照的照片有90度的倾斜，可以在后台旋转。前台也有方法（我不会。。。）
                {
                    MemoryStream ms = new MemoryStream(bytes);
                    Image photo = System.Drawing.Image.FromStream(ms);
                    photo.RotateFlip(RotateFlipType.Rotate90FlipNone);//旋转方法
                    photo.Save(context.Request.MapPath("../photos") + "//" + name);//保存到服务器 这里要在服务器建立个photos的文件夹
                }
            }
            catch (IOException ioe)
            {
                Log.Info("photoError",ioe.ToString());
            }
            finally
            {
                if (fs != null)
                {
                    fs.Close();
                }
            }
            #endregion
            jsonHelper.AddItem("name", "TJBankApp/photos/" + name);//把文件名返回给前台
            jsonHelper.ItemOk();
            return jsonHelper.ToString();
        }
        #endregion