1 | Watermark.js
|
2 | ===
|
3 |
|
4 | JavaScript library for generating image watermarks using canvas.
|
5 |
|
6 | ## Install
|
7 |
|
8 | ```bash
|
9 | npm i @uiw/watermark.js
|
10 | ```
|
11 |
|
12 | ## Using
|
13 |
|
14 | ```js
|
15 | import Watermark from '@uiw/watermark.js';
|
16 |
|
17 | const watermark = new Watermark({
|
18 | content: 'Hello Watermark!'
|
19 | });
|
20 | watermark.create().then((mark) => {
|
21 | console.log('output:', mark)
|
22 | })
|
23 | .catch((err) => {
|
24 | console.log(err, 'err')
|
25 | })
|
26 | ```
|
27 |
|
28 | Or manually download and link `watermark.js` in your HTML, It can also be downloaded via [UNPKG](https://unpkg.com/browse/@uiw/watermark.js/):
|
29 |
|
30 | CDN: [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
|
67 | export 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 | }
|
108 | export default class Watermark {
|
109 | option: WatermarkOptions;
|
110 | constructor(options: WatermarkOptions);
|
111 | create(): Promise<string>;
|
112 | }
|
113 | ```
|
114 |
|
115 | ## Contributors
|
116 |
|
117 | As 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 |
|
123 | Made with [action-contributors](https://github.com/uiwjs/github-action-contributors).
|
124 |
|
125 | ## License
|
126 |
|
127 | Licensed under the [MIT License](https://opensource.org/licenses/MIT). |
\ | No newline at end of file |