|
|
@ -95,6 +95,7 @@ |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<canvas id="watermarkCanvas1" class="canvas"> </canvas> |
|
|
</el-card> |
|
|
</el-card> |
|
|
</div> |
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
|
@ -158,7 +159,7 @@ export default { |
|
|
return { |
|
|
return { |
|
|
minHeight: 'calc(88vh - 50px)', |
|
|
minHeight: 'calc(88vh - 50px)', |
|
|
overflow: 'auto', |
|
|
overflow: 'auto', |
|
|
position: 'relative' |
|
|
position: 'ab' |
|
|
} |
|
|
} |
|
|
} else { |
|
|
} else { |
|
|
return {} |
|
|
return {} |
|
|
@ -166,9 +167,11 @@ export default { |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
mounted() { |
|
|
mounted() { |
|
|
|
|
|
|
|
|
this.user = this.$store.state.user; |
|
|
this.user = this.$store.state.user; |
|
|
this.phone = this.$store.state.user.phone; |
|
|
this.phone = this.$store.state.user.phone; |
|
|
this.realName = this.$store.state.user.realName; |
|
|
this.realName = this.$store.state.user.realName; |
|
|
|
|
|
// this.getCanvas() |
|
|
if (this.eventId) { |
|
|
if (this.eventId) { |
|
|
this.info = JSON.parse(JSON.stringify(this.eventDetailData)); |
|
|
this.info = JSON.parse(JSON.stringify(this.eventDetailData)); |
|
|
} |
|
|
} |
|
|
@ -182,6 +185,30 @@ export default { |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
methods: { |
|
|
methods: { |
|
|
|
|
|
// getCanvas() { |
|
|
|
|
|
// var canvas = document.getElementById('watermarkCanvas1'); |
|
|
|
|
|
// var ctx = canvas.getContext('2d'); |
|
|
|
|
|
// canvas.width = window.innerWidth ; // 设置更高的分辨率 |
|
|
|
|
|
// canvas.height = window.innerHeight ; |
|
|
|
|
|
// var watermarkText = this.realName+ this.phone; //内容 |
|
|
|
|
|
// ctx.font = '12px Arial'; //大小 |
|
|
|
|
|
// ctx.fillStyle = 'rgba(0, 0, 255, 0.2)'; //颜色+透明度 |
|
|
|
|
|
// // ctx.textBaseline = 'middle'; |
|
|
|
|
|
// ctx.scale(2, 2); // 缩放上下文以适应更高分辨率 |
|
|
|
|
|
// var angle = -30 * Math.PI / 180; // 旋转-30度 |
|
|
|
|
|
// var x = canvas.width / 2; |
|
|
|
|
|
// var y = canvas.height / 2; |
|
|
|
|
|
// var space = 150; // 水印间距 |
|
|
|
|
|
// for (var i = 0; i < canvas.width; i += space) { |
|
|
|
|
|
// for (var j = 0; j < canvas.height; j += space) { |
|
|
|
|
|
// ctx.save(); |
|
|
|
|
|
// ctx.translate(i, j); |
|
|
|
|
|
// ctx.rotate(angle); |
|
|
|
|
|
// ctx.fillText(watermarkText, 0, 0); |
|
|
|
|
|
// ctx.restore(); |
|
|
|
|
|
// } |
|
|
|
|
|
// } |
|
|
|
|
|
// }, |
|
|
watchImg(src) { |
|
|
watchImg(src) { |
|
|
window.open(src); |
|
|
window.open(src); |
|
|
}, |
|
|
}, |
|
|
@ -199,7 +226,14 @@ export default { |
|
|
</script> |
|
|
</script> |
|
|
<style lang="scss" scoped> |
|
|
<style lang="scss" scoped> |
|
|
@import "@/assets/scss/modules/shequzhili/event-info.scss"; |
|
|
@import "@/assets/scss/modules/shequzhili/event-info.scss"; |
|
|
|
|
|
.canvas { |
|
|
|
|
|
z-index: 10; |
|
|
|
|
|
position: fixed; |
|
|
|
|
|
top: 0; |
|
|
|
|
|
left: 0; |
|
|
|
|
|
pointer-events: none; |
|
|
|
|
|
/* 确保canvas不干扰其他元素 */ |
|
|
|
|
|
} |
|
|
.flex-end { |
|
|
.flex-end { |
|
|
display: flex; |
|
|
display: flex; |
|
|
margin-bottom: 10px; |
|
|
margin-bottom: 10px; |
|
|
|