blackteay/fes.js
1
0
Fork 0
mirror of https://github.com/WeBankFinTech/fes.js.git synced 2025-04-05 19:41:57 +08:00
Code Issues Projects Releases Wiki Activity

feat: watermark默认样式优化 (#116)

Browse Source 
* feat: watermark默认样式优化

* feat: watermark默认样式优化

* feat: watermark默认样式优化
This commit is contained in:
ocean_gao 2022-04-20 11:13:17 +08:00 committed by GitHub
parent 41b843396c
commit ae84ba3bae
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 26 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
docs/reference/plugin/plugins/watermark.md
View File

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

31
packages/fes-plugin-watermark/src/runtime/core.js
View File

@ -33,16 +33,17 @@ 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',
font = '16px Microsoft Yahei',
fillStyle = 'rgba(184, 184, 184, 0.2)',
fontSize = '14px',
fontFamily = 'Microsoft Yahei',
fillStyle = 'rgba(184, 184, 184, 0.3)',
content = '请勿外传',
rotate = '45',
rotate = 25,
zIndex = 99999,
timestamp = 'YYYY-MM-DD hh:mm'
timestamp = 'YYYY-MM-DD HH:mm'
} = {}) {
// eslint-disable-next-line no-undef
if (WATERMARK_DISABLED) {
@ -54,7 +55,8 @@ export function createWatermark({
height,
textAlign,
textBaseline,
font,
fontSize,
fontFamily,
fillStyle,
content,
rotate,
@ -62,21 +64,26 @@ 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 = font;
ctx.font = `${fontSize} ${fontFamily}`;
ctx.fillStyle = fillStyle;
ctx.translate(parseFloat(width) / 2, parseFloat(height) / 2);
ctx.translate(width / 2, height / 2);
ctx.rotate(-(Math.PI / 180) * rotate);
ctx.fillText(
`${content}${timestamp ? ` ${timeFormat(new Date(), timestamp)}` : ''}`,
`${content}`,
0,
0
);
timestamp && ctx.fillText(
`${timeFormat(new Date(), timestamp)}`,
0,
parseInt(fontSize) + 5
);
let __wm = document.querySelector('.__wm');
const watermarkDiv = __wm || document.createElement('div');