hbuilder上傳圖片(帶旋轉)
阿新 • • 發佈:2019-02-03
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