mui開發app之js將base64轉圖片文件

時間 2019-11-18

標籤 mui 開發 app base64 base 圖片文件欄目 JavaScript 简体版

原文原文鏈接

以前我已經作過一個利用cropper裁剪而且製做頭像的功能。如何在mui app中實現相冊或相機獲取圖片後裁剪作頭像請看另外一篇博客：mui開發app之cropper裁剪後上傳頭像的實現javascript

可是當時裁剪後圖片是保存爲base64格式的，這是h5 canvas建議使用的圖片傳輸方式。html

不少時候不少api，好比mui中第三方插件map中有一個setIcon傳入的必須是本地的圖片文件地址，目前的第三方地圖系統任然不支持base64的標註圖，因此折騰了一晚以後終於在native.js中找到了將base64轉化爲圖片的辦法html5

官網文檔請看：http://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.BitmapSaveOptionsjava

將bitmap實現放入app的公共js當中，好比我放在app.js中，而且塞在app這個閉包當中，隨出引用調用：web

(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，最後一個參數回掉函數，可獲取保存圖片文件的信息canvas

使用：api

app.baseImgFile(app.getUserInfo().id,my_icon,1,function(i){
                                alert(JSON.stringify(i));
                            });

也能夠直接定義爲function xxx(){}這樣在調用的時候就不是從閉包中獲取，經過原函數名調用閉包

在官方文檔中：app

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>