uniapp生成海报,保存相册 / 分享微信好友和朋友圈

<view>

    <u-button @click=“createPoster”>生成海报</u-button>

    <u-popup :show="show" round="10rpx" closeOnClickOverlay @close="colsePay()">

                     //生成海报
            <lPainter customStyle='position: fixed; left: 10px;top:10px' ref="painter"                   :board="base" isRenderImage  @success="onSuccess($event)" />   
  </u-popup>

<u-button @click=“onPosterSuccess”>保存相册</u-button>

<u-button @click=“Posterweixin”>分享微信</u-button>

</view>

createPoster() {
                const width = 350;
                const height = 600;
                let that = this;
                let config = {
                    width: width + "px",
                    height: height + "px",
                    // background: '#F6F7FB',背景色
                    views: [
                        // 背景图片设置
                        {
                            type: "image",
                            css: {
                                objectFit: "cover",
                                width: width + "px",
                                height: height + "px",
                            },
                            src: "../../static/haibao.jpg",
                        },
                        // 文字
                        {
                            type: "view",
                            css: {
                                top: "390px",
                            },
                            views: [{
                                type: "text",
                                text: "邀请码",
                                css: {
                                    color: "#000000",
                                    ontSize: '27rpx',
                                    lineHeight: '40rpx',
                                    width: '100%',
                                    textAlign: 'center', //居中,要设置width: '100%',
                                }
                            }, ]
                        },
                        // 个人头像
                        {
                            type: "view",
                            css: {
                                top: "410px",
                                left: '50px',
                            },
                            views: [{
                                type: "image",
                                css: {
                                    width: "30px",
                                    height: "30px",
                                    borderRadius: "50%", //设置圆形头像
                                },
                                src: this.avatar //后台的接口 ,可以直接跟地址src: '地址'
                            }]
                        },
                        // 文字拼接
                        {
                            type: "view",
                            css: {
                                top: "410px",
                                left: '90px',
                            },
                            views: [{
                                type: "text",
                                text: this.userName + ',邀请您加入,' + this.storeName ,
                                css: {
                                    maxLines: 3, //超出三行显示...
                                    width: '440rpx',
                                    ontSize: '27rpx',
                                    lineHeight: '40rpx'
                                }
                            }, ]
                        },

                    ],
                }
                // 赋值海报
                this.base = config;
            },

   // 生成海报地址
            onSuccess(e) {
                this.path = e
            },

//保存到相册

onPosterSuccess() {
                uni.saveImageToPhotosAlbum({ //保存图片到系统相册。
                    filePath: this.path, //图片文件路径
                    success: function() {
                        uni.showToast({
                            title: '图片保存成功',
                            icon: 'none',
                        });
                    },
                    fail: function(e) {
                        console.log(e);
                        uni.showToast({
                            title: '图片保存失败',
                            icon: 'none',
                        });
                    }
                });
            },

// 微信分享好友和朋友圈
            Posterweixin() {
                uni.share({
                    provider: "weixin",
                    // 分享到微信好友:WXSceneSession。朋友圈:WXSceneTimeline
                    scene: "WXSceneSession", 
                    type: 2,
                    imageUrl: this.path,
                    miniProgram: {
                        id: 'gh_abcdefg',
                        path: 'pages/index/index',
                        type: 0,
                        webUrl: 'http://uniapp.dcloud.io'
                    },
                    success: function(res) {
                        console.log("success:" + JSON.stringify(res));
                    },
                    fail: function(err) {
                        console.log("fail:" + JSON.stringify(err));
                    }
                });
            },


 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值