uniapp保存圖片到本地（APP和微信小程序端）

uniapp實現app端和微信小程序端圖片保存到本地，其它平台未測過，原理類似。

微信小程序端主要是權限需要使用button的開放能力來反復調起，代碼如下：

首先是條件編譯兩個平台的按鈕組件：

        <!-- #ifndef MP-WEIXIN -->
        <view class="purple_btn btn_box" @click="saveImgToLocal">
            保存到相冊
        </view>
        <!-- #endif -->
        
        <!-- #ifdef MP-WEIXIN -->
        <view v-if="openSettingBtnHidden" class="purple_btn btn_box" @click="saveEwm">
            保存到相冊
        </view>
        
        <button v-else class="purple_btn btn_box" hover-class="none" open-type="openSetting" @opensetting='handleSetting'>保存到相冊</button>
        <!-- #endif -->

js部分如下（base64格式的圖片請看最文章末尾）：

var _self;
export default{
    data(){
        return {
            openSettingBtnHidden: true,//是否授權
            ewmImg:""//這是要保存的圖片
        }
    },
    onLoad(opt) {
        _self = this;
    },
    components:{
    },
    methods:{
        //微信小程序保存到相冊
        handleSetting(e){
            if (!e.detail.authSetting['scope.writePhotosAlbum']) {
                  _self.openSettingBtnHidden = false;
            } else {
                 _self.openSettingBtnHidden = true;
            }
        },
        saveEwm:function(e){
            //獲取相冊授權
               uni.getSetting({
                 success(res) {
                   if (!res.authSetting['scope.writePhotosAlbum']) {
                     uni.authorize({
                       scope: 'scope.writePhotosAlbum',
                       success() {
                         //這里是用戶同意授權后的回調
                         _self.saveImgToLocal();
                       },
                       fail() {//這里是用戶拒絕授權后的回調
                           _self.openSettingBtnHidden=false
                       }
                     })
                   } else {//用戶已經授權過了
                     _self.saveImgToLocal();
                   }
                 }
               })
        },
        saveImgToLocal:function(e){
            
            uni.showModal({
                title: '提示',
                content: '確定保存到相冊嗎',
                success: function (res) {
                    if (res.confirm) {
                        
                        uni.downloadFile({
                                url: _self.ewmImg,//圖片地址
                                success: (res) =>{
                                    if (res.statusCode === 200){
                                        uni.saveImageToPhotosAlbum({
                                            filePath: res.tempFilePath,
                                            success: function() {
                                                uni.showToast({
                                                    title: "保存成功",
                                                    icon: "none"
                                                });
                                            },
                                            fail: function() {
                                                uni.showToast({
                                                    title: "保存失敗",
                                                    icon: "none"
                                                });
                                            }
                                        });
                                    } 
                                }
                            })
                        
                        
                    } else if (res.cancel) {
                        
                    }
                }
            });
            
        }
    }
}

 

app端如果圖片是base64，則使用如下腳本

saveBase64Img(base64) {
    const bitmap = new plus.nativeObj.Bitmap('test');
    bitmap.loadBase64Data(
        base64,
        function() {
            const url = '_doc/' + new Date() + '.png'; // url建議用時間戳命名方式
            console.log('url:', url);
            bitmap.save(
                url,
                {
                    overwrite: true // 是否覆蓋
                    // quality: 'quality'  // 圖片清晰度
                },
                i => {
                    uni.saveImageToPhotosAlbum({
                        filePath: url,
                        success: function() {
                            console.log('保存成功');
                            bitmap.clear();
                        }
                    });
                },
                e => {
                    console.log('保存失敗', e);
                    bitmap.clear();
                }
            );
        },
        e => {
            console.log('保存失敗', e);
            bitmap.clear();
        }
    );
}