微信小程序canvas分享图片

<view class="share" catchtouchmove="true" wx-if="{{showShare==true}}">
    <view class="mask" catch:tap="Cloose"></view>
    <view class="share_content">
        <view class="share_img">
            <canvas canvas-id='share' style='width:560rpx;height:837rpx;border-radius: 20rpx;'></canvas>
            
        </view>
        <view class="share_btnList">
            <button class="share_wechat" hover-class="none" open-type="share">
                
                    <view class="share_icon">
                        <image class="" src="../../images/share/splb_spfx_wx.png" mode="aspectFill" lazy-load="true">
                        </image>
                    </view>
                    <view class="share_wechat_title">
                        微信好友
                    </view>
                
            </button>
            <button hover-class="none" class="share_friend" catchtap="shareFriend">
                <view class="share_icon">
                    <image class="" src="../../images/share/splb_spfx_wxpyq.png" mode="aspectFill" lazy-load="true">
                    </image>
                </view>
                <view class="share_wechat_title">微信朋友圈</view>
            </button>
        </view>
    </view>
</view>

.image {
    width: 100%;
    height: 100%;
}

button::after {
    border: none;
}

button {
    background-color: #fff;
}

.share {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 998;

    .mask {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: #000000;
        opacity: 0.6;
    }

    .share_content {
        z-index: 999;
        position: absolute;
        top: 292rpx;
        left: 95rpx;

        .share_img {
            position: relative;
            width: 560rpx;
            height: 837rpx;
            background: #FFFFFF;
            border-radius: 20rpx;

           
        }

        .share_btnList {
            width: 560rpx;
            height: 148rpx;
            background: #FFFFFF;
            border-radius: 20rpx;
            margin-top: 20rpx;
            display: flex;
            overflow: hidden;

            .share_wechat,
            .share_friend {
                width: 50%;
                height: 100%;
                position: relative;

                .share_icon {
                    width: 68rpx;
                    height: 68rpx;
                    position: absolute;
                    left: 50%;
                    top: 24rpx;
                    transform: translate(-50%, 0);
                }

                .share_wechat_title {

                    font-size: 24rpx;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #000000;
                    text-align: center;
                    margin-top: 90rpx;
                }
                
            
            }
        }
    }
}

