canvas 绘制 分享图片 加 保存图片在系统相册

// 效果图

 

代码

<template>
    <view class="page-class bg-page">

// 利用canvas  最终 生成图片
        <canvas class="poster-wrapper" canvas-id="shareCanvas"></canvas>
        <view class="footer-info">
            <view class="share-content-main flex">
                <view class="share-content-item" @click="wechatFriend('WXSceneSession')">
                    <view class="iconfont iconweixin"></view>
                    <view>邀请微信好友</view>
                </view>
                <view class="share-content-item" @click="saveImg">
                    <view class="iconfont iconbaocuntu"></view>
                    <view>保存到相册</view>
                </view>
            </view>
        </view>
    </view>
</template>

 

<script>
export default {
    data() {
        return {
            teamName: '',
            inviteCode: '',
            photo: '',
            qrImg: '/static/images/zhengmian4.png'
        };
    },
    onLoad(options) {
        this.teamName = options.teamName;
        if (uni.getStorageSync('userInfo')) {
            this.inviteCode = '邀请码：' + uni.getStorageSync('userInfo').userInfo.codeV1;
            let userPhoto = uni.getStorageSync('userInfo').serviceUser.photo;
            this.photo = userPhoto && userPhoto != '' ? userPhoto : this.$morenTouxiang;
            setTimeout(() => {
                this.shareClick();
            });
        }
    },
    methods: {
        shareClick() {
            let that = this;
            const ctx = wx.createCanvasContext('shareCanvas');
            uni.getSystemInfo({
                success: function(respro) {

                   // 绘制白色背景
                    ctx.setFillStyle('#fff');
                    ctx.fillRect(0, 0, respro.windowWidth - 60, 425);

                   // 绘制头像
                    ctx.drawImage(that.photo, (respro.windowWidth - 140) / 2, 40, 80, 80);
                    ctx.setFontSize(18);

                    // 绘制昵称

                    //ctx.measureText(that.teamName).width) / 2  实现文字居中  在app端无效

                   //结果改为
                    ctx.fillText(that.teamName, (respro.windowWidth - 60 - ctx.measureText(that.teamName).width) / 2, 146);
                    ctx.setFontSize(16);
                    ctx.setFillStyle('#666');
                    ctx.fillText(that.inviteCode, (respro.windowWidth - 60 - ctx.measureText(that.inviteCode).width) / 2, 190);
                    ctx.drawImage(that.qrImg, (respro.windowWidth - 190) / 2, 217, 130, 130);
                    ctx.setFontSize(16);
                    ctx.setFillStyle('#222');
                    ctx.fillText('扫描二维码加入团队', (respro.windowWidth - 60 - ctx.measureText('扫描二维码加入团队').width) / 2, 380);
                    ctx.draw();
                    // ctx.stroke();
                    // ctx.draw(false, () => {
                    //     uni.hideLoading();
                    // });
                }
            });
        },

      // 保存图片将 canvas 绘制出 图片路径
        saveImg() {
            // #ifdef  APP-PLUS
            uni.showLoading({
                title: '正在保存...',
                mask: true
            });
            let that = this;
            uni.canvasToTempFilePath({
                canvasId: 'shareCanvas',
                success: res => {
                    that.savePic(res.tempFilePath);
                },
                fail: function() {
                    uni.hideLoading();
                    //TODO
                }
            });
            // #endif
        },
        //保存
        savePic(filePath) {
            uni.saveImageToPhotosAlbum({
                filePath: filePath,
                success: function() {
                    uni.showToast({
                        title: '已保存系统相册',
                        duration: 2000
                    });
                },
                fail: function(e) {
                    uni.showToast({
                        title: '失败',
                        duration: 2000
                    });
                    //TODO
                },
                complete: function() {
                    // uni.hideLoading();
                }
            });
        }
    }
};
</script>