小程序實現分銷海報

小程序實現分銷海報

 

1、簡介：

　　用戶生成屬於自己的海報，其他人掃碼此圖片上的二維碼，進入相應的小程序頁面，同時帶上相關的參數 parent_id 從而綁定上下級關系；

注意：一下是微信小程序的實現方法；支付寶基本同樣，只有稍微小的部分修改，例如：支付寶小程序不需要調起授權保存相冊，會在你使用的時候自動調用

2、例如海報：

3、分銷海報包含了：

　　1、海報背景（可選擇更換）；

　　2、個人二維碼；

　　3、用戶個人信息；姓名、頭像等

　　4、海報長按保存功能；

4、實現原理：

　　海報圖、以及個人二維碼(掃碼可跳轉小程序固定一個頁面)由后台接口返回兩張圖片；前台使用canvas將此海報繪制出來；

5、html代碼

微信小程序方法

<canvas class="mycanvas" canvas-id="myCanvas" :style="{height: canvasHeight + 'px',width: canvasWidth+ 'px'}" 
　　@longtap="getAuthAndSaveImg">
</canvas>

支付寶小程序方法

 

<canvas 
                id="canvas"
                :style="{height: canvasHeight + 'px',width: canvasWidth+ 'px'}"
                class="canvas"
                @longtap="getAuthAndSaveImg"
/>

 

 

 

6、js代碼：

　　注意：canvas將圖片繪制，必須將網絡圖片下載到本地，或者使用本地圖片也是可以的

 export default {
        data() {
            return {
                cardData:'',
                avatarImg: '',     // 用戶頭像
                avatarContent: '', // 文字
                codeUrl: '',        // 二維碼圖片
                canvasWidth: 0,     // 畫布大小
                canvasHeight: 0,
                codeTestPicBg: ''   // 背景圖
            }
        },
        onLoad() {
            this.loadImg();
        },
        methods: {
            // 生成確定畫布大小
            loadImg(){
                let that = this;
                // 獲取系統信息  支付寶小程序這里只需要將 wx. 改為 my.
                wx.getSystemInfo({
                    success: function (res) {   
                        that.canvasWidth = res.windowWidth * 1;
                        that.canvasHeight = res.windowHeight * 1;
                        that.getAvatarImgurl();
                    }
                });
                
            },
            
            // 獲取用戶信息
            getAvatarImgurl(){
                let that = this;
                uni.getStorage({
                    key: 'scopeUserInfo',
                    success: function (res) {
                        that.avatarImg = res.data.avatarUrl;
                        that.avatarContent = '您的好友' + res.data.nickName + '為您分享！'
                        that.downloadAvar();
                    }
                });
            },
            
            // 下載用戶頭像  支婦保小程序同樣也需要先下載
            downloadAvar(){
                let that = this;
　　　　　　　　　　// 支付包小程序 同樣wx 改為 my ；返回值 tempFilePath 改為 apFilePath
                wx.downloadFile({ 
                    url: that.avatarImg,
                    success: function (res) {
                        that.avatarImg = res.tempFilePath
                        wx.hideLoading();
                        that.getTempFile();
                    },
                    fail: function (err) {
                        wx.showToast({
                            title: "下載頭像敗,稍后重試！",
                            icon: "none",
                            duration: 5000
                        });
                    }
                });
            },
            
            // 獲取CODE嗎
            getTempFile: function () {
                let that = this;
                request.post(that.websiteUrl + '/api/v4/drp/create/applet/code',{
                    goods_id: 0,
                    scene: '' + 0 + '&' + this.drpdata.shop_info.user_id,
                    shop_id: this.drpdata.shop_info.id
                }).then(res=>{
                    //繼續生成商品的小程序碼
                    that.downloadCodepic(res.data.url);
                })
            },
            
            // 下載code碼
            downloadCodepic(url){
                let that = this;
                wx.downloadFile({
                 url: 'https://' + url,
                 success: function (res) {
                     that.codeUrl = res.tempFilePath
                     wx.hideLoading();
                     that.downloadBgCard();
                 },
                 fail: function (err) {
                     wx.showToast({
                         title: "下載二維碼失敗,稍后重試！",
                         icon: "none",
                         duration: 5000
                     });
                 }
                });
            },
            
            // 下載背景圖
            downloadBgCard(){
                let that = this;
                wx.downloadFile({
                 url: 'https://feiquanshijie-oss.oss-cn-hangzhou.aliyuncs.com/data/attached/qrcode/themes/20130815061226_k3jWZ.png?v=1582584928',
                 success: function (res) {
                     console.log(res)
                     that.codeTestPicBg = res.tempFilePath
                     wx.hideLoading();
                     //生成數據
                     that.setCanvas();
                 },
                 fail: function (err) {
                     wx.showToast({
                         title: "下載背景圖失敗,稍后重試！",
                         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);
                
            },
        },
    }

 支付寶小程序繪制 以及 長安下載；支付寶小程序不需要去判斷授權 直接下載就行 會自動調用授權

draw() {
                const ctx = my.createCanvasContext('canvas')
                
                ctx.drawImage(this.codeTestPicBg, 0, 0, this.canvasWidth, this.canvasHeight);
                ctx.drawImage(this.avatarImg, 30, 40, 50, 50);
                var numH = 1.234*(this.canvasWidth/2);
                ctx.drawImage(this.codeUrl, this.canvasWidth/4, this.canvasWidth/3, this.canvasWidth/2,numH);
                
                ctx.setFontSize(16)
                ctx.fillText('長按保存圖片', 140, 20);
                ctx.fillText(this.avatarContent, 100, 70);
                
                ctx.globalCompositeOperation = "source-over";
                ctx.draw()
            },
            
            
            // 長安圖片  點擊保存到相冊
            getAuthAndSaveImg(){
                var that = this;
                my.showLoading({
                    title: '正在保存',
                    mask: true,
                })
                setTimeout(function () {
                    const ctx = my.createCanvasContext('canvas');
                    ctx.toTempFilePath({
                        fileType: 'jpg',
                        success: function (res) {
                            my.hideLoading();
                            var tempFilePath = res.apFilePath;
                            my.saveImage({
                                url: tempFilePath,
                                showActionSheet: true,
                                success(res) {
                                    my.alert({
                                        title: '溫馨提示',
                                        content: '圖片已保存到相冊，趕緊曬一下吧~',
                                        buttonText: '我知道了',
                                        success: function (res) {
                                            
                                        },
                                        fail: function (res) { 
                                            my.showToast({
                                                title: '系統繁忙，請稍后重新嘗試！',
                                                icon: 'none'
                                            })
                                        }
                                    })
                                },
                                fail: function (res) {
                                    my.showToast({
                                        title: res.errMsg,
                                        icon: 'none'
                                    })
                                }
                            })
                        }
                    });
                }, 1000);
            },

 

7、上下級關系處理：

　　例如掃碼后跳轉商城首頁，那么在首頁的onload 事件中，拿到 e ，便能拿到相應的傳遞的參數，例如：parent_id

onLoad(e) {
    if(e.parent_id){
        this.user_id = e.parent_id;
        uni.setStorageSync('isplatformUserID', this.user_id);
    }
            
},

 

8、canvas兩個圖片重疊時顯示的方法——globalCompositeOperation