uniapp - 绘制海报（二） - kitty20180903suzhou

公告

View Post

uniapp - 绘制海报（二）

 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                                       width: _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 中设置。
posted on 2020-09-27 15:42 kitty20180903suzhou 阅读(498) 评论(0) 收藏举报
刷新页面返回顶部
我的博客我做主

公告

View Post

uniapp - 绘制海报（二）
