【Taro+react 保存圖片到相冊】

import Taro from '@tarojs/taro';
import { View, Image, Text } from '@tarojs/components';
import IconFont from '@/components/iconfont';
import { toast, getImg } from '@/utils/util';
import './index.scss';

class ShareVip extends Taro.PureComponent {
    constructor(props) {
        super(props);
    }
    config = {
        navigationBarTitleText: '分享得會員',
        navigationBarTextStyle: 'black'
    }
    state = {
        imgUrl: getImg('/group1/M00/00/5D/wKgBZF_KCPuEbKO3AAAAAO_XMrc004.png'),
        isOpen: false
    }
    onOpen() {
        this.setState({
            isOpen: true
        });
    }
    onDialogCancel() {
        this.setState({
            isOpen: false
        });
    }
    async shareToFriend() {
        // 后端說圖片寫死的，保存到本地
        Taro.getSetting({
            complete() {}
        }).then(res => {
            if (res.authSetting['scope.writePhotosAlbum']) {
                Taro.getImageInfo({
                    src: this.state.imgUrl,
                    success(result) {
                        if (result.path) {
                            Taro.saveImageToPhotosAlbum({
                                filePath: result.path
                            }).then(getImageInfoResult => {
                                if (getImageInfoResult.errMsg === 'saveImageToPhotosAlbum:ok') {
                                        toast('已成功保存至相冊！');
                                    } else {
                                        toast('圖片保存失敗！');
                                    }
                            });
                        }
                    }
                });
            } else {
                Taro.authorize({
                    scope: 'scope.writePhotosAlbum',
                }).then(() => {
                    Taro.getImageInfo({
                        src: this.state.imgUrl,
                        success(result) {
                            if (result.path) {
                                Taro.saveImageToPhotosAlbum({
                                    filePath: result.path
                                }).then(getImageInfoResult => {
                                    if (getImageInfoResult.errMsg === 'saveImageToPhotosAlbum:ok') {
                                        toast('已成功保存至相冊！');
                                    } else {
                                        toast('圖片保存失敗！');
                                    }
                                });
                            }
                        }
                    });
                });
            }
        }).catch(() => {});
    }
    render() {
        const { imgUrl, isOpen } = this.state;
        return (
            <View className='shareVip-html'>
                <View className='shareVip-wrapper' style={{ background: `url(${getImg('/group1/M00/00/47/wKgBZF-2Oy-EDOo1AAAAAGPehpk488.png')})`, backgroundSize: '100% 100%'}}>
                <View className='shareVip-box'>
                    <View className='shareVip-box-label'>
                        1、點擊<Text>立即分享</Text>將圖片分享至微信朋友圈
                    </View>
                    <Image src={getImg('/group1/M00/00/47/wKgBZF-3V0aEU1OpAAAAAEKiKWI724.png')} className='shareBtn' onClick={this.onOpen} />
                     <View className='shareVip-box-label'>
                        2、將分享頁面截圖發送給客服即可免費領取<Text>價值18888會員</Text>
                    </View>
                    <View className='shareVip-box-imgCode'>
                        <Image src={getImg('/group1/M00/00/5D/wKgBZF_KCOGEB9xeAAAAAJTAI2Q115.jpg')} className='shareCode' showMenuByLongpress />
                        <Text className='shareText'>長按保存二維碼，添加客服</Text>
                    </View>
                </View>
                </View>
                
                { isOpen && <View className='sharVip-dialog'>
                    <View className='mask' onClick={this.onDialogCancel}></View>
                    <View className='dialog-wrapper dialog-custom'>
                        <View className='cancel-btn' onClick={this.onDialogCancel}>
                            <IconFont name='common-icon_guanbi' size={22} color='rgb(255,255,255)' />
                        </View>
                        {/* 內容 */}
                        <View className='sharVip-dialog-content'>
                            <Image src={imgUrl} className='shareHaibao' mode='widthFix' />
                            <View className='shareBtn' onClick={this.shareToFriend}>保存圖片</View>
                        </View>
                    </View>
                </View>}
            </View>
        );
    }
}

export default ShareVip;