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张 用户可选择压缩图或直接上传原图功能 返回提醒用户会丢失填写的信息 下面一个个实现上述需求,从简单到复杂: 需 ...
随机推荐
- eclipse清除运行Maven build...后积累的配置项
1.使用eclipse运行maven命令,经常会积累很多的配置项. 2.清理配置项同样在 Run As ---> Run configurations...中.
- javascript 随机显示指定内容
今天碰到一个需求,一个页面显示赞助厂商的信息,但是厂商要求排序要随机排,因为是个静态页面不是读取数据库的,所以打算用js来控制 var arr = new Array('张三', '李四', '王五' ...
- 分享一些自己写的前端库，并骗骗 star（库都是在实际项目中大量运用过的）
最近一两年在一些项目上,通过实际需求出发,编写了一些库在项目中使用,现在将这些项目都稍微整理了一下开源了出来,也许也有刚好能够你也用得上的,顺便也骗一下star.均在项目的README中加了相关的说明 ...
- Cannot use ImageField because Pillow is not installed.
现象描述: 使用 ImageField ,创建数据库表时,提示如下: Cannot use ImageField because Pillow is not installed. HINT: Get ...
- Javascript——依赖注入
本人才学疏浅,本文只为抛砖引玉,欢迎各路大牛前来斧正,不胜感激! 如今各个框架都在模块化,连前端的javascript也不例外.每个模块负责一定的功能,模块与模块之间又有相互依赖,那么问题来了:jav ...
- Unity文档总结（2）-Understanding Automatic Memory Management
当一个对象.字符串.数组被创建的时候,从中间池申请分配需要存储的内存称为堆.当该部分不在使用时,一度占用的内存被释放收回,用于别的事物.在过去,它通常由开发人员分配和释放这些堆内存块,明确相应的功能调 ...
- PHP流程管理，堪比小小程序
这个流程管理是从用户登录界面开始,然后提交申请,页面逐级审核通过.这个做起来其实挺简单,只是在某些逻辑方面需要 好好考虑一下. 登录页面就不再多说了,如果要存session的话,我们可以建一个假的登录 ...
- 极客君教你破解隔壁妹子的wifi密码，成功率高达90%
首先,给大家推荐一个我自己维护的网站: 开发者网址导航:http://www.dev666.com/ 破解wifi密码听起来很复杂,实际上也不是非常的复杂,极客君(微信公众帐号:极客峰)今天教大家如何 ...
- Javascript动态创建 style 节点
有很多提供动态创建 style 节点的方法,但是大多数都仅限于外部的 css 文件.如何能使用程序生成的字符串动态创建 style 节点,我搞了2个小时. 静态外部 css 文件语法: @import ...
- 使用cmd命令打开Python文件式程序方法
首先:需要确定已编好的Python程序的存储路径:(即在哪个磁盘,哪个文件中) 其次:打开cmd命令,输入该程序所在磁盘,敲回车键:(例如其存储在E盘,则输入“E:”,敲回车键.) 然后:输入pyth ...