var appInst = getApp();
Component({
    data: {
        IMGURL: appInst.globalData.IMGURL,//图片前缀
        safeArea: appInst.globalData.safeArea,//手机屏幕信息
        showShare: false,//分享弹窗的状态
        showCavans: false,
        tempFilePath: '',//图片本地路径
        //ctx:实例对象，str:字符串，size：字号，style:颜色，align:对齐方式，x:x轴坐标，y:y轴坐标
        ctx: {}

    },
    properties: {
        goodDatial:Object,//商品详情
    },
    ready() {
        this.setData({
            ctx: wx.createCanvasContext('share', this)//创建实例对象
        })

    },
    methods: {
        //分享到微信好友
        shareWechat() {
        },
        //分享到朋友圈
        shareFriend() {
            this.saveImage()
        },

        //生成图片
        canvasImg() {
            var that = this;
            let { ctx } = this.data
            that.addGoodImg(ctx)//绘制商品图
            that.addGoodIcon(ctx)//绘制顶部标签icon
            that.addTitle(ctx)// 画商品名称
            that.addPricetag(ctx)//绘制价格标签
            that.addPricenum(ctx)//绘制价格
            that.addPosterOne(ctx)//绘制广告1
            that.addLine(ctx)//绘制广告之间的横线
            that.addPosterTwo(ctx)//绘制广告2
            that.addErcode(ctx)//绘制二维码
            that.addUserbg(ctx)//绘制用户半透明背景
            that.drawThispic(ctx, that)

        },
        //绘制商品图
        addGoodImg(ctx) {
            ctx.drawImage('../../images/share/splb_spfx_pic2.png', 0, 0, 280, 280)
        },
        //绘制顶部标签icon
        addGoodIcon(ctx) {
            ctx.drawImage('../../images/share/splb_spfx_pic1.png', 59, 0, 162, 40)
        },

        addTitle(ctx) {
            var str = "褪黑素安瓶助眠改善腿退黑色素睡眠片\n失眠官方旗舰店官网"
            ctx.setFontSize(14)
            ctx.setFillStyle("#000");
            ctx.setTextAlign('left');
            ctx.fillText(str, 12, 300, 250)
            ctx.stroke();
        },
        //绘制价格标签
        addPricetag(ctx) {
            var str = "￥"
            ctx.setFontSize(12)
            ctx.setFillStyle("#FF3333");
            ctx.setTextAlign('left');
            ctx.fillText(str, 12, 342)
            ctx.stroke();
        },
        //绘制价格
        addPricenum(ctx) {
            var str = "11900"
            ctx.setFontSize(20)
            ctx.setFillStyle("#FF3333");
            ctx.setTextAlign('left');
            ctx.fillText(str, 23, 342)
            ctx.stroke();
        },
        //绘制广告1
        addPosterOne(ctx) {
            var str = "让健康走进千家万户"
            ctx.setFontSize(16)
            ctx.setFillStyle("#1B707E");
            ctx.setTextAlign('left');
            ctx.fillText(str, 12, 366)
            ctx.stroke();
        },
        //绘制广告之间的横线
        addLine(ctx) {
            ctx.lineWidth = 2;
            ctx.strokeStyle = '#CCCCCC';
            ctx.moveTo(14, 375);
            ctx.lineTo(162, 375);
            ctx.stroke();
        },
        //绘制广告2
        addPosterTwo(ctx) {
            var str = "让每个家庭都有一个懂健康的人"
            ctx.setFontSize(12)
            ctx.setFillStyle("#666666");
            ctx.setTextAlign('left');
            ctx.fillText(str, 12, 393)
            ctx.stroke();
        },
        //绘制二维码
        addErcode(ctx) {
            ctx.drawImage('../../images/share/splb_spfx_pic3.png', 202, 339, 64, 64)
        },
        //绘制文本
        //ctx:实例对象，str:字符串，size：字号，style:颜色，align:对齐方式，x:x轴坐标，y:y轴坐标
        addText(ctx, str, size, style, align, x, y) {
            ctx.setFontSize(size)
            ctx.setFillStyle(style);
            ctx.setTextAlign(align);
            ctx.fillText(str, x, y)
            ctx.stroke();
        },
        //绘制用户半透明背景
        addUserbg(ctx) {

            ctx.setGlobalAlpha(0.2)
            ctx.stroke();
            ctx.setFillStyle('red')
            ctx.fillRect(0, 238, 280, 42);
            ctx.setGlobalAlpha(0.2)
            ctx.setFillStyle('blue')
        },
        //绘制整张图片
        drawThispic(ctx, that) {
            let _that = this
           
            ctx.draw(false, function () {
                setTimeout(() => {
                    wx.canvasToTempFilePath({
                        fileType: 'jpg',
                        canvasId: 'share',
                        quality: 1,
                        success(res) {
                            _that.tempFilePath = res.tempFilePath
                        },
                        fail(err) {
                            console.log(err)
                        }
                    }, that)
                }, 500)
            })
        },
        //保存图片
        saveImage() {
            let _that = this
            console.log(_that.tempFilePath)

            wx.saveImageToPhotosAlbum({
                filePath: _that.tempFilePath,
                success(res) {
                    console.log(res)

                    wx.showModal({
                        title: '存图成功',
                        content: '图片成功保存到相册了，去发圈噻~',
                        showCancel: false,
                        confirmText: '好哒',
                        confirmColor: '#72B9C3',
                        success: function (res) {
                            if (res.confirm) {
                                console.log('用户点击确定');
                            }
                            _that.Cloose()
                        }
                    })
                }, fail(err) {
                    if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg === "saveImageToPhotosAlbum:fail auth deny" || err.errMsg === "saveImageToPhotosAlbum:fail authorize no response") {
                        // 这边微信做过调整，必须要在按钮中触发，因此需要在弹框回调中进行调用
                        wx.showModal({
                            title: '提示',
                            content: '需要您授权保存相册',
                            showCancel: false,
                            success: modalSuccess => {
                                wx.openSetting({
                                    success(settingdata) {
                                        console.log("settingdata", settingdata)
                                        if (settingdata.authSetting['scope.writePhotosAlbum']) {
                                            wx.showModal({
                                                title: '提示',
                                                content: '获取权限成功,再次点击图片即可保存',
                                                showCancel: false,
                                            })
                                        } else {
                                            wx.showModal({
                                                title: '提示',
                                                content: '获取权限失败，将无法保存到相册哦~',
                                                showCancel: false,
                                            })
                                        }
                                    },
                                    fail(failData) {
                                        console.log("failData", failData)
                                    },
                                    complete(finishData) {
                                        console.log("finishData", finishData)
                                    }
                                })
                            }
                        })
                    }
                }
            })
        },
        onShareAppMessage() {
            console.log(e)
        },
        //关闭分享弹窗
        Cloose() {
            let _that = this
            _that.setData({
                showShare: false
            })
        },
        //开启分享弹窗
        ShowShare() {
            console.log('5555555555555555555')
            let _that = this
            _that.canvasImg()
            _that.setData({
                showShare: true
            })
        }
        //分享给好友


    },
    onShareAppMessage: function (options) {
        this.setData({
            showShare: false
        })
        return {
            title: '自定义标题',
            imageUrl: this.tempFilePath,
            query: 'name=xiang&age=xxx',
        }
    }
})