之前我已经做过一个利用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>
时间： 2024-08-08 05:36:57