scss部分index.scss
.wrapper {
position: relative;
height: 100%;
.watermask {
position: relative;
left: -100px;
top: -80px;
width: 300%;
height: 100%;
opacity: 0.6;
transform: rotate(-20deg);
background-repeat: repeat;
}
}
react部分
import React, { useState, useEffect } from 'react';
import { getParamWithUrl } from "@utils";
import { get } from "@utils/request";

import './index.scss';

export default () => {
const contentId = getParamWithUrl('contentId') || 2;
const [info, setInfo] = useState({});

const addWaterMarker = (str) => {
const canvas = document.createElement('canvas');
canvas.width = 120;
canvas.height = 60;

const context = canvas.getContext('2d');
context.rotate((-25 * Math.PI) / 180);
context.fontSize = '14px';
context.fillStyle = '#999';
context.textAlign = 'center';
context.textBaseline = 'Middle';
context.fillText(str, 32, 48);

return canvas.toDataURL('image/png');

};

const getNewsInfo = async () => {
const data = await get(v1/teacherApp/teachBbsFront/serviceCenter/getContentDetail?contentId=${contentId});
setInfo(data || {});
};

useEffect(() => {
getNewsInfo();
}, []);

return (
<div className="wrapper">
<div className="watermask" style={{ backgroundImage: url("${addWaterMarker({info.mobileSuffix})}") }} />
</div>
);
};