【Taro+react 保存图片到相册】

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113

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;