mui开发app之js将base64转图片文件
之前我已经做过一个利用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>
mui开发app之js将base64转图片文件的更多相关文章
- mui开发app之cropper裁剪后上传头像的实现
在大多数app项目中,都需要对用户头像的上传,之前做web开发的时候,我主要是通过input type=file的标签实现的,上传后,使用php对图片进行裁剪,这种方式比较传统简单. 此次app开发中 ...
- 利用 MUI开发app， 如何实现侧滑菜单及其主体部分上下滑动
利用mui开发APP 之侧滑菜单主内容滚动问题 MUI作为开发者常用的框架之一,其号称最接近原生APP体验的高性能前端框架.因此利用mui开发移动APP,可以为开发者提供很大的便利和接近原生的体验. ...
- mui开发app前言（一）
dcloud mui开发app前言 大一那会就听说html5快要发布了,前景无量,厉害到能写操作系统==|||(什么???蛤?) 似乎html5标准还没正式发布那会,使用hybrid模式开发app已经 ...
- python 应用开发之-用base64 对图片文件的编码和解码处理
用base64 对图片文件的编码和解码处理 import base64 def convert(image): f = open(image) img_raw_data = f.read() f.cl ...
- mui开发app之html5+,5+Runtime,5+sdk,native.js
说说几个名词 html5:目前最新的html规范,w3c联盟制定,手机端主要由webkit实现规范,对用户来说就是浏览器实现了它 html5+:所谓"+",扩充了html5原本没有 ...
- MUI开发APP，scroll组件，运用到区域滚动
最近在开发APP的过程中,遇到一个问题,就是内容有一个固定的头部和底部. 头部就是我们常用的header了,底部的话,就放置一个button,用来提交页面数据或者进入下一个页面等,效果 ...
- mui开发app之联网应用传输数据
手机的app分为,在线和单机,在线就是类似于C/S模式,能与服务器与他人共享数据的程序,单机就是在没有网络下可以玩转的app. 目前互联网盛行的时代,99%的程序都是联网环境下工作的.那么如何开发本地 ...
- mui开发app之webview是什么
WebView(网络视图)能加载显示网页,可以将其视为一个浏览器,webview被封装在html5+,plus对象中,底层由java,OC实现. 先来谈谈我对webview的理解: 使用mui开发的a ...
- mui开发app之多图压缩与上传（仿qq空间说说发表）
欲实现效果图 提出需求点: 用户可自由添加删除替换多张图片,并且显示相应缩略图,限制为8张 用户可选择压缩图或直接上传原图功能 返回提醒用户会丢失填写的信息 下面一个个实现上述需求,从简单到复杂: 需 ...
随机推荐
- mybatis基础学习3---特殊sql语句(备忘)
1: 2: 3:resultMap的用法
- [Open Source] RabbitMQ 安装与使用
前言 吃多了拉就是队列,吃饱了吐就是栈 使用场景 对操作的实时性要求不高,而需要执行的任务极为耗时:(发送短信,邮件提醒,更新文章阅读计数,记录用户操作日志) 存在异构系统间的整合: 安装 下载 Er ...
- javascript面向对象(一)
javascript是弱类型,直译式的面相对象编程语言. 在之前我们说过 var a = 123: 在这里a是整数 但是我们可以给a重新复制为 a="你好"; 在这个过程中变量a ...
- MySQL1236错误的恢复
从库出现问题 mysql> show slave status\G; *************************** . row *************************** ...
- Spring 框架原理
[spring框架原理] Spring框架原理 [博主]高瑞林 [博客地址]http://www.cnblogs.com/grl214 写给读者的话 ------亲爱的读者感谢您对小编的支持,当我正值 ...
- 结队编程study
##今天针对study进行结队编程,我和搭档张佳慧刚开始误认为SystemBarTintManager,baseActivity是personalActivity跳转的下一个界面,因为这个代码个人中心 ...
- CI框架剖析一
CodeIgniter 是一个小巧但功能强大的 PHP 框架,作为一个简单而"优雅"的工具包,它可以为开发者们建立功能完善的 Web 应用程序.本人使用CI框架有一 ...
- 20155232 2016-2017-3 《Java程序设计》第5周学习总结
20155232 2016-2017-3 <Java程序设计>第5周学习总结 教材学习内容总结 第八章 异常处理 1.使用try和catch 将正常的流程放try块中,异常处理放catch ...
- PPT里面实现动态图表
今天又被学生提问,可不可以在PPT中做类似Excel中的动态图表?Excel里实现动态图表的方法通常是将图表关联到一个固定的数据区域,然后通过其他单元格的值或者控件来改变该固定区域的数据,以达到动态改 ...
- 老李分享：为何要使用 Web Services
老李分享:为何要使用 Web Services poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询q ...