blackteay/fes.js
1
0
Fork 0
mirror of https://github.com/WeBankFinTech/fes.js.git synced 2025-10-15 20:18:49 +08:00
Code Issues Projects Releases Wiki Activity

feat: watermark默认样式优化

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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