1 | "use strict";
|
2 |
|
3 | var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
|
4 |
|
5 | var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
6 |
|
7 | Object.defineProperty(exports, "__esModule", {
|
8 | value: true
|
9 | });
|
10 | exports.default = void 0;
|
11 |
|
12 | var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
13 |
|
14 | var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
15 |
|
16 | require("antd/es/config-provider/style");
|
17 |
|
18 | var _configProvider = _interopRequireDefault(require("antd/es/config-provider"));
|
19 |
|
20 | var _react = _interopRequireWildcard(require("react"));
|
21 |
|
22 | var _classnames = _interopRequireDefault(require("classnames"));
|
23 |
|
24 |
|
25 |
|
26 |
|
27 |
|
28 |
|
29 |
|
30 | var getPixelRatio = function getPixelRatio(context) {
|
31 | if (!context) {
|
32 | return 1;
|
33 | }
|
34 |
|
35 | var backingStore = context.backingStorePixelRatio || context.webkitBackingStorePixelRatio || context.mozBackingStorePixelRatio || context.msBackingStorePixelRatio || context.oBackingStorePixelRatio || context.backingStorePixelRatio || 1;
|
36 | return (window.devicePixelRatio || 1) / backingStore;
|
37 | };
|
38 |
|
39 | var WaterMark = function WaterMark(props) {
|
40 | var children = props.children,
|
41 | style = props.style,
|
42 | className = props.className,
|
43 | markStyle = props.markStyle,
|
44 | markClassName = props.markClassName,
|
45 | _props$zIndex = props.zIndex,
|
46 | zIndex = _props$zIndex === void 0 ? 9 : _props$zIndex,
|
47 | _props$gapX = props.gapX,
|
48 | gapX = _props$gapX === void 0 ? 212 : _props$gapX,
|
49 | _props$gapY = props.gapY,
|
50 | gapY = _props$gapY === void 0 ? 222 : _props$gapY,
|
51 | _props$width = props.width,
|
52 | width = _props$width === void 0 ? 120 : _props$width,
|
53 | _props$height = props.height,
|
54 | height = _props$height === void 0 ? 64 : _props$height,
|
55 | _props$rotate = props.rotate,
|
56 | rotate = _props$rotate === void 0 ? -22 : _props$rotate,
|
57 | image = props.image,
|
58 | content = props.content,
|
59 | offsetLeft = props.offsetLeft,
|
60 | offsetTop = props.offsetTop,
|
61 | _props$fontStyle = props.fontStyle,
|
62 | fontStyle = _props$fontStyle === void 0 ? 'normal' : _props$fontStyle,
|
63 | _props$fontWeight = props.fontWeight,
|
64 | fontWeight = _props$fontWeight === void 0 ? 'normal' : _props$fontWeight,
|
65 | _props$fontColor = props.fontColor,
|
66 | fontColor = _props$fontColor === void 0 ? 'rgba(0,0,0,.15)' : _props$fontColor,
|
67 | _props$fontSize = props.fontSize,
|
68 | fontSize = _props$fontSize === void 0 ? 16 : _props$fontSize,
|
69 | _props$fontFamily = props.fontFamily,
|
70 | fontFamily = _props$fontFamily === void 0 ? 'sans-serif' : _props$fontFamily,
|
71 | customizePrefixCls = props.prefixCls;
|
72 |
|
73 | var _useContext = (0, _react.useContext)(_configProvider.default.ConfigContext),
|
74 | getPrefixCls = _useContext.getPrefixCls;
|
75 |
|
76 | var prefixCls = getPrefixCls('pro-layout-watermark', customizePrefixCls);
|
77 | var wrapperCls = (0, _classnames.default)("".concat(prefixCls, "-wrapper"), className);
|
78 | var waterMakrCls = (0, _classnames.default)(prefixCls, markClassName);
|
79 |
|
80 | var _useState = (0, _react.useState)(''),
|
81 | _useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
82 | base64Url = _useState2[0],
|
83 | setBase64Url = _useState2[1];
|
84 |
|
85 | (0, _react.useEffect)(function () {
|
86 | var canvas = document.createElement('canvas');
|
87 | var ctx = canvas.getContext('2d');
|
88 | var ratio = getPixelRatio(ctx);
|
89 | var canvasWidth = "".concat((gapX + width) * ratio, "px");
|
90 | var canvasHeight = "".concat((gapY + height) * ratio, "px");
|
91 | var canvasOffsetLeft = offsetLeft || gapX / 2;
|
92 | var canvasOffsetTop = offsetTop || gapY / 2;
|
93 | canvas.setAttribute('width', canvasWidth);
|
94 | canvas.setAttribute('height', canvasHeight);
|
95 |
|
96 | if (ctx) {
|
97 |
|
98 | ctx.translate(canvasOffsetLeft * ratio, canvasOffsetTop * ratio);
|
99 | ctx.rotate(Math.PI / 180 * Number(rotate));
|
100 | var markWidth = width * ratio;
|
101 | var markHeight = height * ratio;
|
102 |
|
103 | if (image) {
|
104 | var img = new Image();
|
105 | img.crossOrigin = 'anonymous';
|
106 | img.referrerPolicy = 'no-referrer';
|
107 | img.src = image;
|
108 |
|
109 | img.onload = function () {
|
110 | ctx.drawImage(img, 0, 0, markWidth, markHeight);
|
111 | setBase64Url(canvas.toDataURL());
|
112 | };
|
113 | } else if (content) {
|
114 | var markSize = Number(fontSize) * ratio;
|
115 | ctx.font = "".concat(fontStyle, " normal ").concat(fontWeight, " ").concat(markSize, "px/").concat(markHeight, "px ").concat(fontFamily);
|
116 | ctx.fillStyle = fontColor;
|
117 | ctx.fillText(content, 0, 0);
|
118 | setBase64Url(canvas.toDataURL());
|
119 | }
|
120 | } else {
|
121 |
|
122 | console.error('当前环境不支持Canvas');
|
123 | }
|
124 | }, [gapX, gapY, offsetLeft, offsetTop, rotate, fontStyle, fontWeight, width, height, fontFamily, fontColor, image, content, fontSize]);
|
125 | return _react.default.createElement("div", {
|
126 | style: (0, _objectSpread2.default)({
|
127 | position: 'relative'
|
128 | }, style),
|
129 | className: wrapperCls
|
130 | }, children, _react.default.createElement("div", {
|
131 | className: waterMakrCls,
|
132 | style: (0, _objectSpread2.default)({
|
133 | zIndex: zIndex,
|
134 | position: 'absolute',
|
135 | left: 0,
|
136 | top: 0,
|
137 | width: '100%',
|
138 | height: '100%',
|
139 | backgroundSize: "".concat(gapX + width, "px"),
|
140 | pointerEvents: 'none',
|
141 | backgroundRepeat: 'repeat',
|
142 | backgroundImage: "url('".concat(base64Url, "')")
|
143 | }, markStyle)
|
144 | }));
|
145 | };
|
146 |
|
147 | var _default = WaterMark;
|
148 | exports.default = _default; |
\ | No newline at end of file |