1 // 绘制海报 2 drawPoster() { 3 uni.showLoading({ 4 title:'加载中...', 5 mask:true 6 }) 7 let _this = this 8 _this.isShow = true 9 let info = uni.getSystemInfoSync() 10 const pixelRatio = info.pixelRatio // 屏幕像素密度 11 uni.getImageInfo({ 12 src: _this.detail.avatarUrl || _this.userInfo.avatarUrl, 13 success(image) { 14 const canvasId = "guideQYCard" 15 let ctx = uni.createCanvasContext(canvasId,_this) 16 ctx.save(); // 先保存状态 已便于画完圆再用 17 ctx.beginPath(); //开始绘制 18 ctx.setFillStyle('white') 19 ctx.fillRect(0, 0, uni.upx2px(_this.cardWidth), uni.upx2px(_this.cardHeight)) 20 ctx.restore(); 21 let ratio = _this.cardWidth/image.width 22 let draw_h = image.height*ratio 23 // _this.cardHeight = draw_h 24 ctx.drawImage(image.path,0,0,uni.upx2px(_this.cardWidth),uni.upx2px(draw_h)) // 海报 25 // 绘制 昵称 26 ctx.save(); // 先保存状态 已便于画完圆再用 27 const name_size = 28 28 const name_x = 24 29 const name_y = 511 30 ctx.setFillStyle('#FFFFFF') 31 ctx.setTextBaseline('top') 32 ctx.setFontSize(uni.upx2px(name_size)) 33 ctx.fillText(_this.detail.name, uni.upx2px(name_x), uni.upx2px(name_y)) 34 const position_size = 24 35 const position_x = 24 36 const position_y = 554 37 ctx.setFontSize(uni.upx2px(position_size)) 38 ctx.fillText(_this.detail.position, uni.upx2px(position_x), uni.upx2px(position_y)) 39 // 绘制 小程序码 40 uni.getImageInfo({ 41 src: _this.detail.qrCode, 42 success(res){ 43 const size = 180 44 const x = 40 45 const y = 35 46 const img_x = _this.cardWidth - size - x 47 const img_y = _this.cardHeight - size - y 48 const img_w = size 49 const img_h = img_w 50 ctx.drawImage(res.path,uni.upx2px(img_x),uni.upx2px(img_y),uni.upx2px(img_w),uni.upx2px(img_h)) // 头像 51 ctx.draw(false, () => { 52 uni.canvasToTempFilePath({ 53 _this.cardWidth, 54 height: _this.cardHeight, 55 destWidth: _this.cardWidth * pixelRatio, 56 destHeight: _this.cardHeight *pixelRatio, 57 canvasId: canvasId, 58 fileType: 'png', 59 quality:1, 60 success: function(res) { 61 _this.posterImg = res.tempFilePath 62 _this.showCloseBtn = true 63 console.log(_this.posterImg) 64 uni.hideLoading() 65 }, 66 fail(error) { 67 console.log('4',error) 68 _this.isShow = false 69 uni.showLoading({ 70 title:'加载失败，请稍后重试', 71 mask:true 72 }) 73 uni.hideLoading() 74 } 75 },_this) 76 }) 77 }, 78 fail(error) { 79 console.log('3',error) 80 uni.showLoading({ 81 title:'加载失败，请稍后重试', 82 mask:true 83 }) 84 _this.isShow = false 85 uni.hideLoading() 86 } 87 }) 88 }, 89 fail(error) { 90 console.log('1',error) 91 _this.isShow = false 92 uni.showLoading({ 93 title:'加载失败，请稍后重试', 94 mask:true 95 }) 96 uni.hideLoading() 97 } 98 }); 99 }
这里需要注意的是 白色背景需要绘制，否则 用户下载下来 背景是黑色的。然而，在 html5 中canvas 背景色可以在css 中设置。
