app和網(wǎng)站頁(yè)面都可以使用

需要的文件：

這些都需要，這些文件在下文的參考網(wǎng)址可以下載

頁(yè)面頭部引用：

頁(yè)面底部引用(但是在body里)：

布局：

//觸發(fā)選擇圖片事件

//默認(rèn)圖片以及選擇裁剪后展示的效果

確認(rèn)提交//保存數(shù)據(jù)事件

//等待動(dòng)畫(huà)

請(qǐng)稍等...

//關(guān)閉裁剪窗口

//左旋轉(zhuǎn)90度

//右旋轉(zhuǎn)90度

//確定

JS部分：

//post內(nèi)容

function postAvatar() {

var petimage = $("#changeAvatar > img").attr("src");//此時(shí)取到的圖片已經(jīng)是base64形式

//你的處理代碼，改post到服務(wù)器了，服務(wù)器接收同接收普通post參數(shù)一樣，只是，存圖片的字段改成ntext，這是sql的數(shù)據(jù)類(lèi)型，其他數(shù)據(jù)庫(kù)同類(lèi)型，jq的getJSON可能會(huì)不執(zhí)行，因?yàn)間etJSON是get模式，圖片轉(zhuǎn)成base64后，很容易超出最大長(zhǎng)度，其實(shí)，經(jīng)過(guò)壓縮后，一般不會(huì)超出的，具體壓縮方法下文有

}

//拍照

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');

});

});

}

//相冊(cè)選取

function galleryImgs() {

plus.gallery.pick(function(e) {

//alert(e);

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

cutImg();

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

}, function(e) {

//outSet( "取消選擇圖片" );

}, {

filter: "image"

});

}

//照片裁剪類(lèi)

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);

}

//確認(rèn)照片，展示效果

function confirm() {

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

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

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

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

//換成下邊的方法，轉(zhuǎn)成jpeg，但是把質(zhì)量降低，

//經(jīng)測(cè)試51k的png，轉(zhuǎn)成0.3質(zhì)量，大小為3k多，0.5質(zhì)量大小為4k多，

//這回應(yīng)該不會(huì)出現(xiàn)卡的情況了，

//既然差別1k多，還是用0.5的質(zhì)量，還是要兼顧下顯示效果的。

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

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

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

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

}

//旋轉(zhuǎn)照片

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: "從相冊(cè)選擇"

}];

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:"取消")+"\"");

}

);

}

效果圖如下：

服務(wù)器端Asp.net

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);//簡(jiǎn)單方便，直接另存為

Content = Common.GetRootURI() + "System/Controls/" + newPath + filename;//這里是圖片在服務(wù)器上的路徑，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 站點(diǎn)

AppPath = UrlAuthority + "/";

}

else

{

//安裝在虛擬子目錄下

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

}

}

return AppPath;

}

參考網(wǎng)址：

https://github.com/fengyuanchen/cropper/blob/master/README.md

https://github.com/fengyuanchen/cropper

https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL

還有一個(gè)對(duì)api的詳細(xì)介紹，網(wǎng)址找不到了，是火狐哪個(gè)網(wǎng)頁(yè)，比較詳盡的api實(shí)用說(shuō)明，等找到放上來(lái)。

其實(shí)就是仔細(xì)看api，耐心看英文說(shuō)明，還有就是不停的實(shí)踐、多想，終于功夫不負(fù)有心人。

總結(jié)

以上是生活随笔為你收集整理的mui ajax 传递base64,HTML5 MUI 手机预览图片，裁剪上传base64，保存数据库的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。