water-mask-page
Version:
水印，页面水印
64 lines (63 loc) • 2.89 kB
JavaScript
import React, { useEffect } from "react";
function WaterMaskPage(props) {
var children = props.children;
useEffect(function () {
watermark(props);
}, []);
var currentMask = function () {
var container = document.querySelector('#__water_mask');
var node = null;
container && container.childNodes.forEach(function (childNode) {
var classes = childNode.classList;
if (classes.contains('__wm')) {
node = childNode;
}
});
return node;
};
var watermark = function (params) {
var container = document.querySelector('#__water_mask');
var fontSize = params.fontSize, opacity = params.opacity, fillStyle = params.color, content = params.content, width = params.width, height = params.height, textAlign = params.textAlign, textBaseline = params.textBaseline, _a = params.feedHeight, feedHeight = _a === void 0 ? 28 : _a, _b = params.rotate, rotate = _b === void 0 ? -20 : _b, _c = params.zIndex, zIndex = _c === void 0 ? 1000 : _c;
var canvas = document.createElement('canvas');
var widthStr = width + "px;";
canvas.setAttribute('width', widthStr);
canvas.setAttribute('height', String(height) + 'px');
var ctx = canvas.getContext('2d');
if (!ctx) {
return;
}
ctx.textAlign = textAlign;
ctx.textBaseline = textBaseline;
ctx.font = fontSize + "px Microsoft Yahei";
ctx.fillStyle = fillStyle;
ctx.rotate((Math.PI / 180) * rotate);
ctx.globalAlpha = opacity / 100;
var textArray = decodeURIComponent(content).split('\n');
textArray.forEach(function (str, index) {
ctx.fillText(str, 0, height / 2 + index * feedHeight);
});
var base64Url = canvas.toDataURL();
var __wm = currentMask();
var watermarkDiv = __wm || document.createElement('div');
var styleStr = "\n position:absolute;\n top:0;\n left:0;\n width:100%;\n height:100%;\n z-index:" + zIndex + ";\n pointer-events:none;\n background-repeat:repeat;\n background-image:url('" + base64Url + "')\n ";
watermarkDiv.setAttribute('style', styleStr);
watermarkDiv.classList.add('__wm');
if (!__wm && container) {
container.insertBefore(watermarkDiv, container.firstChild);
}
};
return (React.createElement("div", { id: '__water_mask' }, children));
}
;
WaterMaskPage.defaultProps = {
children: (React.createElement("div", { style: { width: '100px', height: '200px' } }, "\u6B22\u8FCE\u4F7F\u7528\u8131\u654F\u6C34\u5370\uFF01")),
fontSize: 16,
color: '#999',
opacity: 30,
content: '脱敏水印',
width: 150,
height: 100,
textAlign: 'left',
textBaseline: 'middle',
};
export default WaterMaskPage;