uniapp - 绘制海报（一）

　　　　　　// 绘制海报
            drawPoster() {
                uni.showLoading({
                    title:"海报生成中...",
                    mask:true
                })
                let _this = this
                _this.isShow = true // 控制canvas 显示，必须显示的状态下，才可绘制
                let info = uni.getSystemInfoSync()
                const pixelRatio = info.pixelRatio // 屏幕像素密度
                uni.getImageInfo({
                    src: _this.poster, //_this_pupop.image
                    success(image) {
                        const canvasId = "guidePopop"
                        let  ctx = uni.createCanvasContext(canvasId,_this) // 自定义组件中 一定要传入 this ，这里一开始没加，困惑很久，一定要写一下
                        let ratio = _this.pupopWidth/image.width
                        let draw_h = image.height*ratio
                        _this.pupopHeight = draw_h
                        ctx.drawImage(image.path,0,0,uni.upx2px(_this.pupopWidth),uni.upx2px(draw_h)) // 海报背景图。 unp2px 用户进行像素转换。
                        // 绘制头像
                        uni.getImageInfo({
                            src: _this.userInfo.avatarUrl,
                            success(res){
                                const size = 76
                                const x = 36
                                const y = 36
                                const acr_r = size/2
                                const acr_x = x+acr_r
                                const acr_y = y+acr_r
                                const img_x = acr_x/2
                                const img_y = acr_y/2
                                const img_w = size
                                const img_h = img_w
                                ctx.save(); // 先保存状态 已便于画完圆再用
                                ctx.beginPath(); //开始绘制
                                //先画个圆
                                ctx.arc(uni.upx2px(acr_x), uni.upx2px(acr_y),uni.upx2px(acr_r), 0, Math.PI * 2);
                                ctx.setFillStyle('#ffffff')
                                ctx.fill()//保证图片无bug填充
                                ctx.clip();//画了圆 再剪切 原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内
                                ctx.drawImage(res.path,uni.upx2px(img_x),uni.upx2px(img_y),uni.upx2px(img_w),uni.upx2px(img_h)) // 头像
                                ctx.restore();
                                // 绘制 昵称
                                ctx.save(); // 先保存状态 已便于画完圆再用
                                const text_size = 28
                                const text_x = x + img_w + 29
                                const text_y = 64
                                ctx.setFillStyle('#FFFFFF')
                                ctx.setTextBaseline('top') 
                                ctx.setFontSize(uni.upx2px(text_size))
                                ctx.fillText('Hi  '+_this.userInfo.nickName, uni.upx2px(text_x), uni.upx2px(text_y))
                                // 绘制 小程序码
                                uni.getImageInfo({
                                    src: _this.inviteQR,
                                    success(res){
                                        const size = 160
                                        const img_x = _this.pupopWidth - size - x
                                        const img_y = _this.pupopHeight - size - y
                                        const img_w = size
                                        const img_h = img_w
                                        ctx.drawImage(res.path,uni.upx2px(img_x),uni.upx2px(img_y),uni.upx2px(img_w),uni.upx2px(img_h)) // 头像
                                        ctx.draw(false, () => {
                                            uni.canvasToTempFilePath({
                                              width: _this.pupopWidth,
                                              height: draw_h,
                                              destWidth: _this.pupopWidth * pixelRatio,
                                              destHeight: draw_h *pixelRatio,
                                              canvasId: canvasId,
                                              fileType: 'png',
                                              quality:1,
                                              success: function(res) {
                                                _this.posterImg = res.tempFilePath
                                                _this.showCloseBtn = true
                                                console.log(_this.posterImg)
                                                uni.hideLoading()
                                              },
                                              fail(error) {
                                                console.log('4',error)
                                                _this.isShow = false
                                                uni.showLoading({
                                                    title:'生成海报失败，请稍后重试',
                                                    mask:true
                                                })
                                                uni.hideLoading()
                                              }
                                            },_this)
                                        })
                                    },
                                    fail(error) {
                                        console.log('3',error)
                                        uni.showLoading({
                                            title:'生成海报失败，请稍后重试',
                                            mask:true
                                        })
                                        _this.isShow = false
                                        uni.hideLoading()
                                    }
                                })
                            },
                            fail(error) {
                                console.log('2',error)
                                uni.showLoading({
                                    title:'生成海报失败，请稍后重试',
                                    mask:true
                                })
                                _this.isShow = false
                                uni.hideLoading()
                            }
                        })
                     },
                     fail(error) {
                         console.log('1',error)
                        _this.isShow = false
                        uni.showLoading({
                            title:'生成海报失败，请稍后重试',
                            mask:true
                        })
                         uni.hideLoading()
                     }
                });
            },

            savePhoto(filePath){ // 保存海报
                
                checkForAuthorization('scope.writePhotosAlbum').then(()=>{ // 上一篇有提到
                    uni.saveImageToPhotosAlbum({
                        filePath:filePath,
                        success: function () {
                            uni.hideLoading()
                        },
                        fail: function(e){
                            uni.hideLoading()
                            if(e.errMsg == "saveImageToPhotosAlbum:fail cancel"){
                                uni.showToast({
                                    title:"已取消",
                                    icon:"none"
                                })
                            }else{
                                uni.showToast({
                                    title:"保存失败",
                                    icon:"none"
                                })
                            }
                        }
                    })
                }).catch((err)=>{
                    console.log(err.errMsg)
                    uni.showToast({
                        title:"保存失败",
                        icon:"none"
                    })
                })
            },

这里只展示了主要的绘制代码，绘制的海报图如下图，绘制内容已标记。背景 + 用户头像 + 用户昵称 + 小程序码 ，

这个弹窗是自定义组件，

uni.createCanvasContext(canvasId,_this) // 自定义组件中 一定要传入 this ，这里一开始没加，困惑很久，一定要写一下

uni.draw(boolean,()=>{},_this) // 自定义组件中 一定要传入 this ，这里一开始没加，困惑很久，一定要写一下