blackteay/fes.js
1
0
Fork 0
mirror of https://github.com/WeBankFinTech/fes.js.git synced 2025-04-06 03:59:53 +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 ```js
{ {
container = document.body, container = document.body,
width = '300px', width = 300,
height = '300px', height = 300,
textAlign = 'center', textAlign = 'center',
textBaseline = 'middle', textBaseline = 'middle',
font = '16px Microsoft Yahei', fontSize = '14px',
fillStyle = 'rgba(184, 184, 184, 0.2)', fontFamily = 'Microsoft Yahei',
fillStyle = 'rgba(184, 184, 184, 0.3)',
content = '请勿外传', content = '请勿外传',
rotate = '45', rotate = 25,
zIndex = 99999, 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 // 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',
font = '16px Microsoft Yahei', fontSize = '14px',
fillStyle = 'rgba(184, 184, 184, 0.2)', fontFamily = 'Microsoft Yahei',
fillStyle = 'rgba(184, 184, 184, 0.3)',
content = '请勿外传', content = '请勿外传',
rotate = '45', rotate = 25,
zIndex = 99999, zIndex = 99999,
timestamp = 'YYYY-MM-DD hh:mm' timestamp = 'YYYY-MM-DD HH:mm'
} = {}) { } = {}) {
// eslint-disable-next-line no-undef // eslint-disable-next-line no-undef
if (WATERMARK_DISABLED) { if (WATERMARK_DISABLED) {
@ -54,7 +55,8 @@ export function createWatermark({
height, height,
textAlign, textAlign,
textBaseline, textBaseline,
font, fontSize,
fontFamily,
fillStyle, fillStyle,
content, content,
rotate, rotate,
@ -62,21 +64,26 @@ 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 = font; ctx.font = `${fontSize} ${fontFamily}`;
ctx.fillStyle = fillStyle; ctx.fillStyle = fillStyle;
ctx.translate(parseFloat(width) / 2, parseFloat(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}${timestamp ? ` ${timeFormat(new Date(), timestamp)}` : ''}`, `${content}`,
0, 0,
0 0
); );
timestamp && ctx.fillText(
`${timeFormat(new Date(), timestamp)}`,
0,
parseInt(fontSize) + 5
);
let __wm = document.querySelector('.__wm'); let __wm = document.querySelector('.__wm');
const watermarkDiv = __wm || document.createElement('div'); const watermarkDiv = __wm || document.createElement('div');