linkmore-design
Version:
🌈 🚀lm组件库。🚀
125 lines (124 loc) • 4.45 kB
JavaScript
;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _configProvider = _interopRequireDefault(require("../config-provider"));
var _classnames = _interopRequireDefault(require("classnames"));
var _react = _interopRequireWildcard(require("react"));
/**
* 返回当前显示设备的物理像素分辨率与CSS像素分辨率之比
*
* @param context
* @see api 有些废弃了，其实类型 CanvasRenderingContext2D
*/
const getPixelRatio = context => {
if (!context) {
return 1;
}
const backingStore = context.backingStorePixelRatio || context.webkitBackingStorePixelRatio || context.mozBackingStorePixelRatio || context.msBackingStorePixelRatio || context.oBackingStorePixelRatio || 1;
return (window.devicePixelRatio || 1) / backingStore;
};
const WaterMark = props => {
const {
children,
style,
className,
markStyle,
markClassName,
// antd 内容层 zIndex 基本上在 10 以下 https://github.com/ant-design/ant-design/blob/6192403b2ce517c017f9e58a32d58774921c10cd/components/style/themes/default.less#L335
zIndex = 9,
gapX = 212,
gapY = 222,
width = 120,
height = 64,
rotate = -22,
// 默认旋转 -22 度
image,
content,
offsetLeft,
offsetTop,
fontStyle = 'normal',
fontWeight = 'normal',
fontColor = 'rgba(0,0,0,.15)',
fontSize = 16,
fontFamily = 'sans-serif',
prefixCls: customizePrefixCls
} = props;
const {
getPrefixCls
} = (0, _react.useContext)(_configProvider.default.ConfigContext);
const prefixCls = getPrefixCls('pro-layout-watermark', customizePrefixCls);
const wrapperCls = (0, _classnames.default)(`${prefixCls}-wrapper`, className);
const waterMakrCls = (0, _classnames.default)(prefixCls, markClassName);
const [base64Url, setBase64Url] = (0, _react.useState)('');
(0, _react.useEffect)(() => {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const ratio = getPixelRatio(ctx);
const canvasWidth = `${(gapX + width) * ratio}px`;
const canvasHeight = `${(gapY + height) * ratio}px`;
const canvasOffsetLeft = offsetLeft || gapX / 2;
const canvasOffsetTop = offsetTop || gapY / 2;
canvas.setAttribute('width', canvasWidth);
canvas.setAttribute('height', canvasHeight);
if (ctx) {
// 旋转字符 rotate
ctx.translate(canvasOffsetLeft * ratio, canvasOffsetTop * ratio);
ctx.rotate(Math.PI / 180 * Number(rotate));
const markWidth = width * ratio;
const markHeight = height * ratio;
if (image) {
const img = new Image();
img.crossOrigin = 'anonymous';
img.referrerPolicy = 'no-referrer';
img.src = image;
img.onload = () => {
ctx.drawImage(img, 0, 0, markWidth, markHeight);
setBase64Url(canvas.toDataURL());
};
} else if (content) {
const markSize = Number(fontSize) * ratio;
ctx.font = `${fontStyle} normal ${fontWeight} ${markSize}px/${markHeight}px ${fontFamily}`;
ctx.fillStyle = fontColor;
if (Array.isArray(content)) {
content?.forEach((item, index) => ctx.fillText(item, 0, index * markSize));
} else {
ctx.fillText(content, 0, 0);
}
setBase64Url(canvas.toDataURL());
}
} else {
// eslint-disable-next-line no-console
console.error('当前环境不支持Canvas');
}
}, [gapX, gapY, offsetLeft, offsetTop, rotate, fontStyle, fontWeight, width, height, fontFamily, fontColor, image, content, fontSize]);
return /*#__PURE__*/_react.default.createElement("div", {
style: {
position: 'relative',
...style
},
className: wrapperCls
}, children, /*#__PURE__*/_react.default.createElement("div", {
className: waterMakrCls,
style: {
zIndex,
position: 'absolute',
left: 0,
top: 0,
width: '100%',
height: '100%',
backgroundSize: `${gapX + width}px`,
pointerEvents: 'none',
backgroundRepeat: 'repeat',
...(base64Url ? {
backgroundImage: `url('${base64Url}')`
} : {}),
...markStyle
}
}));
};
var _default = WaterMark;
exports.default = _default;