1、在@/utils下新增一个名为waterMark.js的脚本
具体水印样式可以在代码里自行调节style
参数 - 水印内容, 加水印的容器, 是否显示时间
let watermark = {};
function getCurrentDateTime() {
const now = new Date();
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, "0");
const day = String(now.getDate()).padStart(2, "0");
const hours = String(now.getHours()).padStart(2, "0");
const minutes = String(now.getMinutes()).padStart(2, "0");
const seconds = String(now.getSeconds()).padStart(2, "0");
const dateTime = `${year}-${month}-${day}`;
return dateTime;
}
const currentDateTime = getCurrentDateTime();
let setWatermark = (text, sourceBody, isShowTime) => {
if (isShowTime) {
let time = getCurrentDateTime();
text = `${text}\n${time}`;
}
// console.log("水印文本", text);
let id =
Math.random() * 10000 +
"-" +
Math.random() * 10000 +
"/" +
Math.random() * 10000;
if (document.getElementById(id) !== null) {
document.body.removeChild(document.getElementById(id));
}
let can = document.createElement("canvas");
can.width = 180;
can.height = 75;
let cans = can.getContext("2d");
cans.rotate((-20 * Math.PI) / 180);
cans.font = "15px Vedana";
cans.fillStyle = "rgba(0, 0, 0, .5)";
cans.textAlign = "left";
cans.textBaseline = "Middle";
// let textLines = text.split("\n");
// textLines.forEach((line, index) => {
// cans.fillText(line, can.width / 20, can.height * (index + 1)); // 调整行高
// });
cans.fillText(text, can.width / 20, can.height);
let water_div = document.createElement("div");
water_div.id = id;
water_div.style.pointerEvents = "none";
water_div.style.background =
"url(" + can.toDataURL("image/png") + ") left top repeat";
water_div.style.zIndex = "100000";
water_div.style.whiteSpace = "pre";
water_div.style.opacity = "0.5";
if (sourceBody) {
water_div.style.width = "100%";
water_div.style.height = "100%";
water_div.style.position = "absolute";
water_div.style.top = "3px";
water_div.style.left = "0px";
sourceBody.appendChild(water_div);
} else {
water_div.style.top = "3px";
water_div.style.left = "0px";
water_div.style.position = "fixed";
water_div.style.width = document.documentElement.clientWidth + "px";
water_div.style.height = document.documentElement.clientHeight + "px";
document.body.appendChild(water_div);
}
return id;
};
/**
* 该方法只允许调用一次
* @param:
* @text == 水印内容
* @sourceBody == 水印添加在哪里,不传就是body
* @isShowTime == 是否显示时间
* */
watermark.set = (text, sourceBody, isShowTime) => {
let id = setWatermark(text, sourceBody, isShowTime);
setInterval(() => {
if (document.getElementById(id) === null) {
id = setWatermark(text, sourceBody, isShowTime);
}
}, 1000);
window.onresize = () => {
setWatermark(text, sourceBody, isShowTime);
};
};
export default watermark;
2、在main.js下进行全局注册
import watermark from '@/utils/waterMark.js'
Vue.prototype.$watermark = watermark
3、在vue组件中使用
<el-dialog :visible.sync="openFile">
<div id="fileDialog" ref="fileDialog" style="height:100%;width:100%;"></div>
</el-dialog>
handleOpenDialog(){
this.openFile = true; //打开对话框
this.$nextTick(()=>{
let nickName = "admin";
// 参数 - 水印内容, 加水印的容器, 是否显示时间
this.$watermark.set(nickName, this.$refs.fileDialog, true);
})
}