1. 程式人生 > >hbuilder上傳圖片(帶旋轉)

hbuilder上傳圖片(帶旋轉)

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