之前我已经做过一个利用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转图片文件的更多相关文章

  1. mui开发app之cropper裁剪后上传头像的实现

    在大多数app项目中,都需要对用户头像的上传,之前做web开发的时候,我主要是通过input type=file的标签实现的,上传后,使用php对图片进行裁剪,这种方式比较传统简单. 此次app开发中 ...

  2. 利用 MUI开发app， 如何实现侧滑菜单及其主体部分上下滑动

     利用mui开发APP 之侧滑菜单主内容滚动问题 MUI作为开发者常用的框架之一,其号称最接近原生APP体验的高性能前端框架.因此利用mui开发移动APP,可以为开发者提供很大的便利和接近原生的体验. ...

  3. mui开发app前言（一）

    dcloud mui开发app前言 大一那会就听说html5快要发布了,前景无量,厉害到能写操作系统==|||(什么???蛤?) 似乎html5标准还没正式发布那会,使用hybrid模式开发app已经 ...

  4. python 应用开发之-用base64 对图片文件的编码和解码处理

    用base64 对图片文件的编码和解码处理 import base64 def convert(image): f = open(image) img_raw_data = f.read() f.cl ...

  5. mui开发app之html5+,5+Runtime,5+sdk,native.js

    说说几个名词 html5:目前最新的html规范,w3c联盟制定,手机端主要由webkit实现规范,对用户来说就是浏览器实现了它 html5+:所谓"+",扩充了html5原本没有 ...

  6. MUI开发APP，scroll组件，运用到区域滚动

    最近在开发APP的过程中,遇到一个问题,就是内容有一个固定的头部和底部.         头部就是我们常用的header了,底部的话,就放置一个button,用来提交页面数据或者进入下一个页面等,效果 ...

  7. mui开发app之联网应用传输数据

    手机的app分为,在线和单机,在线就是类似于C/S模式,能与服务器与他人共享数据的程序,单机就是在没有网络下可以玩转的app. 目前互联网盛行的时代,99%的程序都是联网环境下工作的.那么如何开发本地 ...

  8. mui开发app之webview是什么

    WebView(网络视图)能加载显示网页,可以将其视为一个浏览器,webview被封装在html5+,plus对象中,底层由java,OC实现. 先来谈谈我对webview的理解: 使用mui开发的a ...

  9. mui开发app之多图压缩与上传（仿qq空间说说发表）

    欲实现效果图 提出需求点: 用户可自由添加删除替换多张图片,并且显示相应缩略图,限制为8张 用户可选择压缩图或直接上传原图功能 返回提醒用户会丢失填写的信息 下面一个个实现上述需求,从简单到复杂: 需 ...

随机推荐

  1. spring-AOP-ProxyFactoryBean代理的实例

    1.一个代理模式的实例 通过 Proxy类进行代理 wait.java //定义一个接口 public interface wait { void say(); } //目标对象实现接口并重写方法 p ...

  2. MapReduce简介以及详细配置

    1.MapReduce(一个分布式运算框架)将数据分为数据块,发送到不同的节点,并行方式处理. 2.NodeManager和DataNode在一个节点上,程序与数据在一个节点. 3.内容分为两个部分 ...

  3. Tcl与Design Compiler （二）——DC综合与Tcl语法结构概述

    1.逻辑综合的概述 synthesis = translation + logic optimization + gate mapping . DC工作流程主要分为这三步 Translation : ...

  4. dev机上数据库中批量生成table

    我的低效方法: 通过本地php脚本进行create: <?php //0-63 header("Content-type:text/html;charset=utf-8"); ...

  5. web之Respone

    服务器处理请求的流程:  服务器每次收到请求时,都会为这个请求开辟一个新的线程.  服务器会把客户端的请求数据封装到request对象中,request就是请求数据的载体!(袋子)  服务器还会创建r ...

  6. C语言 动态数组实现

    一.概述 C语言是不能直接定义动态数组的,数组必须在初始化时确定长度. 如果要在程序运行时才确定数组的长度,就需要在运行的时候,自己去向系统申请一块内存用动态内存分配实现动态数组. 二.动态内存分配函 ...

  7. Linux网络那点事

    跨平台系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#linux 之前的之前说过网络自连接的配置(CentOS服务器网络配置:http://ww ...

  8. 【Electron】Electron开发入门（七）：打开本地文件或者网页链接 and webview里操纵electron api

    1.打开本地文件或者网页链接 // 打开系统本地文件 const {shell} = require('electron'); // Open a local file in the default ...

  9. winform 自定义分页控件 及DataGridview数据绑定

    分页效果如上图所示,用到的控件均为基本控件 ,其方法如下 右击项目-添加-新建项 选择用户控件 然后在用户控件中拖入所需要的Label,Button,Text 用户控件全部代码: using Syst ...

  10. Liferay中利用URL传参数

    业务场景:现在有一个新闻系统,有两个页面,A是新闻列表页面/web/guest/home,B是新闻的详情页面/web/guest/newsview. 业务逻辑为:在A页面中,点击新闻的标题进入B页面, ...