vue 项目全局添加水印
全局添加水印的思路:相当于加了一个层级很高的canvas1,新建遮罩waterMark.js'use strict'let watermark = {}let setWatermark = (str) => {let id = '1.23452384164.123412415'if (document.getElementById(id) !== null) {document.body.r
·
全局添加水印的思路:相当于加了一个层级很高的canvas
1,新建遮罩waterMark.js
'use strict'
let watermark = {}
let setWatermark = (str) => {
let id = '1.23452384164.123412415'
if (document.getElementById(id) !== null) {
document.body.removeChild(document.getElementById(id))
}
let can = document.createElement('canvas')
can.width = 500
can.height = 250
let cans = can.getContext('2d')
cans.rotate(-20 * Math.PI / 180)
cans.font = '20px Microsoft JhengHei'
cans.fillStyle = 'rgba(200, 200, 200, 1)'
cans.textAlign = 'left'
cans.textBaseline = 'Middle'
cans.fillText(str, can.width / 3, can.height / 2)
let div = document.createElement('div')
div.id = id
div.style.pointerEvents = 'none'
div.style.top = '70px'
div.style.left = '0px'
div.style.position = 'fixed'
div.style.zIndex = '100000'
div.style.width = document.documentElement.clientWidth - 100 + 'px'
div.style.height = document.documentElement.clientHeight - 100 + 'px'
div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat'
document.body.appendChild(div)
return id
}
// 该方法只允许调用一次
watermark.set = (str) => {
let id = setWatermark(str)
setInterval(() => {
if (document.getElementById(id) === null) {
id = setWatermark(str)
}
}, 500)
window.onresize = () => {
setWatermark(str)
}
}
export default watermark
2,在app.vue页面引入并使用
import WaterMark from './util/waterMark'
在页面加载完成时使用
mounted: function () {
Watermark.set('要添加的水印内容')
}
另一种方法是可以自定义指令添加水印
1,新建指令directives.js
import Vue from 'vue'
/**
* author: zuokun
* 水印
* text:水印文字
* font:字体
* textColor:文字颜色
* width:宽度
* height:高度
* textRotate:偏转度 -90到0, 负数值,不包含-90
*/
Vue.directive('watermark', (el, binding) => {
let text = binding.value.text;
let font = binding.value.font || "16px Microsoft JhengHei";
let textColor = binding.value.textColor || "rgba(215, 215, 215, 0.2)";
let width = binding.value.width || 400;
let height = binding.value.height || 200;
let textRotate = binding.value.textRotate || -20;
function addWaterMarker(parentNode) {
var can = document.createElement('canvas');
parentNode.appendChild(can);
can.width = width;
can.height = height;
can.style.display = 'none';
var cans = can.getContext('2d');
cans.rotate(textRotate * Math.PI / 180);
cans.font = font;
cans.fillStyle = textColor;
cans.textAlign = 'left';
cans.textBaseline = 'Middle';
cans.fillText(text, 0, can.height);
parentNode.style.backgroundImage = "url(" + can.toDataURL("image/png") + ")";
}
addWaterMarker(el)
})
在app.vue页面引入并使用
import './utils/directives.js'
在data里面可以自定义水印样式
watermarkConfig:{//水印
text:'测试水印',
font:'20px 微软雅黑',
textColor:'#bcbcbc',
width : 300, //水印文字的水平间距
height : 200, //水印文字的高度间距(低于文字高度会被替代)
extRotate : -30 //-90到0, 负数值,不包含-90
}
在页面加载完成时使用
<div id="vue" v-watermark="watermarkConfig">
<router-view />
</div>
注意:canvas里面可以任意修改自己想要的格式,全局添加水印的思路就是利用canvas画布填充水印
更多推荐
已为社区贡献3条内容
所有评论(0)