/**
|
* @Description: canvas 简单的水印工具
|
* @Author: CcSimple
|
* @Github: https://github.com/CcSimple
|
*/
|
|
/**
|
* @Description: 时间格式化
|
* @param date
|
* @param format
|
* @returns {string|null}
|
*/
|
function timeFormat(date, format = 'YYYY-MM-DD') {
|
if (!date) return null;
|
if (typeof date === 'number') {
|
date = new Date(date);
|
}
|
const year = date.getFullYear();
|
const month = date.getMonth();
|
const day = date.getDate();
|
const hours24 = date.getHours();
|
const hours = hours24 % 12 === 0 ? 12 : hours24 % 12;
|
const minutes = date.getMinutes();
|
const seconds = date.getSeconds();
|
const dd = t => `0${t}`.slice(-2);
|
const map = {
|
YYYY: year,
|
MM: dd(month + 1),
|
MMMM: `${month + 1}月`,
|
M: month + 1,
|
DD: dd(day),
|
D: day,
|
HH: dd(hours24),
|
H: hours24,
|
hh: dd(hours),
|
h: hours,
|
mm: dd(minutes),
|
m: minutes,
|
ss: dd(seconds),
|
s: seconds
|
};
|
return format.replace(/Y+|M+|D+|H+|h+|m+|s+|S+|Q/g, str => String(map[str]));
|
}
|
|
// 水印参数
|
const defaultOption = {
|
id: 'watermark', // 水印id
|
watch: false,
|
content: 'vue-plugin-hiprint', // 水印内容
|
container: '.hiprint-printPaper', // 水印容器
|
width: 200, // 水印宽度
|
height: 200, // 水印高度
|
textAlign: 'center', // 水印文字水平对齐方式
|
textBaseline: 'middle', // 水印文字垂直对齐方式
|
fontSize: '14px', // 水印文字大小
|
fontFamily: 'Microsoft Yahei', // 水印文字字体
|
fillStyle: 'rgba(184, 184, 184, 0.3)', // 水印文字颜色
|
rotate: 25,// 水印文字旋转角度
|
timestamp: false, // 是否显示时间戳
|
format: 'YYYY-MM-DD HH:mm', // 时间戳格式
|
zIndex: 0
|
};
|
|
// 监听器
|
let observerMap = {};
|
|
/**
|
* @Description: 创建水印
|
* @param param
|
* @private
|
*/
|
function _createWatermark(param) {
|
const {
|
id,
|
watch,
|
content,
|
container,
|
width,
|
height,
|
textAlign,
|
textBaseline,
|
fontSize,
|
fontFamily,
|
fillStyle,
|
rotate,
|
timestamp,
|
format,
|
zIndex
|
} = param;
|
|
observerMap[id] = {
|
wmMo: null, // MutationObserver
|
wmTimer: null // timestamp
|
}
|
|
const canvas = document.createElement('canvas');
|
canvas.setAttribute('width', `${width}px`);
|
canvas.setAttribute('height', `${height}px`);
|
|
let containerDom = typeof container === 'string' ? document.querySelector(container) : container;
|
|
const ctx = canvas.getContext('2d');
|
ctx.textAlign = textAlign;
|
ctx.textBaseline = textBaseline;
|
ctx.font = `${fontSize} ${fontFamily}`;
|
ctx.fillStyle = fillStyle;
|
ctx.translate(width / 2, height / 2);
|
ctx.rotate(-(Math.PI / 180) * rotate);
|
ctx.fillText(`${content}`, 0, 0);
|
timestamp && ctx.fillText(`${timeFormat(new Date(), format)}`, 0, parseInt(fontSize) + 5);
|
|
let __vm = containerDom.querySelector('.__vm__' + id);
|
const watermarkDiv = __vm || document.createElement('div');
|
const withHeightStr = containerDom.getAttribute('style');
|
const styleStr = `position:absolute;user-select:none;top:0;left:0;${withHeightStr};z-index:${zIndex};pointer-events:none !important;background-repeat:repeat;background-image:url('${canvas.toDataURL()}');-webkit-print-color-adjust: exact;`;
|
|
watermarkDiv.setAttribute('style', styleStr);
|
watermarkDiv.classList.add('__vm__' + id);
|
|
if (!__vm) {
|
containerDom.insertBefore(watermarkDiv, containerDom.firstChild);
|
}
|
|
if (watch) {
|
const MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
|
if (MutationObserver) {
|
observerMap[id]["wmMo"] = new MutationObserver((e) => {
|
let change = e.some(item => item.target.className == containerDom.className && item.type == 'attributes');
|
__vm = containerDom.querySelector('.__vm__' + id);
|
if ((__vm && __vm.getAttribute('style') !== styleStr) || !__vm || change) {
|
// 避免一直触发
|
observerMap[id]["wmMo"].disconnect();
|
observerMap[id]["wmMo"] = null;
|
delete observerMap[id]["wmMo"];
|
_createWatermark(param);
|
}
|
});
|
observerMap[id]["wmMo"].observe(containerDom, {
|
attributes: true, subtree: true, childList: true
|
});
|
}
|
}
|
|
if (format) {
|
let timeout = 1000 * 60 * 60 * 24;
|
if (format.includes('s')) {
|
timeout = 1000;
|
} else if (format.includes('m')) {
|
timeout = 1000 * 60;
|
} else if (format.includes('h') || format.includes('H')) {
|
timeout = 1000 * 60 * 60;
|
}
|
|
observerMap[id]["wmTimer"] = window.setTimeout(() => {
|
// 触发 MutationObserver
|
watermarkDiv.style.bottom = '0';
|
}, timeout);
|
}
|
}
|
|
/**
|
* @Description: 销毁水印
|
*/
|
const destroyWatermark = function (options) {
|
const {
|
id,
|
watch,
|
container,
|
} = options;
|
if (watch) {
|
let containerDom = typeof container === 'string' ? document.querySelector(container) : container;
|
// 监听器关闭
|
if (observerMap[id]) {
|
observerMap[id]["wmMo"] && observerMap[id]["wmMo"].disconnect();
|
observerMap[id]["wmMo"] = null;
|
observerMap[id]["wmTimer"] && window.clearTimeout(observerMap[id]["wmTimer"]);
|
observerMap[id]["wmTimer"] = null;
|
delete observerMap[id];
|
}
|
// 删除水印元素
|
const __vm = containerDom.querySelector('.__vm__' + id);
|
__vm && __vm.parentNode.removeChild(__vm);
|
}
|
}
|
|
/**
|
* @Description: 创建水印
|
* @param option
|
*/
|
const createWatermark = function (option) {
|
let options = Object.assign({}, defaultOption, option);
|
destroyWatermark(options);
|
_createWatermark(options);
|
}
|
|
// 暴露接口
|
export default {
|
createWatermark, destroyWatermark
|
}
|
