DZ/faw-report-library-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化水印显示（减少对展示内容的影响）

Browse Source
This commit is contained in:
danshihao
2022-11-15 11:44:37 +08:00
parent 31b00d5cae
commit c27a4674eb
5 changed files with 49 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/utils/warterMark.js → src/utils/waterMark.js
+19 -20
View File
@@ -9,7 +9,7 @@ import Vue from 'vue'
Vue.directive('watermark', {
bind: function(el, binding){
// 水印文字，父元素，画布宽度，画布高度，字体，文字颜色，画布横坐标，是否铺满全页
function addWaterMarker(str, parentNode, width, height, font, textColor, fillTextX = '10', isFull = false){
function addWaterMarker(str, parentNode, width, height, font, textColor, fillTextX = '10'){
// 检查父元素是否包含子元素
const elementContains = (parent, child) => parent !== child && parent.contains(child)
const flag = elementContains(parentNode, document.querySelector('canvas'))
@@ -17,37 +17,36 @@ Vue.directive('watermark', {
if (!flag) {
let can = document.createElement('canvas')
parentNode.appendChild(can)
can.width = width || 200
can.width = width || 300
can.height = height || 140
can.style.display = 'none'
let cans = can.getContext('2d')
cans.rotate(-20 * Math.PI / 180)
cans.font = font || '13px Microsoft Yahei'
cans.fillStyle = textColor || '#DDDDDD'
cans.fillStyle = textColor || 'rgba(100, 100, 100, 0.2)'
cans.textAlign = 'left'
cans.textBaseline = 'Middle'
cans.fillText(str, fillTextX, can.height)
// 设置背景图（整个项目中都添加水印建议使用此方法）
if(isFull) {
parentNode.style.backgroundImage = "url(" + can.toDataURL("image/png") + ")";
} else {
// 创建div 定位覆盖（某个元素，如图片添加水印建议使用此方法）
let div = document.createElement('div')
div.id = str
div.style.pointerEvents = 'none'
div.style.top = '0'
div.style.left = '0'
div.style.position = 'absolute'
div.style.zIndex = '100000'
div.style.width = '100%'
div.style.height = '100%'
div.style.background = 'url(' + can.toDataURL('image/png') + ')'
parentNode.appendChild(div)
}
// parentNode.style.backgroundImage = "url(" + can.toDataURL("image/png") + ")";
// 创建div 定位覆盖（某个元素，如图片添加水印建议使用此方法）
let div = document.createElement('div')
div.id = str
div.className = 'waterMark'
div.style.pointerEvents = 'none'
div.style.top = '0'
div.style.left = '0'
div.style.position = 'absolute'
div.style.zIndex = '100000'
div.style.width = '100%'
div.style.height = '100%'
div.style.background = 'url(' + can.toDataURL('image/png') + ')'
parentNode.appendChild(div)
}
}
if (binding.value.text) {
addWaterMarker(binding.value.text, el, binding.value.width, binding.value.height, binding.value.font, binding.value.textColor, binding.value.fillTextX, binding.value.isFull )
addWaterMarker(binding.value.text, el, binding.value.width, binding.value.height, binding.value.font, binding.value.textColor, binding.value.fillTextX)
}
}
})