watermark-js-plus 0.0.3 → 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/README.md +1 -3
  2. package/dist/core/blind.d.ts +17 -0
  3. package/dist/core/watermark.d.ts +40 -0
  4. package/dist/index.d.ts +3 -0
  5. package/dist/types/index.d.ts +63 -0
  6. package/dist/utils/index.d.ts +9 -0
  7. package/dist/watermark.esm.js +489 -0
  8. package/dist/watermark.umd.js +498 -0
  9. package/dist/watermark.umd.min.js +1 -0
  10. package/package.json +14 -20
package/README.md CHANGED
@@ -4,9 +4,7 @@
4
4
  </a>
5
5
  </p>
6
6
  <p align="center">
7
- <a href="https://npmjs.com/package/pinia"><img src="https://badgen.net/npm/v/pinia" alt="npm package"></a>
8
- <a href="https://github.com/vuejs/pinia/actions/workflows/test.yml?query=branch%3Av2"><img src="https://github.com/vuejs/pinia/workflows/test/badge.svg?branch=v2" alt="build status"></a>
9
- <a href="https://codecov.io/github/vuejs/pinia"><img src="https://badgen.net/codecov/c/github/vuejs/pinia/v2" alt="code coverage"></a>
7
+ <a href="https://npmjs.com/package/watermark-js-plus"><img src="https://badgen.net/npm/v/watermark-js-plus" alt="npm package"></a>
10
8
  </p>
11
9
 
12
10
  # Watermark
