保存海报
# 效果图
# canvas绘制海报代码示例
# html示例
<u-popup class="cert-popup" duration="0" :show="showCertModal" mode="center" :closeOnClickOverlay="true"
@close="showCertModal=false">
<canvas type="2d" id="canvasCert" style="width:375px;height:292px" />
<view class="save-img flex-center" @click="savepicture">保存证书到相册</view>
</u-popup>
1
2
3
4
5
2
3
4
5
# js示例--绘制海报
download() {
if (this.allGain == 0) {
this.showModal = true
return
}
this.showCertModal = true
uni.showLoading({
title: '证书生成中...',
mask: true,
})
let that = this
const query = uni.createSelectorQuery().select('#canvasCert').fields({
node: true,
size: true
}).exec((resCanvas) => {
const canvas = resCanvas[0].node
const ctx = canvas.getContext('2d')
const width = 375
const height = 292
const dpr = uni.getWindowInfo().pixelRatio
canvas.width = width * dpr
canvas.height = height * dpr
ctx.scale(dpr, dpr)
ctx.clearRect(0, 0, width, height)
const bg = canvas.createImage()
bg.src =
'https://youth-leadership-1310013422.cos.ap-shanghai.myqcloud.com/be6f0ec42ed70c3f7110487ccf9266579892cff655a8428f82273ca6da7f9a8d.png'
bg.onload = () => {
ctx.drawImage(bg, 0, 0, 375, 292);
const scrolLogo = canvas.createImage()
// scrolLogo.src =
// 'https://youth-leadership-1310013422.cos.ap-shanghai.myqcloud.com/cef436e7d83484428e544737834bf90a1a3c8df455bba46531638031bdb1cf03.png'
scrolLogo.src = that.tenantImagePath || 'https://youth-leadership-1310013422.cos.ap-shanghai.myqcloud.com/3f356d8b8daec9a6c5da751b9e010c62e1dbacd1809a03f5742ec5e64c858a5b.png'
scrolLogo.onload = () => {
ctx.drawImage(scrolLogo, 120, 239, 96.4, 38.3);
uni.canvasToTempFilePath({
canvas,
width: 375,
height: 292,
destWidth: 1500,
destHeight: 1168,
success(res) {
uni.hideLoading()
that.tempFilePath = res.tempFilePath;
},
fail(err) {
uni.hideLoading()
console.log("失败拿到canvas的图片");
}
});
}
// 证书上用户名称
let name = that.nickName || '微信用户'
ctx.fillStyle = '#000000'
ctx.font = '12px'
ctx.fillText(name, (375 - ctx.measureText(name).width) / 2, 120)
// 证书日期
let certDate = that.certDate || 'March 20，2023'
ctx.fillStyle = '#000000'
ctx.font = '8px'
ctx.fillText(certDate, (375 - ctx.measureText(certDate).width) / 2, 222)
}
})
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
# js示例--保存海报
savepicture() {
uni.showLoading({
title: '证书保存中...',
mask: true,
})
let that = this;
uni.getSetting({
success(res) {
//查看是否授权保存到相册
if (res.authSetting["scope.writePhotosAlbum"]) {
//为true 已授权
that.savePicureFn()
} else if (res.authSetting["scope.writePhotosAlbum"] === undefined) {
//没有授权过，出现授权弹窗
uni.authorize({
scope: "scope.writePhotosAlbum",
success() {
//成功保存图片
that.savePicureFn()
},
fail() {
//失败无法授权
uni.showToast({
title: '您没有授权，无法保存到相册',
duration: 2000
})
uni.hideLoading()
that.showCertModal = false
}
});
} else {
//拒绝授权，让用户可以打开授权
uni.openSetting({
success(res) {
//成功保存图片
if (res.authSetting["scope.writePhotosAlbum"]) {
that.savePicureFn()
} else {
uni.showToast({
title: '您没有授权，无法保存到相册',
duration: 3000
})
uni.hideLoading()
that.showCertModal = false
}
}
});
}
}
});
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
上次更新: 2023/07/04, 13:35:40