mui ajax 传递base64 HTML5 MUI 手机预览图片 裁剪上传base64 保存数据库

app和网站页面都可以使用

需要的文件：

这些都需要，这些文件在下文的参考网址可以下载

页面头部引用：

页面底部引用(但是在body里)：

布局：

//触发选择图片事件

//默认图片以及选择裁剪后展示的效果

确认提交//保存数据事件

//等待动画

请稍等...

//关闭裁剪窗口

//左旋转90度

//右旋转90度

//确定

JS部分：

//post内容

function postAvatar() {

var petimage = $("#changeAvatar > img").attr("src");//此时取到的图片已经是base64形式

//你的处理代码，改post到服务器了，服务器接收同接收普通post参数一样，只是，存图片的字段改成ntext，这是sql的数据类型，其他数据库同类型，jq的getJSON可能会不执行，因为getJSON是get模式，图片转成base64后，很容易超出最大长度，其实，经过压缩后，一般不会超出的，具体压缩方法下文有

}

//拍照

function getImage() {

var cmr = plus.camera.getCamera();

cmr.captureImage(function(p) {

plus.io.resolveLocalFileSystemURL(p, function(entry) {

var localurl = entry.toLocalURL(); //

$("#report").html('

');

cutImg();

mui('#picture').popover('toggle');

});

});

}

//相册选取

function galleryImgs() {

plus.gallery.pick(function(e) {

//alert(e);

$("#readyimg").attr("src", e);

cutImg();

mui('#picture').popover('toggle');

}, function(e) {

//outSet( "取消选择图片" );

}, {

filter: "image"

});

}

//照片裁剪类

function cutImg() {

$(".mui-content").hide();

$("#showEdit").fadeIn();

var $image = $('#report > img');

$image.cropper({

checkImageOrigin: true,

aspectRatio: 1 / 1,

autoCropArea: 0.3,

zoom: -0.2

});

//$image.cropper('zoom',-0.5);

}

//确认照片，展示效果

function confirm() {

$("#showEdit").fadeOut();

var $image = $('#report > img');

var dataURL = $image.cropper("getCroppedCanvas");

//var imgurl = dataURL.toDataURL("image/png", 0.5);

//换成下边的方法，转成jpeg，但是把质量降低，

//经测试51k的png，转成0.3质量，大小为3k多，0.5质量大小为4k多，

//这回应该不会出现卡的情况了，

//既然差别1k多，还是用0.5的质量，还是要兼顾下显示效果的。

var imgurl = dataURL.toDataURL("image/jpeg", 0.5);

$("#changeAvatar > img").attr("src", imgurl);

//$("#divbtn").show();

$(".mui-content").show();

}

//旋转照片

function rotateimg() {

$("#readyimg").cropper('rotate', 90);

}

function rotateimgleft() {

$("#readyimg").cropper('rotate', -90);

}

function closepop() {

$("#showEdit").fadeOut();

var $image = $('#report > img');

$image.cropper('destroy');

$(".mui-content").show();

}

function showActionSheet() {

var bts = [{

title: "拍照"

}, {

title: "从相册选择"

}];

plus.nativeUI.actionSheet({

cancel: "取消",

buttons: bts

},

function(e) {

if (e.index == 1) {

getImage();

} else if (e.index == 2) {

galleryImgs();

}

//outLine( "选择了\""+((e.index>0)?bts[e.index-1].title:"取消")+"\"");

}

);

}

效果图如下：

服务器端

string[] arrimg = img.Split(';');//img是request['img']取到的完整的base64

img = arrimg[1].Substring(7);//截取字符串

byte[] arr = Convert.FromBase64String(img);

string newPath = "Images/" + DateTime.Now.ToString("yyyyMMdd") + "/";

if (!Directory.Exists(HttpContext.Current.Server.MapPath(newPath)))

{

System.IO.Directory.CreateDirectory(HttpContext.Current.Server.MapPath(newPath));

}

string filename = Common.GetGuid() + ".jpg";

File.WriteAllBytes(HttpContext.Current.Server.MapPath(newPath) + filename, arr);//简单方便，直接另存为

Content = Common.GetRootURI() + "System/Controls/" + newPath + filename;//这里是图片在服务器上的路径，GetRootURI方法在下边

public static string GetRootURI()

{

string AppPath = "";

HttpContext HttpCurrent = HttpContext.Current;

HttpRequest Req;

if (HttpCurrent != null)

{

Req = HttpCurrent.Request;

string UrlAuthority = Req.Url.GetLeftPart(UriPartial.Authority);

if (Req.ApplicationPath == null || Req.ApplicationPath == "/")

{

//直接安装在 Web 站点

AppPath = UrlAuthority + "/";

}

else

{

//安装在虚拟子目录下

AppPath = UrlAuthority + Req.ApplicationPath + "/";

}

}

return AppPath;

}

参考网址：

/fengyuanchen/cropper/blob/master/README.md

/fengyuanchen/cropper

/en-US/docs/Web/API/HTMLCanvasElement/toDataURL

还有一个对api的详细介绍，网址找不到了，是火狐哪个网页，比较详尽的api实用说明，等找到放上来。

其实就是仔细看api，耐心看英文说明，还有就是不停的实践、多想，终于功夫不负有心人。