版权声明:本文为博主原创文章,需要转载尽管转载。 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