UNPKG

3.51 kBMarkdownView Raw
1Watermark.js
2===
3
4JavaScript library for generating image watermarks using canvas.
5
6## Install
7
8```bash
9npm i @uiw/watermark.js
10```
11
12## Using
13
14```js
15import Watermark from '@uiw/watermark.js';
16
17const watermark = new Watermark({
18 content: 'Hello Watermark!'
19});
20watermark.create().then((mark) => {
21 console.log('output:', mark)
22})
23.catch((err) => {
24 console.log(err, 'err')
25})
26```
27
28Or manually download and link `watermark.js` in your HTML, It can also be downloaded via [UNPKG](https://unpkg.com/browse/@uiw/watermark.js/):
29
30CDN: [UNPKG](https://unpkg.com/@uiw/watermark.js/dist/) | [jsDelivr](https://cdn.jsdelivr.net/npm/@uiw/watermark.js/) | [Githack](https://raw.githack.com/uiwjs/watermark.js/gh-pages/watermark.min.js) | [Statically](https://cdn.statically.io/gh/uiwjs/watermark.js/gh-pages/watermark.min.js)
31
32```html
33<style>
34 #mark {
35 z-index: 9;
36 position: absolute;
37 left: 0px;
38 top: 0px;
39 width: 100%;
40 height: 100%;
41 background-size: 332px;
42 pointer-events: none;
43 background-repeat: repeat;
44 }
45</style>
46<body style="position: relative; min-height: 100vh;">
47 <div id="mark"></div>
48 <script src="https://unpkg.com/@uiw/watermark.js/dist/watermark.min.js"></script>
49 <script>
50 const $dom = document.querySelector('div#mark');
51 const watermark = new Watermark({
52 content: 'Hello Watermark!'
53 });
54 watermark.create().then((mark) => {
55 $dom.style.backgroundImage = `url(${mark})`
56 })
57 .catch((err) => {
58 console.log(err, 'err')
59 })
60 </script>
61</body>
62```
63
64## API
65
66```ts
67export interface WatermarkOptions {
68 /** watermark text content */
69 content?: string | string[];
70 /**
71 * When the watermark is drawn, the rotation angle, in `°`. @default `-22`
72 */
73 rotate?: number;
74 /**
75 * High-definition print image source, for high-definition screen display,
76 * it is recommended to use 2x or 3x image, and priority to use image rendering watermark.
77 */
78 image?: string;
79 /** Horizontal spacing between watermarks. @default `212` */
80 gapX?: number;
81 /** vertical spacing between watermarks. @default `222` */
82 gapY?: number;
83 /** width of watermark. @default `120` */
84 width?: number;
85 /** height of watermark @default `64` */
86 height?: number;
87 /**
88 * The vertical offset of the watermark drawn on the canvas.
89 * Normally, the watermark is drawn in the middle position, ie `offsetTop = gapY / 2`
90 */
91 offsetLeft?: number;
92 /**
93 * The horizontal offset of the watermark drawn on the canvas, under normal circumstances,
94 * the watermark is drawn in the middle position, ie `offsetTop = gapX / 2`
95 */
96 offsetTop?: number;
97 /** text size @default `16` */
98 fontSize?: number;
99 /** text family @default `sans-serif` */
100 fontFamily?: string;
101 /** text weight @default `normal` */
102 fontWeight?: 'normal' | 'light' | 'weight' | number;
103 /** text color @default `rgba(0,0,0,.15)` */
104 fontColor?: string;
105 /** text style */
106 fontStyle?: CanvasFillStrokeStyles['fillStyle'];
107}
108export default class Watermark {
109 option: WatermarkOptions;
110 constructor(options: WatermarkOptions);
111 create(): Promise<string>;
112}
113```
114
115## Contributors
116
117As always, thanks to our amazing contributors!
118
119<a href="https://github.com/uiwjs/react-watermark/graphs/contributors">
120 <img src="https://uiwjs.github.io/react-watermark/CONTRIBUTORS.svg" />
121</a>
122
123Made with [action-contributors](https://github.com/uiwjs/github-action-contributors).
124
125## License
126
127Licensed under the [MIT License](https://opensource.org/licenses/MIT).
\No newline at end of file