package/dist/core/blind.d.ts ADDED
@@ -0,0 +1,17 @@
1
+ import { DecodeBlindWatermarkOptions, WatermarkOptions } from '../types';
2
+ import Watermark from './watermark';
3
+ /**
4
+ * BlindWatermark class
5
+ */
6
+ export default class BlindWatermark extends Watermark {
7
+ /**
8
+ * BlindWatermark constructor
9
+ * @param props - blind watermark options
10
+ */
11
+ constructor(props?: Partial<WatermarkOptions>);
12
+ /**
13
+ * Decode blind watermark.
14
+ * @param props - decode options
15
+ */
16
+ static decode(props: Partial<DecodeBlindWatermarkOptions>): void;
17
+ }
package/dist/core/watermark.d.ts ADDED
@@ -0,0 +1,40 @@
1
+ import { WatermarkOptions } from '../types';
2
+ /**
3
+ * Watermark class
4
+ */
5
+ export default class Watermark {
6
+ private readonly options;
7
+ private parentElement;
8
+ private observer?;
9
+ private parentObserve?;
10
+ private watermarkDom?;
11
+ /**
12
+ * Watermark constructor
13
+ * @param props - watermark options
14
+ */
15
+ constructor(props?: Partial<WatermarkOptions>);
16
+ /**
17
+ * Create an HD canvas.
18
+ * @param width - width of canvas
19
+ * @param height - height of canvas
20
+ */
21
+ static createCanvas(width: number, height: number): HTMLCanvasElement;
22
+ changeParentElement(parent: Element | string): void;
23
+ /**
24
+ * Creating a watermark.
25
+ */
26
+ create(): Promise<void>;
27
+ /**
28
+ * Deleting this watermark.
29
+ */
30
+ destroy(): void;
31
+ private validateUnique;
32
+ private validateContent;
33
+ private draw;
34
+ private drawText;
35
+ private drawImage;
36
+ private drawMultiLineText;
37
+ private drawRichText;
38
+ private getImageRect;
39
+ private bindMutationObserve;
40
+ }
package/dist/index.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import Watermark from './core/watermark';
2
+ import BlindWatermark from './core/blind';
3
+ export { Watermark, BlindWatermark };
package/dist/types/index.d.ts ADDED
@@ -0,0 +1,63 @@
1
+ export declare enum ContentTypeEnum {
2
+ text = "text",
3
+ image = "image",
4
+ multiLineText = "multi-line-text",
5
+ richText = "rich-text"
6
+ }
7
+ export declare enum TextAlignEnum {
8
+ center = "center",
9
+ left = "left",
10
+ right = "right"
11
+ }
12
+ export declare enum TextBaselineEnum {
13
+ top = "top",
14
+ bottom = "bottom",
15
+ middle = "middle"
16
+ }
17
+ export declare enum CreateWatermarkModeEnum {
18
+ default = "default",
19
+ blind = "blind"
20
+ }
21
+ export declare enum DecodeBlindWatermarkModeEnum {
22
+ canvas = "canvas",
23
+ html = "html",
24
+ svg = "svg"
25
+ }
26
+ export interface WatermarkDom extends HTMLDivElement {
27
+ __WATERMARK__?: string;
28
+ __WATERMARK__INSTANCE__?: any;
29
+ }
30
+ export interface WatermarkOptions {
31
+ width: number;
32
+ height: number;
33
+ rotate: number;
34
+ contentType: ContentTypeEnum;
35
+ content: string;
36
+ image?: string;
37
+ imageWidth: number;
38
+ imageHeight: number;
39
+ lineHeight: number;
40
+ zIndex: number;
41
+ backgroundPosition: string;
42
+ fontSize: number;
43
+ fontFamily: string;
44
+ textAlign: TextAlignEnum;
45
+ textBaseline: TextBaselineEnum;
46
+ fontColor: string;
47
+ globalAlpha: number;
48
+ fontWeight: string;
49
+ mode: CreateWatermarkModeEnum;
50
+ mutationObserve: boolean;
51
+ unique: boolean;
52
+ parent: Element | string;
53
+ onSuccess: Function;
54
+ onBeforeDestroy: Function;
55
+ onDestroyed: Function;
56
+ }
57
+ export interface DecodeBlindWatermarkOptions {
58
+ url: string;
59
+ fillColor: string;
60
+ compositeOperation: string;
61
+ mode: DecodeBlindWatermarkModeEnum;
62
+ onSuccess: Function;
63
+ }
package/dist/utils/index.d.ts ADDED
@@ -0,0 +1,9 @@
1
+ import { WatermarkOptions } from '../types';
2
+ export declare const convertImage: (canvas: HTMLCanvasElement) => string;
3
+ export declare const isFunction: (value: Function) => boolean;
4
+ export declare const createSVGElement: (tagName: string, attrs?: {
5
+ [key: string]: string;
6
+ }, namespaceURI?: string) => Element;
7
+ export declare const getMultiLineData: (ctx: CanvasRenderingContext2D, text: string, maxWidth: number) => string[];
8
+ export declare const createCustomContentSVG: (ctx: CanvasRenderingContext2D, options: WatermarkOptions) => Element;
9
+ export declare const convertSVGToImage: (svg: Element) => string;
package/dist/watermark.esm.js ADDED
@@ -0,0 +1,489 @@
1
+ /******************************************************************************
2
+ Copyright (c) Microsoft Corporation.
3
+
4
+ Permission to use, copy, modify, and/or distribute this software for any
5
+ purpose with or without fee is hereby granted.
6
+
7
+ THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
8
+ REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
9
+ AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
10
+ INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
11
+ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
12
+ OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
13
+ PERFORMANCE OF THIS SOFTWARE.
14
+ ***************************************************************************** */
15
+ /* global Reflect, Promise */
16
+
17
+ var extendStatics = function(d, b) {
18
+ extendStatics = Object.setPrototypeOf ||
19
+ ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
20
+ function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
21
+ return extendStatics(d, b);
22
+ };
23
+
24
+ function __extends(d, b) {
25
+ if (typeof b !== "function" && b !== null)
26
+ throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
27
+ extendStatics(d, b);
28
+ function __() { this.constructor = d; }
29
+ d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
30
+ }
31
+
32
+ function __awaiter(thisArg, _arguments, P, generator) {
33
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
34
+ return new (P || (P = Promise))(function (resolve, reject) {
35
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
36
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
37
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
38
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
39
+ });
40
+ }
41
+
42
+ function __generator(thisArg, body) {
43
+ var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
44
+ return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
45
+ function verb(n) { return function (v) { return step([n, v]); }; }
46
+ function step(op) {
47
+ if (f) throw new TypeError("Generator is already executing.");
48
+ while (_) try {
49
+ if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
50
+ if (y = 0, t) op = [op[0] & 2, t.value];
51
+ switch (op[0]) {
52
+ case 0: case 1: t = op; break;
53
+ case 4: _.label++; return { value: op[1], done: false };
54
+ case 5: _.label++; y = op[1]; op = [0]; continue;
55
+ case 7: op = _.ops.pop(); _.trys.pop(); continue;
56
+ default:
57
+ if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
58
+ if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
59
+ if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
60
+ if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
61
+ if (t[2]) _.ops.pop();
62
+ _.trys.pop(); continue;
63
+ }
64
+ op = body.call(thisArg, _);
65
+ } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
66
+ if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
67
+ }
68
+ }
69
+
70
+ var convertImage = function (canvas) {
71
+ return canvas.toDataURL('image/png', 1);
72
+ };
73
+ var isFunction = function (value) {
74
+ return typeof value === 'function';
75
+ };
76
+ var createSVGElement = function (tagName, attrs, namespaceURI) {
77
+ if (attrs === void 0) { attrs = {}; }
78
+ if (namespaceURI === void 0) { namespaceURI = 'http://www.w3.org/2000/svg'; }
79
+ var element = document.createElementNS(namespaceURI, tagName);
80
+ for (var attr in attrs) {
81
+ element.setAttribute(attr, attrs[attr]);
82
+ }
83
+ return element;
84
+ };
85
+ var getMultiLineData = function (ctx, text, maxWidth) {
86
+ var result = [];
87
+ var str = '';
88
+ for (var i = 0, len = text.length; i < len; i++) {
89
+ str += text.charAt(i);
90
+ if (ctx.measureText(str).width > maxWidth) {
91
+ result.push(str.substring(0, str.length - 1));
92
+ str = '';
93
+ i--;
94
+ }
95
+ }
96
+ result.push(str);
97
+ return result;
98
+ };
99
+ var createCustomContentSVG = function (ctx, options) {
100
+ var svgElement = createSVGElement('svg', {
101
+ xmlns: 'http://www.w3.org/2000/svg'
102
+ });
103
+ var foreignObjectElement = createSVGElement('foreignObject', {
104
+ width: options.width.toString(),
105
+ height: options.height.toString()
106
+ });
107
+ var bodyElement = document.createElement('div');
108
+ bodyElement.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
109
+ bodyElement.style.cssText = "\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n font: ".concat(ctx.font, ";\n color: ").concat(options.fontColor, ";\n ");
110
+ bodyElement.innerHTML = options.content;
111
+ foreignObjectElement.appendChild(bodyElement);
112
+ svgElement.appendChild(foreignObjectElement);
113
+ return svgElement;
114
+ };
115
+ var convertSVGToImage = function (svg) {
116
+ var richContent = svg.outerHTML.replace(/\n/g, '').replace(/\t/g, '').replace(/#/g, '%23');
117
+ return "data:image/svg+xml;charset=utf-8,".concat(richContent);
118
+ };
119
+
120
+ var ContentTypeEnum;
121
+ (function (ContentTypeEnum) {
122
+ ContentTypeEnum["text"] = "text";
123
+ ContentTypeEnum["image"] = "image";
124
+ ContentTypeEnum["multiLineText"] = "multi-line-text";
125
+ ContentTypeEnum["richText"] = "rich-text";
126
+ })(ContentTypeEnum || (ContentTypeEnum = {}));
127
+ var TextAlignEnum;
128
+ (function (TextAlignEnum) {
129
+ TextAlignEnum["center"] = "center";
130
+ TextAlignEnum["left"] = "left";
131
+ TextAlignEnum["right"] = "right";
132
+ })(TextAlignEnum || (TextAlignEnum = {}));
133
+ var TextBaselineEnum;
134
+ (function (TextBaselineEnum) {
135
+ TextBaselineEnum["top"] = "top";
136
+ TextBaselineEnum["bottom"] = "bottom";
137
+ TextBaselineEnum["middle"] = "middle";
138
+ })(TextBaselineEnum || (TextBaselineEnum = {}));
139
+ var CreateWatermarkModeEnum;
140
+ (function (CreateWatermarkModeEnum) {
141
+ CreateWatermarkModeEnum["default"] = "default";
142
+ CreateWatermarkModeEnum["blind"] = "blind";
143
+ })(CreateWatermarkModeEnum || (CreateWatermarkModeEnum = {}));
144
+ var DecodeBlindWatermarkModeEnum;
145
+ (function (DecodeBlindWatermarkModeEnum) {
146
+ DecodeBlindWatermarkModeEnum["canvas"] = "canvas";
147
+ DecodeBlindWatermarkModeEnum["html"] = "html";
148
+ DecodeBlindWatermarkModeEnum["svg"] = "svg";
149
+ })(DecodeBlindWatermarkModeEnum || (DecodeBlindWatermarkModeEnum = {}));
150
+
151
+ /**
152
+ * Watermark class
153
+ */
154
+ var Watermark = /** @class */ (function () {
155
+ /**
156
+ * Watermark constructor
157
+ * @param props - watermark options
158
+ */
159
+ function Watermark(props) {
160
+ if (props === void 0) { props = {}; }
161
+ var _a;
162
+ this.parentElement = document.body;
163
+ this.options = Object.assign({
164
+ width: 300,
165
+ height: 300,
166
+ rotate: 45,
167
+ contentType: ContentTypeEnum.text,
168
+ content: 'hello watermark-js-plus',
169
+ imageWidth: 0,
170
+ imageHeight: 0,
171
+ lineHeight: 30,
172
+ zIndex: 10000,
173
+ backgroundPosition: '0 0, 0 0',
174
+ fontSize: 20,
175
+ fontFamily: 'sans-serif',
176
+ textAlign: TextAlignEnum.center,
177
+ textBaseline: TextBaselineEnum.middle,
178
+ fontColor: '#000',
179
+ globalAlpha: 0.5,
180
+ fontWeight: 'normal',
181
+ mode: CreateWatermarkModeEnum.default,
182
+ mutationObserve: true,
183
+ unique: true,
184
+ parent: 'body',
185
+ onSuccess: function () { },
186
+ onBeforeDestroy: function () { },
187
+ onDestroyed: function () { }
188
+ }, props);
189
+ if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.rotate) {
190
+ this.options.rotate = (360 - this.options.rotate % 360) * (Math.PI / 180);
191
+ }
192
+ this.changeParentElement(this.options.parent);
193
+ }
194
+ /**
195
+ * Create an HD canvas.
196
+ * @param width - width of canvas
197
+ * @param height - height of canvas
198
+ */
199
+ Watermark.createCanvas = function (width, height) {
200
+ var _a;
201
+ var ratio = window.devicePixelRatio || 1;
202
+ var canvas = document.createElement('canvas');
203
+ canvas.width = width * ratio; // actual rendered pixel
204
+ canvas.height = height * ratio; // actual rendered pixel
205
+ canvas.style.width = "".concat(width, "px"); // control display size
206
+ canvas.style.height = "".concat(height, "px"); // control display size
207
+ (_a = canvas.getContext('2d')) === null || _a === void 0 ? void 0 : _a.setTransform(ratio, 0, 0, ratio, 0, 0);
208
+ return canvas;
209
+ };
210
+ Watermark.prototype.changeParentElement = function (parent) {
211
+ if (typeof parent === 'string') {
212
+ var parentElement = document.querySelector(parent);
213
+ parentElement && (this.parentElement = parentElement);
214
+ }
215
+ else {
216
+ this.parentElement = parent;
217
+ }
218
+ };
219
+ /**
220
+ * Creating a watermark.
221
+ */
222
+ Watermark.prototype.create = function () {
223
+ var _a, _b;
224
+ return __awaiter(this, void 0, void 0, function () {
225
+ var canvas, image, watermarkInnerDom;
226
+ return __generator(this, function (_c) {
227
+ switch (_c.label) {
228
+ case 0:
229
+ if (!this.validateUnique()) {
230
+ return [2 /*return*/];
231
+ }
232
+ if (!this.validateContent()) {
233
+ return [2 /*return*/];
234
+ }
235
+ return [4 /*yield*/, this.draw()];
236
+ case 1:
237
+ canvas = _c.sent();
238
+ image = convertImage(canvas);
239
+ this.watermarkDom = document.createElement('div');
240
+ watermarkInnerDom = document.createElement('div');
241
+ this.watermarkDom.__WATERMARK__ = 'watermark';
242
+ this.watermarkDom.__WATERMARK__INSTANCE__ = this;
243
+ this.watermarkDom.style.cssText = "\n z-index: ".concat(this.options.zIndex, ";\n position: relative;\n ");
244
+ watermarkInnerDom.style.cssText = "\n position: fixed;\n z-index: ".concat(this.options.zIndex, ";\n pointer-events: none;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n background-image: url(").concat(image, ");\n background-repeat: repeat;\n background-size: ").concat(this.options.width, "px ").concat(this.options.height, "px;\n background-position: ").concat(this.options.backgroundPosition, ";\n -webkit-print-color-adjust: exact;\n ");
245
+ this.watermarkDom.append(watermarkInnerDom);
246
+ this.parentElement.appendChild(this.watermarkDom);
247
+ if (this.options.mutationObserve) {
248
+ this.bindMutationObserve();
249
+ }
250
+ (_b = (_a = this.options).onSuccess) === null || _b === void 0 ? void 0 : _b.call(_a);
251
+ return [2 /*return*/];
252
+ }
253
+ });
254
+ });
255
+ };
256
+ /**
257
+ * Deleting this watermark.
258
+ */
259
+ Watermark.prototype.destroy = function () {
260
+ var _a, _b, _c, _d, _e, _f, _g;
261
+ (_b = (_a = this.options).onBeforeDestroy) === null || _b === void 0 ? void 0 : _b.call(_a);
262
+ (_c = this.observer) === null || _c === void 0 ? void 0 : _c.disconnect();
263
+ (_d = this.parentObserve) === null || _d === void 0 ? void 0 : _d.disconnect();
264
+ (_e = this.watermarkDom) === null || _e === void 0 ? void 0 : _e.remove();
265
+ (_g = (_f = this.options).onDestroyed) === null || _g === void 0 ? void 0 : _g.call(_f);
266
+ };
267
+ Watermark.prototype.validateUnique = function () {
268
+ var result = true;
269
+ if (this.options.unique) {
270
+ this.parentElement.childNodes.forEach(function (node) {
271
+ if (!result) {
272
+ return;
273
+ }
274
+ if (Object.hasOwnProperty.call(node, '__WATERMARK__')) {
275
+ result = false;
276
+ // throw new Error('duplicate watermark error')
277
+ }
278
+ });
279
+ }
280
+ return result;
281
+ };
282
+ Watermark.prototype.validateContent = function () {
283
+ switch (this.options.contentType) {
284
+ case ContentTypeEnum.image:
285
+ return Object.hasOwnProperty.call(this.options, 'image');
286
+ case ContentTypeEnum.multiLineText:
287
+ case ContentTypeEnum.richText:
288
+ case ContentTypeEnum.text:
289
+ return this.options.content.length > 0;
290
+ }
291
+ return false;
292
+ };
293
+ Watermark.prototype.draw = function () {
294
+ var _this = this;
295
+ var canvas = Watermark.createCanvas(this.options.width, this.options.height);
296
+ // document.body?.appendChild(canvas)
297
+ var ctx = canvas.getContext('2d');
298
+ if (ctx === null) {
299
+ throw new Error('get context error');
300
+ }
301
+ ctx.font = "".concat(this.options.fontWeight, " ").concat(this.options.fontSize, "px ").concat(this.options.fontFamily);
302
+ ctx.textAlign = this.options.textAlign;
303
+ ctx.textBaseline = this.options.textBaseline;
304
+ ctx.fillStyle = this.options.fontColor;
305
+ ctx.globalAlpha = this.options.globalAlpha;
306
+ return new Promise(function (resolve) {
307
+ switch (_this.options.contentType) {
308
+ case ContentTypeEnum.text:
309
+ _this.drawText(ctx, resolve);
310
+ break;
311
+ case ContentTypeEnum.image:
312
+ _this.drawImage(ctx, resolve);
313
+ break;
314
+ case ContentTypeEnum.multiLineText:
315
+ _this.drawMultiLineText(ctx, resolve);
316
+ break;
317
+ case ContentTypeEnum.richText:
318
+ _this.drawRichText(ctx, resolve);
319
+ break;
320
+ }
321
+ });
322
+ };
323
+ Watermark.prototype.drawText = function (ctx, resolve) {
324
+ ctx.translate(this.options.width / 2, this.options.height / 2);
325
+ ctx.rotate(this.options.rotate);
326
+ ctx.fillText(this.options.content, 0, 0);
327
+ resolve(ctx.canvas);
328
+ };
329
+ Watermark.prototype.drawImage = function (ctx, resolve) {
330
+ var _this = this;
331
+ var image = new Image();
332
+ image.setAttribute('crossOrigin', 'Anonymous');
333
+ image.src = this.options.image;
334
+ image.onload = function () {
335
+ ctx.translate(_this.options.width / 2, _this.options.height / 2);
336
+ ctx.rotate(_this.options.rotate);
337
+ var _a = _this.getImageRect(image), imageWidth = _a.width, imageHeight = _a.height;
338
+ ctx.drawImage(image, 0 - imageWidth / 2, 0 - imageHeight / 2, imageWidth, imageHeight);
339
+ resolve(ctx.canvas);
340
+ };
341
+ };
342
+ Watermark.prototype.drawMultiLineText = function (ctx, resolve) {
343
+ var _this = this;
344
+ // image.width = this.options.width
345
+ // image.height = this.options.height
346
+ // const element = createCustomContentSvg(context, this.options)
347
+ // image.src = convertSVGToImage(element)
348
+ // image.onload = () => {
349
+ // context.translate(this.options.width / 2, this.options.height / 2)
350
+ // context.rotate(this.options.rotate)
351
+ // context.drawImage(
352
+ // image,
353
+ // -this.options.width / 2,
354
+ // -this.options.height / 2,
355
+ // context.canvas.width,
356
+ // context.canvas.height
357
+ // )
358
+ // resolve(canvas)
359
+ // }
360
+ var lines = getMultiLineData(ctx, this.options.content, this.options.width);
361
+ ctx.translate(this.options.width / 2, this.options.height / 2);
362
+ ctx.rotate(this.options.rotate);
363
+ var yOffsetValue = (lines.length - 1) * this.options.lineHeight / 2;
364
+ lines.forEach(function (txt, index) {
365
+ ctx.fillText(txt, 0, _this.options.lineHeight * index - yOffsetValue);
366
+ });
367
+ resolve(ctx.canvas);
368
+ };
369
+ Watermark.prototype.drawRichText = function (ctx, resolve) {
370
+ var _this = this;
371
+ var image = new Image();
372
+ image.width = this.options.width;
373
+ image.height = this.options.height;
374
+ var element = createCustomContentSVG(ctx, this.options);
375
+ image.src = convertSVGToImage(element);
376
+ image.onload = function () {
377
+ ctx.translate(_this.options.width / 2, _this.options.height / 2);
378
+ ctx.rotate(_this.options.rotate);
379
+ ctx.drawImage(image, -_this.options.width / 2, -_this.options.height / 2, ctx.canvas.width, ctx.canvas.height);
380
+ resolve(ctx.canvas);
381
+ };
382
+ };
383
+ Watermark.prototype.getImageRect = function (image) {
384
+ var rect = { width: this.options.imageWidth, height: this.options.imageHeight };
385
+ switch (true) {
386
+ case rect.width !== 0 && rect.height === 0:
387
+ rect.height = rect.width * image.height / image.width;
388
+ break;
389
+ case rect.width === 0 && rect.height !== 0:
390
+ rect.width = rect.height * image.width / image.height;
391
+ break;
392
+ case rect.width === 0 && rect.height === 0:
393
+ rect.width = image.width;
394
+ rect.height = image.height;
395
+ break;
396
+ }
397
+ return rect;
398
+ };
399
+ Watermark.prototype.bindMutationObserve = function () {
400
+ var _this = this;
401
+ if (!this.watermarkDom) {
402
+ return;
403
+ }
404
+ this.observer = new MutationObserver(function (mutationsList) {
405
+ if (mutationsList.length > 0) {
406
+ _this.destroy();
407
+ _this.create();
408
+ }
409
+ });
410
+ this.observer.observe(this.watermarkDom, {
411
+ attributes: true,
412
+ childList: true,
413
+ subtree: true,
414
+ characterData: true // 节点内容或节点文本的变动。
415
+ });
416
+ this.parentObserve = new MutationObserver(function (mutationsList) {
417
+ mutationsList.forEach(function (item) {
418
+ var _a;
419
+ if ((item === null || item === void 0 ? void 0 : item.target) === _this.watermarkDom || ((_a = item === null || item === void 0 ? void 0 : item.removedNodes) === null || _a === void 0 ? void 0 : _a[0]) === _this.watermarkDom) {
420
+ _this.destroy();
421
+ _this.create();
422
+ }
423
+ });
424
+ });
425
+ this.parentObserve.observe(this.parentElement, {
426
+ attributes: true,
427
+ childList: true,
428
+ subtree: true,
429
+ characterData: true // 节点内容或节点文本的变动。
430
+ });
431
+ };
432
+ return Watermark;
433
+ }());
434
+
435
+ /**
436
+ * BlindWatermark class
437
+ */
438
+ var BlindWatermark = /** @class */ (function (_super) {
439
+ __extends(BlindWatermark, _super);
440
+ /**
441
+ * BlindWatermark constructor
442
+ * @param props - blind watermark options
443
+ */
444
+ function BlindWatermark(props) {
445
+ if (props === void 0) { props = {}; }
446
+ props.globalAlpha = 0.005;
447
+ props.mode = CreateWatermarkModeEnum.blind;
448
+ return _super.call(this, props) || this;
449
+ }
450
+ /**
451
+ * Decode blind watermark.
452
+ * @param props - decode options
453
+ */
454
+ BlindWatermark.decode = function (props) {
455
+ var options = Object.assign({
456
+ url: '',
457
+ fillColor: '#000',
458
+ compositeOperation: 'color-burn',
459
+ mode: DecodeBlindWatermarkModeEnum.canvas
460
+ }, props);
461
+ if (!options.url) {
462
+ return;
463
+ }
464
+ if (options.mode === DecodeBlindWatermarkModeEnum.canvas) {
465
+ var img_1 = new Image();
466
+ img_1.src = options.url;
467
+ img_1.onload = function () {
468
+ var _a;
469
+ var width = img_1.width, height = img_1.height;
470
+ var canvas = Watermark.createCanvas(width, height);
471
+ var ctx = canvas.getContext('2d');
472
+ if (ctx === null) {
473
+ throw new Error('get context error');
474
+ }
475
+ ctx.drawImage(img_1, 0, 0, width, height);
476
+ ctx.globalCompositeOperation = options.compositeOperation;
477
+ ctx.fillStyle = options.fillColor;
478
+ ctx.fillRect(0, 0, width, height);
479
+ var resultImage = convertImage(canvas);
480
+ if (options.onSuccess && isFunction(options.onSuccess)) {
481
+ (_a = options.onSuccess) === null || _a === void 0 ? void 0 : _a.call(options, resultImage);
482
+ }
483
+ };
484
+ }
485
+ };
486
+ return BlindWatermark;
487
+ }(Watermark));
488
+
489
+ export { BlindWatermark, Watermark };
package/dist/watermark.umd.js ADDED
@@ -0,0 +1,498 @@
1
+ (function (global, factory) {
2
+ typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
3
+ typeof define === 'function' && define.amd ? define(['exports'], factory) :
4
+ (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.watermark = {}));
5
+ })(this, (function (exports) { 'use strict';
6
+
7
+ /******************************************************************************
8
+ Copyright (c) Microsoft Corporation.
9
+
10
+ Permission to use, copy, modify, and/or distribute this software for any
11
+ purpose with or without fee is hereby granted.
12
+
13
+ THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
14
+ REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
15
+ AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
16
+ INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
17
+ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
18
+ OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
19
+ PERFORMANCE OF THIS SOFTWARE.
20
+ ***************************************************************************** */
21
+ /* global Reflect, Promise */
22
+
23
+ var extendStatics = function(d, b) {
24
+ extendStatics = Object.setPrototypeOf ||
25
+ ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
26
+ function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
27
+ return extendStatics(d, b);
28
+ };
29
+
30
+ function __extends(d, b) {
31
+ if (typeof b !== "function" && b !== null)
32
+ throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
33
+ extendStatics(d, b);
34
+ function __() { this.constructor = d; }
35
+ d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
36
+ }
37
+
38
+ function __awaiter(thisArg, _arguments, P, generator) {
39
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
40
+ return new (P || (P = Promise))(function (resolve, reject) {
41
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
42
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
43
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
44
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
45
+ });
46
+ }
47
+
48
+ function __generator(thisArg, body) {
49
+ var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
50
+ return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
51
+ function verb(n) { return function (v) { return step([n, v]); }; }
52
+ function step(op) {
53
+ if (f) throw new TypeError("Generator is already executing.");
54
+ while (_) try {
55
+ if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
56
+ if (y = 0, t) op = [op[0] & 2, t.value];
57
+ switch (op[0]) {
58
+ case 0: case 1: t = op; break;
59
+ case 4: _.label++; return { value: op[1], done: false };
60
+ case 5: _.label++; y = op[1]; op = [0]; continue;
61
+ case 7: op = _.ops.pop(); _.trys.pop(); continue;
62
+ default:
63
+ if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
64
+ if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
65
+ if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
66
+ if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
67
+ if (t[2]) _.ops.pop();
68
+ _.trys.pop(); continue;
69
+ }
70
+ op = body.call(thisArg, _);
71
+ } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
72
+ if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
73
+ }
74
+ }
75
+
76
+ var convertImage = function (canvas) {
77
+ return canvas.toDataURL('image/png', 1);
78
+ };
79
+ var isFunction = function (value) {
80
+ return typeof value === 'function';
81
+ };
82
+ var createSVGElement = function (tagName, attrs, namespaceURI) {
83
+ if (attrs === void 0) { attrs = {}; }
84
+ if (namespaceURI === void 0) { namespaceURI = 'http://www.w3.org/2000/svg'; }
85
+ var element = document.createElementNS(namespaceURI, tagName);
86
+ for (var attr in attrs) {
87
+ element.setAttribute(attr, attrs[attr]);
88
+ }
89
+ return element;
90
+ };
91
+ var getMultiLineData = function (ctx, text, maxWidth) {
92
+ var result = [];
93
+ var str = '';
94
+ for (var i = 0, len = text.length; i < len; i++) {
95
+ str += text.charAt(i);
96
+ if (ctx.measureText(str).width > maxWidth) {
97
+ result.push(str.substring(0, str.length - 1));
98
+ str = '';
99
+ i--;
100
+ }
101
+ }
102
+ result.push(str);
103
+ return result;
104
+ };
105
+ var createCustomContentSVG = function (ctx, options) {
106
+ var svgElement = createSVGElement('svg', {
107
+ xmlns: 'http://www.w3.org/2000/svg'
108
+ });
109
+ var foreignObjectElement = createSVGElement('foreignObject', {
110
+ width: options.width.toString(),
111
+ height: options.height.toString()
112
+ });
113
+ var bodyElement = document.createElement('div');
114
+ bodyElement.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
115
+ bodyElement.style.cssText = "\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n font: ".concat(ctx.font, ";\n color: ").concat(options.fontColor, ";\n ");
116
+ bodyElement.innerHTML = options.content;
117
+ foreignObjectElement.appendChild(bodyElement);
118
+ svgElement.appendChild(foreignObjectElement);
119
+ return svgElement;
120
+ };
121
+ var convertSVGToImage = function (svg) {
122
+ var richContent = svg.outerHTML.replace(/\n/g, '').replace(/\t/g, '').replace(/#/g, '%23');
123
+ return "data:image/svg+xml;charset=utf-8,".concat(richContent);
124
+ };
125
+
126
+ var ContentTypeEnum;
127
+ (function (ContentTypeEnum) {
128
+ ContentTypeEnum["text"] = "text";
129
+ ContentTypeEnum["image"] = "image";
130
+ ContentTypeEnum["multiLineText"] = "multi-line-text";
131
+ ContentTypeEnum["richText"] = "rich-text";
132
+ })(ContentTypeEnum || (ContentTypeEnum = {}));
133
+ var TextAlignEnum;
134
+ (function (TextAlignEnum) {
135
+ TextAlignEnum["center"] = "center";
136
+ TextAlignEnum["left"] = "left";
137
+ TextAlignEnum["right"] = "right";
138
+ })(TextAlignEnum || (TextAlignEnum = {}));
139
+ var TextBaselineEnum;
140
+ (function (TextBaselineEnum) {
141
+ TextBaselineEnum["top"] = "top";
142
+ TextBaselineEnum["bottom"] = "bottom";
143
+ TextBaselineEnum["middle"] = "middle";
144
+ })(TextBaselineEnum || (TextBaselineEnum = {}));
145
+ var CreateWatermarkModeEnum;
146
+ (function (CreateWatermarkModeEnum) {
147
+ CreateWatermarkModeEnum["default"] = "default";
148
+ CreateWatermarkModeEnum["blind"] = "blind";
149
+ })(CreateWatermarkModeEnum || (CreateWatermarkModeEnum = {}));
150
+ var DecodeBlindWatermarkModeEnum;
151
+ (function (DecodeBlindWatermarkModeEnum) {
152
+ DecodeBlindWatermarkModeEnum["canvas"] = "canvas";
153
+ DecodeBlindWatermarkModeEnum["html"] = "html";
154
+ DecodeBlindWatermarkModeEnum["svg"] = "svg";
155
+ })(DecodeBlindWatermarkModeEnum || (DecodeBlindWatermarkModeEnum = {}));
156
+
157
+ /**
158
+ * Watermark class
159
+ */
160
+ var Watermark = /** @class */ (function () {
161
+ /**
162
+ * Watermark constructor
163
+ * @param props - watermark options
164
+ */
165
+ function Watermark(props) {
166
+ if (props === void 0) { props = {}; }
167
+ var _a;
168
+ this.parentElement = document.body;
169
+ this.options = Object.assign({
170
+ width: 300,
171
+ height: 300,
172
+ rotate: 45,
173
+ contentType: ContentTypeEnum.text,
174
+ content: 'hello watermark-js-plus',
175
+ imageWidth: 0,
176
+ imageHeight: 0,
177
+ lineHeight: 30,
178
+ zIndex: 10000,
179
+ backgroundPosition: '0 0, 0 0',
180
+ fontSize: 20,
181
+ fontFamily: 'sans-serif',
182
+ textAlign: TextAlignEnum.center,
183
+ textBaseline: TextBaselineEnum.middle,
184
+ fontColor: '#000',
185
+ globalAlpha: 0.5,
186
+ fontWeight: 'normal',
187
+ mode: CreateWatermarkModeEnum.default,
188
+ mutationObserve: true,
189
+ unique: true,
190
+ parent: 'body',
191
+ onSuccess: function () { },
192
+ onBeforeDestroy: function () { },
193
+ onDestroyed: function () { }
194
+ }, props);
195
+ if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.rotate) {
196
+ this.options.rotate = (360 - this.options.rotate % 360) * (Math.PI / 180);
197
+ }
198
+ this.changeParentElement(this.options.parent);
199
+ }
200
+ /**
201
+ * Create an HD canvas.
202
+ * @param width - width of canvas
203
+ * @param height - height of canvas
204
+ */
205
+ Watermark.createCanvas = function (width, height) {
206
+ var _a;
207
+ var ratio = window.devicePixelRatio || 1;
208
+ var canvas = document.createElement('canvas');
209
+ canvas.width = width * ratio; // actual rendered pixel
210
+ canvas.height = height * ratio; // actual rendered pixel
211
+ canvas.style.width = "".concat(width, "px"); // control display size
212
+ canvas.style.height = "".concat(height, "px"); // control display size
213
+ (_a = canvas.getContext('2d')) === null || _a === void 0 ? void 0 : _a.setTransform(ratio, 0, 0, ratio, 0, 0);
214
+ return canvas;
215
+ };
216
+ Watermark.prototype.changeParentElement = function (parent) {
217
+ if (typeof parent === 'string') {
218
+ var parentElement = document.querySelector(parent);
219
+ parentElement && (this.parentElement = parentElement);
220
+ }
221
+ else {
222
+ this.parentElement = parent;
223
+ }
224
+ };
225
+ /**
226
+ * Creating a watermark.
227
+ */
228
+ Watermark.prototype.create = function () {
229
+ var _a, _b;
230
+ return __awaiter(this, void 0, void 0, function () {
231
+ var canvas, image, watermarkInnerDom;
232
+ return __generator(this, function (_c) {
233
+ switch (_c.label) {
234
+ case 0:
235
+ if (!this.validateUnique()) {
236
+ return [2 /*return*/];
237
+ }
238
+ if (!this.validateContent()) {
239
+ return [2 /*return*/];
240
+ }
241
+ return [4 /*yield*/, this.draw()];
242
+ case 1:
243
+ canvas = _c.sent();
244
+ image = convertImage(canvas);
245
+ this.watermarkDom = document.createElement('div');
246
+ watermarkInnerDom = document.createElement('div');
247
+ this.watermarkDom.__WATERMARK__ = 'watermark';
248
+ this.watermarkDom.__WATERMARK__INSTANCE__ = this;
249
+ this.watermarkDom.style.cssText = "\n z-index: ".concat(this.options.zIndex, ";\n position: relative;\n ");
250
+ watermarkInnerDom.style.cssText = "\n position: fixed;\n z-index: ".concat(this.options.zIndex, ";\n pointer-events: none;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n background-image: url(").concat(image, ");\n background-repeat: repeat;\n background-size: ").concat(this.options.width, "px ").concat(this.options.height, "px;\n background-position: ").concat(this.options.backgroundPosition, ";\n -webkit-print-color-adjust: exact;\n ");
251
+ this.watermarkDom.append(watermarkInnerDom);
252
+ this.parentElement.appendChild(this.watermarkDom);
253
+ if (this.options.mutationObserve) {
254
+ this.bindMutationObserve();
255
+ }
256
+ (_b = (_a = this.options).onSuccess) === null || _b === void 0 ? void 0 : _b.call(_a);
257
+ return [2 /*return*/];
258
+ }
259
+ });
260
+ });
261
+ };
262
+ /**
263
+ * Deleting this watermark.
264
+ */
265
+ Watermark.prototype.destroy = function () {
266
+ var _a, _b, _c, _d, _e, _f, _g;
267
+ (_b = (_a = this.options).onBeforeDestroy) === null || _b === void 0 ? void 0 : _b.call(_a);
268
+ (_c = this.observer) === null || _c === void 0 ? void 0 : _c.disconnect();
269
+ (_d = this.parentObserve) === null || _d === void 0 ? void 0 : _d.disconnect();
270
+ (_e = this.watermarkDom) === null || _e === void 0 ? void 0 : _e.remove();
271
+ (_g = (_f = this.options).onDestroyed) === null || _g === void 0 ? void 0 : _g.call(_f);
272
+ };
273
+ Watermark.prototype.validateUnique = function () {
274
+ var result = true;
275
+ if (this.options.unique) {
276
+ this.parentElement.childNodes.forEach(function (node) {
277
+ if (!result) {
278
+ return;
279
+ }
280
+ if (Object.hasOwnProperty.call(node, '__WATERMARK__')) {
281
+ result = false;
282
+ // throw new Error('duplicate watermark error')
283
+ }
284
+ });
285
+ }
286
+ return result;
287
+ };
288
+ Watermark.prototype.validateContent = function () {
289
+ switch (this.options.contentType) {
290
+ case ContentTypeEnum.image:
291
+ return Object.hasOwnProperty.call(this.options, 'image');
292
+ case ContentTypeEnum.multiLineText:
293
+ case ContentTypeEnum.richText:
294
+ case ContentTypeEnum.text:
295
+ return this.options.content.length > 0;
296
+ }
297
+ return false;
298
+ };
299
+ Watermark.prototype.draw = function () {
300
+ var _this = this;
301
+ var canvas = Watermark.createCanvas(this.options.width, this.options.height);
302
+ // document.body?.appendChild(canvas)
303
+ var ctx = canvas.getContext('2d');
304
+ if (ctx === null) {
305
+ throw new Error('get context error');
306
+ }
307
+ ctx.font = "".concat(this.options.fontWeight, " ").concat(this.options.fontSize, "px ").concat(this.options.fontFamily);
308
+ ctx.textAlign = this.options.textAlign;
309
+ ctx.textBaseline = this.options.textBaseline;
310
+ ctx.fillStyle = this.options.fontColor;
311
+ ctx.globalAlpha = this.options.globalAlpha;
312
+ return new Promise(function (resolve) {
313
+ switch (_this.options.contentType) {
314
+ case ContentTypeEnum.text:
315
+ _this.drawText(ctx, resolve);
316
+ break;
317
+ case ContentTypeEnum.image:
318
+ _this.drawImage(ctx, resolve);
319
+ break;
320
+ case ContentTypeEnum.multiLineText:
321
+ _this.drawMultiLineText(ctx, resolve);
322
+ break;
323
+ case ContentTypeEnum.richText:
324
+ _this.drawRichText(ctx, resolve);
325
+ break;
326
+ }
327
+ });
328
+ };
329
+ Watermark.prototype.drawText = function (ctx, resolve) {
330
+ ctx.translate(this.options.width / 2, this.options.height / 2);
331
+ ctx.rotate(this.options.rotate);
332
+ ctx.fillText(this.options.content, 0, 0);
333
+ resolve(ctx.canvas);
334
+ };
335
+ Watermark.prototype.drawImage = function (ctx, resolve) {
336
+ var _this = this;
337
+ var image = new Image();
338
+ image.setAttribute('crossOrigin', 'Anonymous');
339
+ image.src = this.options.image;
340
+ image.onload = function () {
341
+ ctx.translate(_this.options.width / 2, _this.options.height / 2);
342
+ ctx.rotate(_this.options.rotate);
343
+ var _a = _this.getImageRect(image), imageWidth = _a.width, imageHeight = _a.height;
344
+ ctx.drawImage(image, 0 - imageWidth / 2, 0 - imageHeight / 2, imageWidth, imageHeight);
345
+ resolve(ctx.canvas);
346
+ };
347
+ };
348
+ Watermark.prototype.drawMultiLineText = function (ctx, resolve) {
349
+ var _this = this;
350
+ // image.width = this.options.width
351
+ // image.height = this.options.height
352
+ // const element = createCustomContentSvg(context, this.options)
353
+ // image.src = convertSVGToImage(element)
354
+ // image.onload = () => {
355
+ // context.translate(this.options.width / 2, this.options.height / 2)
356
+ // context.rotate(this.options.rotate)
357
+ // context.drawImage(
358
+ // image,
359
+ // -this.options.width / 2,
360
+ // -this.options.height / 2,
361
+ // context.canvas.width,
362
+ // context.canvas.height
363
+ // )
364
+ // resolve(canvas)
365
+ // }
366
+ var lines = getMultiLineData(ctx, this.options.content, this.options.width);
367
+ ctx.translate(this.options.width / 2, this.options.height / 2);
368
+ ctx.rotate(this.options.rotate);
369
+ var yOffsetValue = (lines.length - 1) * this.options.lineHeight / 2;
370
+ lines.forEach(function (txt, index) {
371
+ ctx.fillText(txt, 0, _this.options.lineHeight * index - yOffsetValue);
372
+ });
373
+ resolve(ctx.canvas);
374
+ };
375
+ Watermark.prototype.drawRichText = function (ctx, resolve) {
376
+ var _this = this;
377
+ var image = new Image();
378
+ image.width = this.options.width;
379
+ image.height = this.options.height;
380
+ var element = createCustomContentSVG(ctx, this.options);
381
+ image.src = convertSVGToImage(element);
382
+ image.onload = function () {
383
+ ctx.translate(_this.options.width / 2, _this.options.height / 2);
384
+ ctx.rotate(_this.options.rotate);
385
+ ctx.drawImage(image, -_this.options.width / 2, -_this.options.height / 2, ctx.canvas.width, ctx.canvas.height);
386
+ resolve(ctx.canvas);
387
+ };
388
+ };
389
+ Watermark.prototype.getImageRect = function (image) {
390
+ var rect = { width: this.options.imageWidth, height: this.options.imageHeight };
391
+ switch (true) {
392
+ case rect.width !== 0 && rect.height === 0:
393
+ rect.height = rect.width * image.height / image.width;
394
+ break;
395
+ case rect.width === 0 && rect.height !== 0:
396
+ rect.width = rect.height * image.width / image.height;
397
+ break;
398
+ case rect.width === 0 && rect.height === 0:
399
+ rect.width = image.width;
400
+ rect.height = image.height;
401
+ break;
402
+ }
403
+ return rect;
404
+ };
405
+ Watermark.prototype.bindMutationObserve = function () {
406
+ var _this = this;
407
+ if (!this.watermarkDom) {
408
+ return;
409
+ }
410
+ this.observer = new MutationObserver(function (mutationsList) {
411
+ if (mutationsList.length > 0) {
412
+ _this.destroy();
413
+ _this.create();
414
+ }
415
+ });
416
+ this.observer.observe(this.watermarkDom, {
417
+ attributes: true,
418
+ childList: true,
419
+ subtree: true,
420
+ characterData: true // 节点内容或节点文本的变动。
421
+ });
422
+ this.parentObserve = new MutationObserver(function (mutationsList) {
423
+ mutationsList.forEach(function (item) {
424
+ var _a;
425
+ if ((item === null || item === void 0 ? void 0 : item.target) === _this.watermarkDom || ((_a = item === null || item === void 0 ? void 0 : item.removedNodes) === null || _a === void 0 ? void 0 : _a[0]) === _this.watermarkDom) {
426
+ _this.destroy();
427
+ _this.create();
428
+ }
429
+ });
430
+ });
431
+ this.parentObserve.observe(this.parentElement, {
432
+ attributes: true,
433
+ childList: true,
434
+ subtree: true,
435
+ characterData: true // 节点内容或节点文本的变动。
436
+ });
437
+ };
438
+ return Watermark;
439
+ }());
440
+
441
+ /**
442
+ * BlindWatermark class
443
+ */
444
+ var BlindWatermark = /** @class */ (function (_super) {
445
+ __extends(BlindWatermark, _super);
446
+ /**
447
+ * BlindWatermark constructor
448
+ * @param props - blind watermark options
449
+ */
450
+ function BlindWatermark(props) {
451
+ if (props === void 0) { props = {}; }
452
+ props.globalAlpha = 0.005;
453
+ props.mode = CreateWatermarkModeEnum.blind;
454
+ return _super.call(this, props) || this;
455
+ }
456
+ /**
457
+ * Decode blind watermark.
458
+ * @param props - decode options
459
+ */
460
+ BlindWatermark.decode = function (props) {
461
+ var options = Object.assign({
462
+ url: '',
463
+ fillColor: '#000',
464
+ compositeOperation: 'color-burn',
465
+ mode: DecodeBlindWatermarkModeEnum.canvas
466
+ }, props);
467
+ if (!options.url) {
468
+ return;
469
+ }
470
+ if (options.mode === DecodeBlindWatermarkModeEnum.canvas) {
471
+ var img_1 = new Image();
472
+ img_1.src = options.url;
473
+ img_1.onload = function () {
474
+ var _a;
475
+ var width = img_1.width, height = img_1.height;
476
+ var canvas = Watermark.createCanvas(width, height);
477
+ var ctx = canvas.getContext('2d');
478
+ if (ctx === null) {
479
+ throw new Error('get context error');
480
+ }
481
+ ctx.drawImage(img_1, 0, 0, width, height);
482
+ ctx.globalCompositeOperation = options.compositeOperation;
483
+ ctx.fillStyle = options.fillColor;
484
+ ctx.fillRect(0, 0, width, height);
485
+ var resultImage = convertImage(canvas);
486
+ if (options.onSuccess && isFunction(options.onSuccess)) {
487
+ (_a = options.onSuccess) === null || _a === void 0 ? void 0 : _a.call(options, resultImage);
488
+ }
489
+ };
490
+ }
491
+ };
492
+ return BlindWatermark;
493
+ }(Watermark));
494
+
495
+ exports.BlindWatermark = BlindWatermark;
496
+ exports.Watermark = Watermark;
497
+
498
+ }));
package/dist/watermark.umd.min.js ADDED
@@ -0,0 +1 @@
1
+ !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).watermark={})}(this,(function(t){"use strict";var e=function(t,n){return e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n])},e(t,n)};function n(t,e,n,o){return new(n||(n=Promise))((function(i,r){function a(t){try{c(o.next(t))}catch(t){r(t)}}function s(t){try{c(o.throw(t))}catch(t){r(t)}}function c(t){var e;t.done?i(t.value):(e=t.value,e instanceof n?e:new n((function(t){t(e)}))).then(a,s)}c((o=o.apply(t,e||[])).next())}))}function o(t,e){var n,o,i,r,a={label:0,sent:function(){if(1&i[0])throw i[1];return i[1]},trys:[],ops:[]};return r={next:s(0),throw:s(1),return:s(2)},"function"==typeof Symbol&&(r[Symbol.iterator]=function(){return this}),r;function s(r){return function(s){return function(r){if(n)throw new TypeError("Generator is already executing.");for(;a;)try{if(n=1,o&&(i=2&r[0]?o.return:r[0]?o.throw||((i=o.return)&&i.call(o),0):o.next)&&!(i=i.call(o,r[1])).done)return i;switch(o=0,i&&(r=[2&r[0],i.value]),r[0]){case 0:case 1:i=r;break;case 4:return a.label++,{value:r[1],done:!1};case 5:a.label++,o=r[1],r=[0];continue;case 7:r=a.ops.pop(),a.trys.pop();continue;default:if(!(i=a.trys,(i=i.length>0&&i[i.length-1])||6!==r[0]&&2!==r[0])){a=0;continue}if(3===r[0]&&(!i||r[1]>i[0]&&r[1]<i[3])){a.label=r[1];break}if(6===r[0]&&a.label<i[1]){a.label=i[1],i=r;break}if(i&&a.label<i[2]){a.label=i[2],a.ops.push(r);break}i[2]&&a.ops.pop(),a.trys.pop();continue}r=e.call(t,a)}catch(t){r=[6,t],o=0}finally{n=i=0}if(5&r[0])throw r[1];return{value:r[0]?r[1]:void 0,done:!0}}([r,s])}}}var i,r,a,s,c,h=function(t){return t.toDataURL("image/png",1)},l=function(t,e,n){void 0===e&&(e={}),void 0===n&&(n="http://www.w3.org/2000/svg");var o=document.createElementNS(n,t);for(var i in e)o.setAttribute(i,e[i]);return o};!function(t){t.text="text",t.image="image",t.multiLineText="multi-line-text",t.richText="rich-text"}(i||(i={})),function(t){t.center="center",t.left="left",t.right="right"}(r||(r={})),function(t){t.top="top",t.bottom="bottom",t.middle="middle"}(a||(a={})),function(t){t.default="default",t.blind="blind"}(s||(s={})),function(t){t.canvas="canvas",t.html="html",t.svg="svg"}(c||(c={}));var u=function(){function t(t){var e;void 0===t&&(t={}),this.parentElement=document.body,this.options=Object.assign({width:300,height:300,rotate:45,contentType:i.text,content:"hello watermark-js-plus",imageWidth:0,imageHeight:0,lineHeight:30,zIndex:1e4,backgroundPosition:"0 0, 0 0",fontSize:20,fontFamily:"sans-serif",textAlign:r.center,textBaseline:a.middle,fontColor:"#000",globalAlpha:.5,fontWeight:"normal",mode:s.default,mutationObserve:!0,unique:!0,parent:"body",onSuccess:function(){},onBeforeDestroy:function(){},onDestroyed:function(){}},t),(null===(e=this.options)||void 0===e?void 0:e.rotate)&&(this.options.rotate=(360-this.options.rotate%360)*(Math.PI/180)),this.changeParentElement(this.options.parent)}return t.createCanvas=function(t,e){var n,o=window.devicePixelRatio||1,i=document.createElement("canvas");return i.width=t*o,i.height=e*o,i.style.width="".concat(t,"px"),i.style.height="".concat(e,"px"),null===(n=i.getContext("2d"))||void 0===n||n.setTransform(o,0,0,o,0,0),i},t.prototype.changeParentElement=function(t){if("string"==typeof t){var e=document.querySelector(t);e&&(this.parentElement=e)}else this.parentElement=t},t.prototype.create=function(){var t,e;return n(this,void 0,void 0,(function(){var n,i,r;return o(this,(function(o){switch(o.label){case 0:return this.validateUnique()&&this.validateContent()?[4,this.draw()]:[2];case 1:return n=o.sent(),i=h(n),this.watermarkDom=document.createElement("div"),r=document.createElement("div"),this.watermarkDom.__WATERMARK__="watermark",this.watermarkDom.__WATERMARK__INSTANCE__=this,this.watermarkDom.style.cssText="\n z-index: ".concat(this.options.zIndex,";\n position: relative;\n "),r.style.cssText="\n position: fixed;\n z-index: ".concat(this.options.zIndex,";\n pointer-events: none;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n background-image: url(").concat(i,");\n background-repeat: repeat;\n background-size: ").concat(this.options.width,"px ").concat(this.options.height,"px;\n background-position: ").concat(this.options.backgroundPosition,";\n -webkit-print-color-adjust: exact;\n "),this.watermarkDom.append(r),this.parentElement.appendChild(this.watermarkDom),this.options.mutationObserve&&this.bindMutationObserve(),null===(e=(t=this.options).onSuccess)||void 0===e||e.call(t),[2]}}))}))},t.prototype.destroy=function(){var t,e,n,o,i,r,a;null===(e=(t=this.options).onBeforeDestroy)||void 0===e||e.call(t),null===(n=this.observer)||void 0===n||n.disconnect(),null===(o=this.parentObserve)||void 0===o||o.disconnect(),null===(i=this.watermarkDom)||void 0===i||i.remove(),null===(a=(r=this.options).onDestroyed)||void 0===a||a.call(r)},t.prototype.validateUnique=function(){var t=!0;return this.options.unique&&this.parentElement.childNodes.forEach((function(e){t&&Object.hasOwnProperty.call(e,"__WATERMARK__")&&(t=!1)})),t},t.prototype.validateContent=function(){switch(this.options.contentType){case i.image:return Object.hasOwnProperty.call(this.options,"image");case i.multiLineText:case i.richText:case i.text:return this.options.content.length>0}return!1},t.prototype.draw=function(){var e=this,n=t.createCanvas(this.options.width,this.options.height).getContext("2d");if(null===n)throw new Error("get context error");return n.font="".concat(this.options.fontWeight," ").concat(this.options.fontSize,"px ").concat(this.options.fontFamily),n.textAlign=this.options.textAlign,n.textBaseline=this.options.textBaseline,n.fillStyle=this.options.fontColor,n.globalAlpha=this.options.globalAlpha,new Promise((function(t){switch(e.options.contentType){case i.text:e.drawText(n,t);break;case i.image:e.drawImage(n,t);break;case i.multiLineText:e.drawMultiLineText(n,t);break;case i.richText:e.drawRichText(n,t)}}))},t.prototype.drawText=function(t,e){t.translate(this.options.width/2,this.options.height/2),t.rotate(this.options.rotate),t.fillText(this.options.content,0,0),e(t.canvas)},t.prototype.drawImage=function(t,e){var n=this,o=new Image;o.setAttribute("crossOrigin","Anonymous"),o.src=this.options.image,o.onload=function(){t.translate(n.options.width/2,n.options.height/2),t.rotate(n.options.rotate);var i=n.getImageRect(o),r=i.width,a=i.height;t.drawImage(o,0-r/2,0-a/2,r,a),e(t.canvas)}},t.prototype.drawMultiLineText=function(t,e){var n=this,o=function(t,e,n){for(var o=[],i="",r=0,a=e.length;r<a;r++)i+=e.charAt(r),t.measureText(i).width>n&&(o.push(i.substring(0,i.length-1)),i="",r--);return o.push(i),o}(t,this.options.content,this.options.width);t.translate(this.options.width/2,this.options.height/2),t.rotate(this.options.rotate);var i=(o.length-1)*this.options.lineHeight/2;o.forEach((function(e,o){t.fillText(e,0,n.options.lineHeight*o-i)})),e(t.canvas)},t.prototype.drawRichText=function(t,e){var n=this,o=new Image;o.width=this.options.width,o.height=this.options.height;var i,r=function(t,e){var n=l("svg",{xmlns:"http://www.w3.org/2000/svg"}),o=l("foreignObject",{width:e.width.toString(),height:e.height.toString()}),i=document.createElement("div");return i.setAttribute("xmlns","http://www.w3.org/1999/xhtml"),i.style.cssText="\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n font: ".concat(t.font,";\n color: ").concat(e.fontColor,";\n "),i.innerHTML=e.content,o.appendChild(i),n.appendChild(o),n}(t,this.options);o.src=(i=r.outerHTML.replace(/\n/g,"").replace(/\t/g,"").replace(/#/g,"%23"),"data:image/svg+xml;charset=utf-8,".concat(i)),o.onload=function(){t.translate(n.options.width/2,n.options.height/2),t.rotate(n.options.rotate),t.drawImage(o,-n.options.width/2,-n.options.height/2,t.canvas.width,t.canvas.height),e(t.canvas)}},t.prototype.getImageRect=function(t){var e={width:this.options.imageWidth,height:this.options.imageHeight};switch(!0){case 0!==e.width&&0===e.height:e.height=e.width*t.height/t.width;break;case 0===e.width&&0!==e.height:e.width=e.height*t.width/t.height;break;case 0===e.width&&0===e.height:e.width=t.width,e.height=t.height}return e},t.prototype.bindMutationObserve=function(){var t=this;this.watermarkDom&&(this.observer=new MutationObserver((function(e){e.length>0&&(t.destroy(),t.create())})),this.observer.observe(this.watermarkDom,{attributes:!0,childList:!0,subtree:!0,characterData:!0}),this.parentObserve=new MutationObserver((function(e){e.forEach((function(e){var n;(null==e?void 0:e.target)!==t.watermarkDom&&(null===(n=null==e?void 0:e.removedNodes)||void 0===n?void 0:n[0])!==t.watermarkDom||(t.destroy(),t.create())}))})),this.parentObserve.observe(this.parentElement,{attributes:!0,childList:!0,subtree:!0,characterData:!0}))},t}(),p=function(t){function n(e){return void 0===e&&(e={}),e.globalAlpha=.005,e.mode=s.blind,t.call(this,e)||this}return function(t,n){if("function"!=typeof n&&null!==n)throw new TypeError("Class extends value "+String(n)+" is not a constructor or null");function o(){this.constructor=t}e(t,n),t.prototype=null===n?Object.create(n):(o.prototype=n.prototype,new o)}(n,t),n.decode=function(t){var e=Object.assign({url:"",fillColor:"#000",compositeOperation:"color-burn",mode:c.canvas},t);if(e.url&&e.mode===c.canvas){var n=new Image;n.src=e.url,n.onload=function(){var t,o=n.width,i=n.height,r=u.createCanvas(o,i),a=r.getContext("2d");if(null===a)throw new Error("get context error");a.drawImage(n,0,0,o,i),a.globalCompositeOperation=e.compositeOperation,a.fillStyle=e.fillColor,a.fillRect(0,0,o,i);var s=h(r);e.onSuccess&&"function"==typeof e.onSuccess&&(null===(t=e.onSuccess)||void 0===t||t.call(e,s))}}},n}(u);t.BlindWatermark=p,t.Watermark=u}));
package/package.json CHANGED
@@ -1,16 +1,15 @@
1
1
  {
2
2
  "name": "watermark-js-plus",
3
- "version": "0.0.3",
3
+ "version": "0.1.0",
4
4
  "description": "watermark for the browser",
5
- "type": "module",
6
5
  "scripts": {
7
6
  "test": "echo \"Error: no test specified\" && exit 1",
8
7
  "prepare": "husky install",
9
8
  "lint": "npx eslint \"src/*.{ts,js}\"",
10
9
  "dev": "concurrently \"npm run src:dev\" \"npm run docs:dev\"",
11
- "src:dev": "rollup -c --watch --bundleConfigAsCjs",
12
- "build": "rollup -c --bundleConfigAsCjs --environment NODE_ENV:production",
13
- "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0 -n changelog-option.cjs",
10
+ "src:dev": "rollup -c --watch",
11
+ "build": "rollup -c --environment NODE_ENV:production",
12
+ "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0 -n changelog-option.js",
14
13
  "docs:dev": "vitepress dev docs",
15
14
  "docs:build": "vitepress build docs",
16
15
  "docs:serve": "vitepress serve docs",
@@ -36,16 +35,11 @@
36
35
  "防删除水印",
37
36
  "解密水印"
38
37
  ],
39
- "exports": {
40
- ".": {
41
- "types": "./dist/index.js",
42
- "require": "./dist/index.js",
43
- "import": "./dist/index.js"
44
- }
45
- },
46
- "main": "dist/index.js",
47
- "module": "dist/index.js",
48
- "types": "dist/index.js",
38
+ "main": "dist/watermark.esm.js",
39
+ "module": "dist/watermark.esm.js",
40
+ "browser": "dist/watermark.umd.min.js",
41
+ "unpkg": "",
42
+ "types": "dist/index.d.ts",
49
43
  "files": [
50
44
  "dist"
51
45
  ],
@@ -62,10 +56,10 @@
62
56
  "@rollup/plugin-eslint": "^9.0.1",
63
57
  "@rollup/plugin-node-resolve": "^15.0.1",
64
58
  "@rollup/plugin-replace": "^5.0.1",
65
- "@rollup/plugin-terser": "^0.2.0",
59
+ "@rollup/plugin-terser": "0.1.0",
66
60
  "@rollup/plugin-typescript": "^10.0.1",
67
61
  "@types/markdown-it": "^12.2.3",
68
- "@typescript-eslint/parser": "^5.45.1",
62
+ "@typescript-eslint/parser": "^5.46.1",
69
63
  "@vue/theme": "^1.3.0",
70
64
  "concurrently": "^7.6.0",
71
65
  "conventional-changelog-angular": "^5.0.13",
@@ -79,12 +73,12 @@
79
73
  "husky": "^8.0.2",
80
74
  "lint-staged": "^13.1.0",
81
75
  "markdown-it": "^13.0.1",
82
- "rollup": "^3.7.0",
76
+ "rollup": "^3.7.4",
83
77
  "rollup-plugin-filesize": "^9.1.2",
84
- "rollup-plugin-your-function": "^0.4.3",
78
+ "rollup-plugin-your-function": "^0.4.4",
85
79
  "terser": "^5.16.1",
86
80
  "typescript": "^4.9.4",
87
81
  "unplugin-element-plus": "^0.4.1",
88
- "vitepress": "^1.0.0-alpha.30"
82
+ "vitepress": "^1.0.0-alpha.31"
89
83
  }
90
84
  }