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

}

);

}

效果圖如下：

服務器端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);//簡單方便，直接另存為

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;

}

參考網址：

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

還有一個對api的詳細介紹，網址找不到了，是火狐哪個網頁，比較詳盡的api實用說明，等找到放上來。

其實就是仔細看api，耐心看英文說明，還有就是不停的實踐、多想，終于功夫不負有心人。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。