Skip to content

Commit 201c255

Browse files
authored
Merge pull request #1266 from zhensherlock/dev
Dev
2 parents 60554f3 + cc27d4a commit 201c255

11 files changed

Lines changed: 110 additions & 32 deletions

File tree

CHANGELOG.md

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,26 @@
1+
# [1.6.0](https://github.com/zhensherlock/watermark-js-plus/compare/v1.5.9...v1.6.0) (2025-04-26)
2+
3+
4+
### ✨ Features | 新功能
5+
6+
* **watermark:** add dynamic animation styles based on background repeat ([3f0b5a4](https://github.com/zhensherlock/watermark-js-plus/commit/3f0b5a4ff44fe00e8023f73abcfeff2e18e25f7d))
7+
8+
9+
### 🎫 Chores | 其他更新
10+
11+
* **deps:** update dependency element-plus to v2.9.8 ([b8b61e4](https://github.com/zhensherlock/watermark-js-plus/commit/b8b61e4d89953268c0a9c034591a877d24fab94a))
12+
* **deps:** update dependency eslint to v9.25.0 ([d984ccc](https://github.com/zhensherlock/watermark-js-plus/commit/d984ccc5405da86ea4f76a17f51e12e5dc4d25fd))
13+
* **deps:** update dependency eslint to v9.25.1 ([bdcc74d](https://github.com/zhensherlock/watermark-js-plus/commit/bdcc74d7c0436302598fa8e969f839f4aeab696e))
14+
* **deps:** update dependency lint-staged to v15.5.1 ([359e7a3](https://github.com/zhensherlock/watermark-js-plus/commit/359e7a39ca8777b70abb323ebf6411e7d2f968e5))
15+
* **deps:** update dependency rollup to v4.40.0 ([414eaed](https://github.com/zhensherlock/watermark-js-plus/commit/414eaedcc7a3fcfffc108658ac1d458bbee3ffe0))
16+
* **deps:** update dependency ts-jest to v29.3.2 ([ce38314](https://github.com/zhensherlock/watermark-js-plus/commit/ce383143cc8636b81fb0e8c02a17243a79bd7317))
17+
* **deps:** update typescript-eslint monorepo to v8.30.1 ([d93a5a4](https://github.com/zhensherlock/watermark-js-plus/commit/d93a5a489b09fd85bdc56083783ae0db735313c0))
18+
* **deps:** update typescript-eslint monorepo to v8.31.0 ([37cdb22](https://github.com/zhensherlock/watermark-js-plus/commit/37cdb2295292e3f21a7d3ca2546ffdffc1dc6826))
19+
* update dependencies ([847d03b](https://github.com/zhensherlock/watermark-js-plus/commit/847d03be6419a3067e656c7fb7cde395f2b3ad40))
20+
* update dependencies ([e2cf22b](https://github.com/zhensherlock/watermark-js-plus/commit/e2cf22b1f44e8f215b7d3b622e48323b1bf61cbd))
21+
22+
23+
124
## [1.5.9](https://github.com/zhensherlock/watermark-js-plus/compare/v1.5.8...v1.5.9) (2025-04-11)
225

326

docs/guide/extra/ie.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import { Watermark } from 'watermark-js-plus/ie'
1818
## CDN
1919
```html
2020
<!-- import JavaScript -->
21-
<script src="https://www.unpkg.com/watermark-js-plus@1.5.8/dist/ie/index.iife.min.js"></script>
21+
<script src="https://www.unpkg.com/watermark-js-plus@1.6.0/dist/ie/index.iife.min.js"></script>
2222
```
2323

2424
> We recommend our users to lock version when using CDN. Please refer to [unpkg.com](https://unpkg.com/) for more information.

docs/guide/watermark.md

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,12 @@ onMounted(() => {
2323
// child element watermark
2424
childElementWatermark = new Watermark({
2525
parent: '.parent-element',
26-
width: 400,
27-
height: 400,
26+
width: 180,
27+
height: 180,
28+
textRowMaxWidth: 254,
2829
backgroundRepeat: 'no-repeat',
2930
zIndex: 900,
31+
movable: true,
3032
// parent: '.parent-element',
3133
// // textRowMaxWidth: 200,
3234
// // contentType: 'multi-line-text',
@@ -372,10 +374,12 @@ import { Watermark } from 'watermark-js-plus' // import watermark plugin
372374

373375
const watermark = new Watermark({
374376
parent: '.parent-element',
375-
width: 400,
376-
height: 400,
377+
width: 180,
378+
height: 180,
379+
textRowMaxWidth: 254,
377380
backgroundRepeat: 'no-repeat',
378-
zIndex: 900
381+
zIndex: 900,
382+
movable: true
379383
})
380384

381385
watermark.create() // add watermark

docs/zh/guide/extra/ie.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import { Watermark } from 'watermark-js-plus/ie'
1818
## CDN
1919
```html
2020
<!-- import JavaScript -->
21-
<script src="https://www.unpkg.com/watermark-js-plus@1.5.8/dist/ie/index.iife.min.js"></script>
21+
<script src="https://www.unpkg.com/watermark-js-plus@1.6.0/dist/ie/index.iife.min.js"></script>
2222
```
2323

2424
> 我们建议使用 CDN 引入用户在链接地址上锁定版本,以免将来插件升级时受到非兼容性更新的影响。锁定版本的方法请查看 [unpkg.com](https://unpkg.com/)

docs/zh/guide/watermark.md

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,12 @@ onMounted(() => {
2323
// 子元素水印
2424
childElementWatermark = new Watermark({
2525
parent: '.parent-element',
26-
width: 400,
27-
height: 400,
26+
width: 180,
27+
height: 180,
28+
textRowMaxWidth: 254,
2829
backgroundRepeat: 'no-repeat',
29-
zIndex: 900
30+
zIndex: 900,
31+
movable: true
3032
});
3133
});
3234

@@ -318,10 +320,12 @@ import { Watermark } from 'watermark-js-plus' // 引入水印插件
318320

319321
const watermark = new Watermark({
320322
parent: '.parent-element',
321-
width: 400,
322-
height: 400,
323+
width: 180,
324+
height: 180,
325+
textRowMaxWidth: 254,
323326
backgroundRepeat: 'no-repeat',
324-
zIndex: 900
327+
zIndex: 900,
328+
movable: true
325329
})
326330

327331
watermark.create() // 添加水印

package-lock.json

Lines changed: 9 additions & 9 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "watermark-js-plus",
3-
"version": "1.5.9",
3+
"version": "1.6.0",
44
"description": "watermark for the browser",
55
"scripts": {
66
"clean:dist": "rimraf dist",
@@ -92,8 +92,8 @@
9292
"@rollup/plugin-typescript": "^12.1.2",
9393
"@types/jquery": "^3.5.32",
9494
"@types/markdown-it": "^14.1.2",
95-
"@typescript-eslint/eslint-plugin": "^8.29.1",
96-
"@typescript-eslint/parser": "^8.29.1",
95+
"@typescript-eslint/eslint-plugin": "^8.31.0",
96+
"@typescript-eslint/parser": "^8.31.0",
9797
"@vue/theme": "^2.3.0",
9898
"autoprefixer": "^10.4.21",
9999
"canvas": "^2.11.2",
@@ -104,8 +104,8 @@
104104
"core-js": "^3.41.0",
105105
"cross-fetch": "^4.1.0",
106106
"cssnano": "^7.0.6",
107-
"element-plus": "^2.9.7",
108-
"eslint": "^9.24.0",
107+
"element-plus": "^2.9.8",
108+
"eslint": "^9.25.1",
109109
"eslint-config-airbnb-base": "^15.0.0",
110110
"eslint-config-prettier": "^10.1.2",
111111
"eslint-config-semistandard": "^17.0.0",
@@ -120,20 +120,20 @@
120120
"jest-environment-jsdom": "^29.7.0",
121121
"jimp": "^0.22.12",
122122
"jquery": "^3.7.1",
123-
"lint-staged": "^15.5.0",
123+
"lint-staged": "^15.5.1",
124124
"lodash": "^4.17.21",
125125
"markdown-it": "^14.1.0",
126126
"pinia": "^3.0.2",
127127
"prettier": "^3.5.3",
128128
"rimraf": "^6.0.1",
129-
"rollup": "^4.39.0",
129+
"rollup": "^4.40.0",
130130
"rollup-plugin-filesize": "^10.0.0",
131131
"rollup-plugin-postcss": "^4.0.2",
132132
"rollup-plugin-sass": "^1.15.2",
133133
"rollup-plugin-visualizer": "^5.14.0",
134134
"rollup-plugin-your-function": "^0.5.3",
135135
"terser": "^5.39.0",
136-
"ts-jest": "^29.3.1",
136+
"ts-jest": "^29.3.2",
137137
"typescript": "^5.8.3",
138138
"unplugin-element-plus": "^0.9.1",
139139
"vitepress": "^1.6.3",

src/core/watermark.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { convertImage, isUndefined } from '../utils'
1+
import { convertImage, generateAnimationStyle, isUndefined } from '../utils'
22
import type { ChangeOptionsMode, WatermarkDom, WatermarkOptions } from '../types'
33
import { initialOptions } from '../utils/initialization'
44
import protection from '../utils/protection'
@@ -92,7 +92,7 @@ class Watermark {
9292
position:${parentElementType === 'root' ? 'fixed' : 'absolute'}!important;-webkit-print-color-adjust:exact!important;width:100%!important;height:100%!important;
9393
z-index:${this.options.zIndex}!important;background-image:url(${image})!important;background-repeat:${this.options.backgroundRepeat}!important;
9494
background-size:${backgroundSize[0]}px ${backgroundSize[1]}px!important;background-position:${this.options.backgroundPosition};
95-
${this.options.movable ? 'animation: 200s linear 0s infinite alternate watermark !important;' : ''}
95+
${generateAnimationStyle(this.options.movable, this.options.backgroundRepeat)}
9696
`
9797
this.watermarkDom.appendChild(watermarkInnerDom)
9898
this.parentElement.appendChild(this.watermarkDom)

src/style/global.scss

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,3 +15,21 @@
1515
background-position: 0 0;
1616
}
1717
}
18+
19+
@keyframes watermark-horizontal {
20+
from {
21+
background-position-x: 0;
22+
}
23+
to {
24+
background-position-x: 100%;
25+
}
26+
}
27+
28+
@keyframes watermark-vertical {
29+
from {
30+
background-position-y: 0;
31+
}
32+
to {
33+
background-position-y: 100%;
34+
}
35+
}

src/utils/index.ts

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -156,3 +156,23 @@ export const loadImage = (
156156
export const generateMatrix = (rows: number, columns: number, value: any) => {
157157
return Array.from({ length: rows }, () => new Array(columns).fill(value))
158158
}
159+
160+
export const generateAnimationStyle = (movable: boolean, backgroundRepeat: string) => {
161+
if (!movable) {
162+
return ''
163+
}
164+
const horizontalDuration = Math.random() * (8 - 2) + 2
165+
const verticalDuration = Math.random() * (4 - 2) + 2
166+
switch (backgroundRepeat) {
167+
case 'repeat':
168+
return 'animation: 200s linear 0s infinite alternate watermark !important;'
169+
case 'repeat-x':
170+
return `animation: ${horizontalDuration}s ease-in 0s infinite alternate watermark-vertical !important;'`
171+
case 'repeat-y':
172+
return `animation: ${verticalDuration}s ease-out 0s infinite alternate watermark-horizontal !important;'`
173+
case 'no-repeat':
174+
return `animation: ${horizontalDuration}s ease-in 0s infinite alternate watermark-horizontal, ${verticalDuration}s ease-out 0s infinite alternate watermark-vertical !important;`
175+
default:
176+
return ''
177+
}
178+
}

0 commit comments

Comments
 (0)