mui开发app之js将base64转图片文件

Posted devil

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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转图片文件的主要内容，如果未能解决你的问题，请参考以下文章

HTML5 MUI 手机预览图片，裁剪上传base64，保存数据库

JS 图片转Base64

js中图片base64格式转文件对象

uni-app 中图片转 base64 以及 base64 转图片方式，超简单，超好用的图片转换工具，你值得拥有它。

JavaCV音视频开发宝典：实现Base64编码图片转换成图片文件通用转换器，以base64转png图片文件为例，其他图片格式也全部支持

JavaCV音视频开发宝典：实现Base64编码图片转换成图片文件通用转换器，以base64转png图片文件为例，其他图片格式也全部支持