cloud-web-corejs 1.0.123 → 1.0.124
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -20,12 +20,15 @@
|
|
|
20
20
|
></outLink>
|
|
21
21
|
</template>
|
|
22
22
|
<unreadDialog></unreadDialog>
|
|
23
|
+
<watermark></watermark>
|
|
23
24
|
</section>
|
|
24
25
|
</template>
|
|
25
26
|
|
|
26
27
|
<script>
|
|
27
28
|
import outLink from '@base/views/user/outLink/index.vue';
|
|
28
29
|
import unreadDialog from "../../layout/components/notify_message/unreadDialog.vue";
|
|
30
|
+
import watermark from "./watermark";
|
|
31
|
+
|
|
29
32
|
|
|
30
33
|
export default {
|
|
31
34
|
name: 'AppMain',
|
|
@@ -43,7 +46,8 @@ export default {
|
|
|
43
46
|
},
|
|
44
47
|
components: {
|
|
45
48
|
outLink,
|
|
46
|
-
unreadDialog
|
|
49
|
+
unreadDialog,
|
|
50
|
+
watermark
|
|
47
51
|
},
|
|
48
52
|
data() {
|
|
49
53
|
return {
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="watermarkFlag" :style="'background:url('+imgUrl+')'"></div>
|
|
3
|
+
</template>
|
|
4
|
+
<script>
|
|
5
|
+
import {
|
|
6
|
+
getParameterVauleByCode,
|
|
7
|
+
} from '@base/api/user'
|
|
8
|
+
export default {
|
|
9
|
+
data() {
|
|
10
|
+
return {
|
|
11
|
+
imgUrl: null,
|
|
12
|
+
isFormDev:false
|
|
13
|
+
}
|
|
14
|
+
},
|
|
15
|
+
created() {
|
|
16
|
+
this.init();
|
|
17
|
+
},
|
|
18
|
+
methods: {
|
|
19
|
+
initIsFormDev() {
|
|
20
|
+
let userFlag = this.$store.getters.userFlag
|
|
21
|
+
this.isFormDev = userFlag == 6 || userFlag == 7 || userFlag == 8;
|
|
22
|
+
},
|
|
23
|
+
init() {
|
|
24
|
+
this.initIsFormDev();
|
|
25
|
+
if(this.isFormDev)return;
|
|
26
|
+
getParameterVauleByCode({
|
|
27
|
+
data: {"code": "showWatermark"},
|
|
28
|
+
success: res => {
|
|
29
|
+
let value = (!res.objx || !res.objx.value) ? "0" : res.objx.value;
|
|
30
|
+
if (value == "1") {
|
|
31
|
+
this.watermarkImg();
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
})
|
|
35
|
+
},
|
|
36
|
+
watermarkImg() {
|
|
37
|
+
let that = this
|
|
38
|
+
const testName = this.$store.getters.nickName
|
|
39
|
+
var nameL = ''
|
|
40
|
+
if (testName.match(/[^\x00-\xff]/ig) != null){
|
|
41
|
+
nameL = testName.length
|
|
42
|
+
}else{
|
|
43
|
+
nameL = testName.length / 2
|
|
44
|
+
}
|
|
45
|
+
// 通过canvas将文本生成图片
|
|
46
|
+
const canvas = document.createElement('canvas')
|
|
47
|
+
canvas.width = nameL * 32 * 2
|
|
48
|
+
canvas.height = nameL * 32
|
|
49
|
+
const ctx = canvas.getContext('2d')
|
|
50
|
+
|
|
51
|
+
ctx.font = '18px PingFangSC'
|
|
52
|
+
ctx.textAlign = 'center'
|
|
53
|
+
ctx.fillStyle = '#EEEEEE'
|
|
54
|
+
// 设置倾斜角度
|
|
55
|
+
ctx.rotate(-30 * Math.PI / 180)
|
|
56
|
+
// 调整偏移量，让文本完整显示
|
|
57
|
+
ctx.translate(-50, 30)
|
|
58
|
+
ctx.fillText(testName, 100, 58)
|
|
59
|
+
// 将canvas转为base64图片
|
|
60
|
+
const url = canvas.toDataURL()
|
|
61
|
+
that.imgUrl = url
|
|
62
|
+
console.log(that.imgUrl)
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
</script>
|
|
67
|
+
<style scoped>
|
|
68
|
+
.watermarkFlag {
|
|
69
|
+
/* 设置全屏宽高，覆盖于页面上方 */
|
|
70
|
+
position: fixed;
|
|
71
|
+
top: 0;
|
|
72
|
+
left: 0;
|
|
73
|
+
height: 100vh;
|
|
74
|
+
width: 100vw;
|
|
75
|
+
opacity: 0.8;
|
|
76
|
+
/* 生成的图片是有一张，开启repeat自动填充 */
|
|
77
|
+
background: repeat;
|
|
78
|
+
pointer-events: none;
|
|
79
|
+
/* 核心部分，决定水印层与内容部分的结合方式 */
|
|
80
|
+
mix-blend-mode: multiply;
|
|
81
|
+
z-index: 9999999;
|
|
82
|
+
}
|
|
83
|
+
</style>
|