t-comm
Version:
专业、稳定、纯粹的工具库
102 lines (100 loc) • 3.57 kB
JavaScript
var WATER_MARK_ELEMENT = '__wm';
/**
* canvas 实现 watermark
* @param {object} params 参数
* @param {HTMLElement} params.container 容器
* @param {number} params.width 图片宽
* @param {number} params.height 图片高
* @param {string} params.textAlign 同 ctx.textAlign
* @param {string} params.textBaseline 同 ctx.textBaseline
* @param {string} params.font 同 ctx.font
* @param {string} params.fillStyle 同 ctx.fillStyle
* @param {string} params.content 内容
* @param {number} params.rotate 旋转角度
* @param {number} params.zIndex 层级
*
* @example
*
* ```ts
* const rtx = 'pony';
*
* createWatcherMark({
* content: rtx,
* width: '300',
* height: '300',
* textAlign: 'center',
* textBaseline: 'middle',
* font: '25px Microsoft Yahei',
* fillStyle: 'rgba(184, 184, 184, 0.3)',
* rotate: '-50',
* zIndex: 1000,
* });
* ```
*/
function createWatcherMark(_a) {
var _b = _a === void 0 ? {} : _a,
_c = _b.container,
container = _c === void 0 ? document.body : _c,
_d = _b.width,
width = _d === void 0 ? 300 : _d,
_e = _b.height,
height = _e === void 0 ? 300 : _e,
_f = _b.textAlign,
textAlign = _f === void 0 ? 'center' : _f,
_g = _b.textBaseline,
textBaseline = _g === void 0 ? 'middle' : _g,
_h = _b.font,
font = _h === void 0 ? '25px Microsoft Yahei' : _h,
_j = _b.fillStyle,
fillStyle = _j === void 0 ? 'rgba(184, 184, 184, 0.01)' : _j,
_k = _b.content,
content = _k === void 0 ? '请勿外传' : _k,
_l = _b.rotate,
rotate = _l === void 0 ? -50 : _l,
_m = _b.zIndex,
zIndex = _m === void 0 ? 10000 : _m;
var args = arguments[0];
var canvas = document.createElement('canvas');
canvas.setAttribute('width', "".concat(width, "px"));
canvas.setAttribute('height', "".concat(height, "px"));
var ctx = canvas.getContext('2d');
if (!ctx) return;
ctx.textAlign = textAlign;
ctx.textBaseline = textBaseline;
ctx.font = font;
ctx.fillStyle = fillStyle;
ctx.translate(width / 2, height / 2);
ctx.rotate(Math.PI / 180 * rotate);
ctx.fillText(content, 30, 30);
ctx.translate(-width / 2, -height / 2);
var base64Url = canvas.toDataURL();
var watermarkDom = document.querySelector(".".concat(WATER_MARK_ELEMENT));
var watermarkDiv = watermarkDom || document.createElement('div');
var styleStr = "\n position:absolute;\n top:0;\n left:0;\n width:100%;\n height:100%;\n z-index:".concat(zIndex, ";\n pointer-events:none;\n background-repeat:repeat;\n background-image:url('").concat(base64Url, "')");
watermarkDiv.setAttribute('style', styleStr);
watermarkDiv.classList.add(WATER_MARK_ELEMENT);
if (!watermarkDom) {
container.style.position = 'relative';
container.insertBefore(watermarkDiv, container.firstChild);
}
// @ts-ignore
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
if (MutationObserver) {
var mo_1 = new MutationObserver(function () {
var watermarkDom = document.querySelector(".".concat(WATER_MARK_ELEMENT));
// 只在 watermarkDom 元素变动才重新调用 createWatcherMark
if (watermarkDom && watermarkDom.getAttribute('style') !== styleStr || !watermarkDom) {
// 避免一直触发
mo_1.disconnect();
mo_1 = null;
createWatcherMark(JSON.parse(JSON.stringify(args)));
}
});
mo_1.observe(container, {
attributes: true,
subtree: true,
childList: true
});
}
}
export { createWatcherMark };