小程序实现分销海报

小程序实现分销海报

1、简介：

　　用户生成属于自己的海报，其他人扫码此图片上的二维码，进入相应的小程序页面，同时带上相关的参数 parent_id 从而绑定上下级关系；

注意：一下是微信小程序的实现方法；支付宝基本同样，只有稍微小的部分修改，例如：支付宝小程序不需要调起授权保存相册，会在你使用的时候自动调用

2、例如海报：

下载背景图失败,稍后重试！", icon: "none", duration: 5000 }); } }); }, // 绘制画布 微信小程序 setCanvas() { let that = this; let ctx = wx.createCanvasContext("myCanvas"); ctx.rect( 0, 0, that.canvasWidth, that.canvasHeight ); ctx.setFillStyle("#fff"); ctx.fill(); // 背景图片 ctx.drawImage( \'../../../static/card_bg.png\', 0, 0, that.canvasWidth, that.canvasHeight ); // 用户图片 ctx.drawImage( that.avatarImg, 30, 40, 50, 50 ); that.drawFont(ctx, that.avatarContent, 100, 70,0,0,0,17,14,\'#000\'); that.drawFont(ctx, \'长按保存图片\', 140, 25,0,0,0,17,14,\'#333\'); // code图片 ctx.drawImage( // that.codeUrl, \'../../../static/123860applet.png\', that.canvasWidth/3, that.canvasWidth/3, that.canvasWidth/3, that.canvasWidth/3 ); ctx.globalCompositeOperation = "source-over"; ctx.draw(); //绘制到canvas },

// 长安图片
            getAuthAndSaveImg(){
                let _this = this;
                wx.getSetting({
                    success(res) {
                        if (res.authSetting[\'scope.writePhotosAlbum\']) {
                            _this.saveShareImg();
                        } else if (res.authSetting[\'scope.writePhotosAlbum\'] === undefined) {
                            wx.authorize({
                                scope: \'scope.writePhotosAlbum\',
                                success() {
                                    _this.saveShareImg();
                                },
                                fail(){
                                    wx.showToast({
                                        title: \'您没有授权，无法保存到相册\',
                                        icon: \'none\',
                                        duration: 2000
                                    })
                                }
                            })
                        }else {
                            uni.openSetting({
                                success(res) {
                                    if (res.authSetting[\'scope.writePhotosAlbum\']) {
                                        _this.saveShareImg();
                                    }else{
                                        wx.showToast({
                                            title:\'您没有授权，无法保存到相册\',
                                            icon:\'none\',
                                            duration: 2000
                                        })
                                    }
                                }
                            })
                        }
                    }
                })
            },
            
            //点击保存到相册
            saveShareImg: function () {
                var that = this;
                wx.showLoading({
                    title: \'正在保存\',
                    mask: true,
                })
                setTimeout(function () {
                    wx.canvasToTempFilePath({
                        canvasId: \'myCanvas\',
                        fileType: \'jpg\',
                        success: function (res) {
                            wx.hideLoading();
                            var tempFilePath = res.tempFilePath;
                            wx.saveImageToPhotosAlbum({
                                filePath: tempFilePath,
                                success(res) {
                                    wx.showModal({
                                        content: \'图片已保存到相册，赶紧晒一下吧~\',
                                        showCancel: false,
                                        confirmText: \'好的\',
                                        confirmColor: \'#333\',
                                        success: function (res) {
                                            
                                        },
                                        fail: function (res) { 
                                            wx.showToast({
                                                title: \'系统繁忙，请稍后重新尝试！\',
                                                icon: \'none\',
                                                duration: 2000
                                            })
                                        }
                                    })
                                },
                                fail: function (res) {
                                    wx.showToast({
                                        title: res.errMsg,
                                        icon: \'none\',
                                        duration: 2000
                                    })
                                }
                            })
                        }
                    });
                }, 1000);
            },
            
            // 设置文字大小，并填充颜色。
            drawFont: function (ctx, contentTitle, x, y, x1, y1,x2,y2,fontSize,color) {
                let that = this;
                let str = contentTitle;
                let firstline;
                ctx.setFontSize(fontSize);
                ctx.setFillStyle(color);
                ctx.fillText(firstline, x + x1, y + y1);
                
            },
        },
    }