feat: watermark默认样式优化

This commit is contained in:
ocean-gao 2022-04-20 11:05:17 +08:00
parent 4daac1c517
commit dcf189a2ba
2 changed files with 9 additions and 9 deletions

View File

@ -54,15 +54,15 @@ createWatermark({ content: '我是水印' });
```js
{
container = document.body,
width = '300px',
height = '300px',
width = 300,
height = 300,
textAlign = 'center',
textBaseline = 'middle',
fontSize = '14px',
fontFamily = 'Microsoft Yahei',
fillStyle = 'rgba(184, 184, 184, 0.3)',
content = '请勿外传',
rotate = '25',
rotate = 25,
zIndex = 99999,
timestamp = 'YYYY-MM-DD HH:mm'
}

View File

@ -33,15 +33,15 @@ function timeFormat(date, format = 'YYYY-MM-DD') {
// canvas 实现 watermark
export function createWatermark({
container = document.body,
width = '300px',
height = '300px',
width = 300,
height = 300,
textAlign = 'center',
textBaseline = 'middle',
fontSize = '14px',
fontFamily = 'Microsoft Yahei',
fillStyle = 'rgba(184, 184, 184, 0.3)',
content = '请勿外传',
rotate = '25',
rotate = 25,
zIndex = 99999,
timestamp = 'YYYY-MM-DD HH:mm'
} = {}) {
@ -64,15 +64,15 @@ export function createWatermark({
timestamp
};
const canvas = document.createElement('canvas');
canvas.setAttribute('width', width);
canvas.setAttribute('height', height);
canvas.setAttribute('width', `${width}px`);
canvas.setAttribute('height', `${height}px`);
const ctx = canvas.getContext('2d');
ctx.textAlign = textAlign;
ctx.textBaseline = textBaseline;
ctx.font = `${fontSize} ${fontFamily}`;
ctx.fillStyle = fillStyle;
ctx.translate(parseInt(width) / 2, parseInt(height) / 2);
ctx.translate(width / 2, height / 2);
ctx.rotate(-(Math.PI / 180) * rotate);
ctx.fillText(
`${content}`,