@ant-design/pro-layout
Version:
149 lines (147 loc) • 6.33 kB
JavaScript
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.WaterMark = void 0;
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _proProvider = require("@ant-design/pro-provider");
var _antd = require("antd");
var _classnames = _interopRequireDefault(require("classnames"));
var _react = _interopRequireWildcard(require("react"));
var _jsxRuntime = require("react/jsx-runtime");
/**
* 返回当前显示设备的物理像素分辨率与CSS像素分辨率之比
*
* @param context
* @see api 有些废弃了，其实类型 CanvasRenderingContext2D
*/
var getPixelRatio = function getPixelRatio(context) {
if (!context) {
return 1;
}
var backingStore = context.backingStorePixelRatio || context.webkitBackingStorePixelRatio || context.mozBackingStorePixelRatio || context.msBackingStorePixelRatio || context.oBackingStorePixelRatio || 1;
return (window.devicePixelRatio || 1) / backingStore;
};
var WaterMark = exports.WaterMark = function WaterMark(props) {
var _useToken = (0, _proProvider.useToken)(),
token = _useToken.token;
var children = props.children,
style = props.style,
className = props.className,
markStyle = props.markStyle,
markClassName = props.markClassName,
_props$zIndex = props.zIndex,
zIndex = _props$zIndex === void 0 ? 9 : _props$zIndex,
_props$gapX = props.gapX,
gapX = _props$gapX === void 0 ? 212 : _props$gapX,
_props$gapY = props.gapY,
gapY = _props$gapY === void 0 ? 222 : _props$gapY,
_props$width = props.width,
width = _props$width === void 0 ? 120 : _props$width,
_props$height = props.height,
height = _props$height === void 0 ? 64 : _props$height,
_props$rotate = props.rotate,
rotate = _props$rotate === void 0 ? -22 : _props$rotate,
image = props.image,
offsetLeft = props.offsetLeft,
outOffsetTop = props.offsetTop,
_props$fontStyle = props.fontStyle,
fontStyle = _props$fontStyle === void 0 ? 'normal' : _props$fontStyle,
_props$fontWeight = props.fontWeight,
fontWeight = _props$fontWeight === void 0 ? 'normal' : _props$fontWeight,
_props$fontColor = props.fontColor,
fontColor = _props$fontColor === void 0 ? token.colorFill : _props$fontColor,
_props$fontSize = props.fontSize,
fontSize = _props$fontSize === void 0 ? 16 : _props$fontSize,
_props$fontFamily = props.fontFamily,
fontFamily = _props$fontFamily === void 0 ? 'sans-serif' : _props$fontFamily,
customizePrefixCls = props.prefixCls;
var _useContext = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext),
getPrefixCls = _useContext.getPrefixCls;
var prefixCls = getPrefixCls('pro-layout-watermark', customizePrefixCls);
var wrapperCls = (0, _classnames.default)("".concat(prefixCls, "-wrapper"), className);
var waterMarkCls = (0, _classnames.default)(prefixCls, markClassName);
var _useState = (0, _react.useState)(''),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
base64Url = _useState2[0],
setBase64Url = _useState2[1];
(0, _react.useEffect)(function () {
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var ratio = getPixelRatio(ctx);
var canvasWidth = "".concat((gapX + width) * ratio, "px");
var canvasHeight = "".concat((gapY + height) * ratio, "px");
var canvasOffsetLeft = offsetLeft || gapX / 2;
var canvasOffsetTop = outOffsetTop || gapY / 2;
canvas.setAttribute('width', canvasWidth);
canvas.setAttribute('height', canvasHeight);
if (!ctx) {
// eslint-disable-next-line no-console
console.error('当前环境不支持Canvas');
return;
}
// 旋转字符 rotate
ctx.translate(canvasOffsetLeft * ratio, canvasOffsetTop * ratio);
ctx.rotate(Math.PI / 180 * Number(rotate));
var markWidth = width * ratio;
var markHeight = height * ratio;
var writeContent = function writeContent(contentText) {
var offsetTop = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
var markSize = Number(fontSize) * ratio;
ctx.font = "".concat(fontStyle, " normal ").concat(fontWeight, " ").concat(markSize, "px/").concat(markHeight, "px ").concat(fontFamily);
ctx.fillStyle = fontColor;
if (Array.isArray(contentText)) {
contentText === null || contentText === void 0 || contentText.forEach(function (item, index) {
return ctx.fillText(item, 0, index * markSize + offsetTop);
});
} else {
ctx.fillText(contentText, 0, offsetTop ? offsetTop + markSize : 0);
}
setBase64Url(canvas.toDataURL());
};
if (image) {
var img = new Image();
img.crossOrigin = 'anonymous';
img.referrerPolicy = 'no-referrer';
img.src = image;
img.onload = function () {
ctx.drawImage(img, 0, 0, markWidth, markHeight);
setBase64Url(canvas.toDataURL());
if (props.content) {
writeContent(props.content, img.height + 8);
return;
}
};
return;
}
if (props.content) {
writeContent(props.content);
return;
}
}, [gapX, gapY, offsetLeft, outOffsetTop, rotate, fontStyle, fontWeight, width, height, fontFamily, fontColor, image, props.content, fontSize]);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
style: (0, _objectSpread2.default)({
position: 'relative'
}, style),
className: wrapperCls,
children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: waterMarkCls,
style: (0, _objectSpread2.default)((0, _objectSpread2.default)({
zIndex: zIndex,
position: 'absolute',
left: 0,
top: 0,
width: '100%',
height: '100%',
backgroundSize: "".concat(gapX + width, "px"),
pointerEvents: 'none',
backgroundRepeat: 'repeat'
}, base64Url ? {
backgroundImage: "url('".concat(base64Url, "')")
} : {}), markStyle)
})]
});
};