之前我已經做過一個利用cropper裁剪並且制作頭像的功能。如何在mui app中實現相冊或相機獲取圖片后裁剪做頭像請看另一篇博客：mui開發app之cropper裁剪后上傳頭像的實現
但是當時裁剪后圖片是保存為base64格式的，這是h5 canvas建議使用的圖片傳輸方式。
很多時候很多api，比如mui中第三方插件map中有一個setIcon傳入的必須是本地的圖片文件地址，目前的第三方地圖系統任然不支持base64的標注圖，所以折騰了一晚之后終於在native.js中找到了將base64轉化為圖片的辦法
官網文檔請看：http://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.BitmapSaveOptions
將bitmap實現放入app的公共js當中，比如我放在app.js中，並且塞在app這個閉包當中，隨出引用調用：
(function($, owner) { //將BASE 64保存為文件 owner.baseImgFile = function(uid, base64, quality, callback) { quality = quality || 10; callback = callback || $.noop; var bitmap = new plus.nativeObj.Bitmap(); // 從本地加載Bitmap圖片 bitmap.loadBase64Data(base64, function() { // console.log('加載圖片成功'); bitmap.save("_doc/" + uid + ".jpg", { overwrite: true, quality: quality }, function(i) { callback(i); // console.log('保存圖片成功：'+JSON.stringify(i)); }, function(e) { console.log('保存圖片失敗：' + JSON.stringify(e)); }); }, function(e) { console.log('加載圖片失敗：' + JSON.stringify(e)); }); } }(mui, window.app = {}));
第一個參數是文件名，我直接使用用戶id，第二個參數是base64字符串，第三個參數是圖片質量1-100，最后一個參數回掉函數，可獲取保存圖片文件的信息
使用：
app.baseImgFile(app.getUserInfo().id,my_icon,1,function(i){ alert(JSON.stringify(i)); });
也可以直接定義為function xxx(){}這樣在調用的時候就不是從閉包中獲取，通過原函數名調用
在官方文檔中：
bitmap對象下的方法：
其中我們使用的save方法：
官方示例：
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <title>NativeObj Example</title> <script type="text/javascript"> var wc=null,bitmap=null; // H5 plus事件處理 function plusReady(){ wc = plus.webview.currentWebview(); bitmap = new plus.nativeObj.Bitmap("test"); // 將webview內容繪制到Bitmap對象中 wc.draw(bitmap,function(){ console.log('繪制圖片成功'); },function(e){ console.log('繪制圖片失敗：'+JSON.stringify(e)); }); } if(window.plus){ plusReady(); }else{ document.addEventListener("plusready",plusReady,false); } // 保存圖片 function saveBitmap(){ bitmap.save( "_doc/a.jpg" ,{} ,function(i){ console.log('保存圖片成功：'+JSON.stringify(i)); } ,function(e){ console.log('保存圖片失敗：'+JSON.stringify(e)); }); } </script> </head> <body> 保存圖片<br/> <button onclick="saveBitmap()">Save</button> </body> </html>