t-comm
Version:
专业、稳定、纯粹的工具库
102 lines (100 loc) • 3.94 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() {
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
_ref$container = _ref.container,
container = _ref$container === void 0 ? document.body : _ref$container,
_ref$width = _ref.width,
width = _ref$width === void 0 ? 300 : _ref$width,
_ref$height = _ref.height,
height = _ref$height === void 0 ? 300 : _ref$height,
_ref$textAlign = _ref.textAlign,
textAlign = _ref$textAlign === void 0 ? 'center' : _ref$textAlign,
_ref$textBaseline = _ref.textBaseline,
textBaseline = _ref$textBaseline === void 0 ? 'middle' : _ref$textBaseline,
_ref$font = _ref.font,
font = _ref$font === void 0 ? '25px Microsoft Yahei' : _ref$font,
_ref$fillStyle = _ref.fillStyle,
fillStyle = _ref$fillStyle === void 0 ? 'rgba(184, 184, 184, 0.01)' : _ref$fillStyle,
_ref$content = _ref.content,
content = _ref$content === void 0 ? '请勿外传' : _ref$content,
_ref$rotate = _ref.rotate,
rotate = _ref$rotate === void 0 ? -50 : _ref$rotate,
_ref$zIndex = _ref.zIndex,
zIndex = _ref$zIndex === void 0 ? 10000 : _ref$zIndex;
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 = new MutationObserver(function () {
var watermarkDom = document.querySelector(".".concat(WATER_MARK_ELEMENT));
// 只在 watermarkDom 元素变动才重新调用 createWatcherMark
if (watermarkDom && watermarkDom.getAttribute('style') !== styleStr || !watermarkDom) {
// 避免一直触发
mo.disconnect();
mo = null;
createWatcherMark(JSON.parse(JSON.stringify(args)));
}
});
mo.observe(container, {
attributes: true,
subtree: true,
childList: true
});
}
}
export { createWatcherMark };