uniapp - 绘制海报（二）

// 绘制海报
            drawPoster() {
                uni.showLoading({
                    title:'加载中...',
                    mask:true
                })
                let _this = this
                _this.isShow = true
                let info = uni.getSystemInfoSync()
                const pixelRatio = info.pixelRatio // 屏幕像素密度
                uni.getImageInfo({
                    src: _this.detail.avatarUrl || _this.userInfo.avatarUrl,
                    success(image) {
                        const canvasId = "guideQYCard"
                        let  ctx = uni.createCanvasContext(canvasId,_this)
                        ctx.save(); // 先保存状态 已便于画完圆再用
                        ctx.beginPath(); //开始绘制
                        ctx.setFillStyle('white')
                        ctx.fillRect(0, 0, uni.upx2px(_this.cardWidth), uni.upx2px(_this.cardHeight))
                        ctx.restore();
                        let ratio = _this.cardWidth/image.width
                        let draw_h = image.height*ratio
                        // _this.cardHeight = draw_h
                        ctx.drawImage(image.path,0,0,uni.upx2px(_this.cardWidth),uni.upx2px(draw_h)) // 海报
                        // 绘制 昵称
                        ctx.save(); // 先保存状态 已便于画完圆再用
                        const name_size = 28
                        const name_x = 24
                        const name_y = 511
                        ctx.setFillStyle('#FFFFFF')
                        ctx.setTextBaseline('top') 
                        ctx.setFontSize(uni.upx2px(name_size))
                        ctx.fillText(_this.detail.name, uni.upx2px(name_x), uni.upx2px(name_y))
                        const position_size = 24
                        const position_x = 24
                        const position_y = 554
                        ctx.setFontSize(uni.upx2px(position_size))
                        ctx.fillText(_this.detail.position, uni.upx2px(position_x), uni.upx2px(position_y))
                        // 绘制 小程序码
                        uni.getImageInfo({
                            src: _this.detail.qrCode,
                            success(res){
                                const size = 180
                                const x = 40
                                const y = 35
                                const img_x = _this.cardWidth - size - x
                                const img_y = _this.cardHeight - 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.cardWidth,
                                      height: _this.cardHeight,
                                      destWidth: _this.cardWidth * pixelRatio,
                                      destHeight: _this.cardHeight *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('1',error)
                        _this.isShow = false
                        uni.showLoading({
                            title:'加载失败，请稍后重试',
                            mask:true
                        })
                         uni.hideLoading()
                     }
                });
            }

这里需要注意的是 白色背景需要绘制，否则 用户下载下来 背景是黑色的。然而，在 html5 中canvas 背景色可以在css 中设置。