用canvas的toDataURL()将图片转为dataURL(base64)水印效果

Posted 2023-02-24

参考技术A 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 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>
);
;