watermark-js-plus 0.1.0 → 0.3.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 (8) hide show
  1. package/README.md +4 -0
  2. package/dist/core/watermark.d.ts +2 -0
  3. package/dist/types/index.d.ts +15 -30
  4. package/dist/utils/index.d.ts +1 -0
  5. package/dist/watermark.esm.js +97 -63
  6. package/dist/watermark.umd.js +97 -63
  7. package/dist/watermark.umd.min.js +1 -1
  8. package/package.json +13 -13
package/README.md CHANGED
@@ -5,6 +5,10 @@
5
5
  </p>
6
6
  <p align="center">
7
7
  <a href="https://npmjs.com/package/watermark-js-plus"><img src="https://badgen.net/npm/v/watermark-js-plus" alt="npm package"></a>
8
+ <img alt="GitHub Workflow Status" src="https://img.shields.io/github/actions/workflow/status/zhensherlock/watermark-js-plus/deploy.yml?branch=main">
9
+ <img alt="npm bundle size" src="https://img.shields.io/bundlephobia/minzip/watermark-js-plus">
10
+ <img alt="GitHub" src="https://img.shields.io/github/license/zhensherlock/watermark-js-plus">
11
+ <a href="https://gitter.im/china-hy/watermark-js-plus?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge"><img src="https://badges.gitter.im/china-hy/watermark-js-plus.svg" alt="Join the chat at https://gitter.im/china-hy/watermark-js-plus"></a>
8
12
  </p>
9
13
 
10
14
  # Watermark
package/dist/core/watermark.d.ts CHANGED
@@ -28,6 +28,7 @@ export default class Watermark {
28
28
  * Deleting this watermark.
29
29
  */
30
30
  destroy(): void;
31
+ private initializeOptions;
31
32
  private validateUnique;
32
33
  private validateContent;
33
34
  private draw;
@@ -36,5 +37,6 @@ export default class Watermark {
36
37
  private drawMultiLineText;
37
38
  private drawRichText;
38
39
  private getImageRect;
40
+ private checkParentElementType;
39
41
  private bindMutationObserve;
40
42
  }
package/dist/types/index.d.ts CHANGED
@@ -1,28 +1,9 @@
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
- }
1
+ export type ContentTypeType = 'text' | 'image' | 'multi-line-text' | 'rich-text';
2
+ export type TextAlignType = 'center' | 'end' | 'left' | 'right' | 'start';
3
+ export type TextBaselineType = 'alphabetic' | 'hanging' | 'ideographic' | 'top' | 'bottom' | 'middle';
4
+ export type CreateWatermarkModeType = 'default' | 'blind';
5
+ export type DecodeBlindWatermarkModeType = 'canvas' | 'html' | 'svg';
6
+ export type TranslatePlacementType = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'right' | 'middle';
26
7
  export interface WatermarkDom extends HTMLDivElement {
27
8
  __WATERMARK__?: string;
28
9
  __WATERMARK__INSTANCE__?: any;
@@ -31,7 +12,10 @@ export interface WatermarkOptions {
31
12
  width: number;
32
13
  height: number;
33
14
  rotate: number;
34
- contentType: ContentTypeEnum;
15
+ translatePlacement: TranslatePlacementType;
16
+ translateX?: number;
17
+ translateY?: number;
18
+ contentType: ContentTypeType;
35
19
  content: string;
36
20
  image?: string;
37
21
  imageWidth: number;
@@ -39,14 +23,15 @@ export interface WatermarkOptions {
39
23
  lineHeight: number;
40
24
  zIndex: number;
41
25
  backgroundPosition: string;
26
+ backgroundRepeat: string;
42
27
  fontSize: number;
43
28
  fontFamily: string;
44
- textAlign: TextAlignEnum;
45
- textBaseline: TextBaselineEnum;
29
+ textAlign?: TextAlignType;
30
+ textBaseline?: TextBaselineType;
46
31
  fontColor: string;
47
32
  globalAlpha: number;
48
33
  fontWeight: string;
49
- mode: CreateWatermarkModeEnum;
34
+ mode: CreateWatermarkModeType;
50
35
  mutationObserve: boolean;
51
36
  unique: boolean;
52
37
  parent: Element | string;
@@ -58,6 +43,6 @@ export interface DecodeBlindWatermarkOptions {
58
43
  url: string;
59
44
  fillColor: string;
60
45
  compositeOperation: string;
61
- mode: DecodeBlindWatermarkModeEnum;
46
+ mode: DecodeBlindWatermarkModeType;
62
47
  onSuccess: Function;
63
48
  }
package/dist/utils/index.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import { WatermarkOptions } from '../types';
2
2
  export declare const convertImage: (canvas: HTMLCanvasElement) => string;
3
3
  export declare const isFunction: (value: Function) => boolean;
4
+ export declare const isUndefined: (value: any) => boolean;
4
5
  export declare const createSVGElement: (tagName: string, attrs?: {
5
6
  [key: string]: string;
6
7
  }, namespaceURI?: string) => Element;
package/dist/watermark.esm.js CHANGED
@@ -73,6 +73,9 @@ var convertImage = function (canvas) {
73
73
  var isFunction = function (value) {
74
74
  return typeof value === 'function';
75
75
  };
76
+ var isUndefined = function (value) {
77
+ return value === undefined;
78
+ };
76
79
  var createSVGElement = function (tagName, attrs, namespaceURI) {
77
80
  if (attrs === void 0) { attrs = {}; }
78
81
  if (namespaceURI === void 0) { namespaceURI = 'http://www.w3.org/2000/svg'; }
@@ -117,37 +120,6 @@ var convertSVGToImage = function (svg) {
117
120
  return "data:image/svg+xml;charset=utf-8,".concat(richContent);
118
121
  };
119
122
 
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
123
  /**
152
124
  * Watermark class
153
125
  */
@@ -158,27 +130,26 @@ var Watermark = /** @class */ (function () {
158
130
  */
159
131
  function Watermark(props) {
160
132
  if (props === void 0) { props = {}; }
161
- var _a;
162
133
  this.parentElement = document.body;
163
134
  this.options = Object.assign({
164
135
  width: 300,
165
136
  height: 300,
166
137
  rotate: 45,
167
- contentType: ContentTypeEnum.text,
138
+ translatePlacement: 'middle',
139
+ contentType: 'text',
168
140
  content: 'hello watermark-js-plus',
169
141
  imageWidth: 0,
170
142
  imageHeight: 0,
171
143
  lineHeight: 30,
172
144
  zIndex: 10000,
173
145
  backgroundPosition: '0 0, 0 0',
146
+ backgroundRepeat: 'repeat',
174
147
  fontSize: 20,
175
148
  fontFamily: 'sans-serif',
176
- textAlign: TextAlignEnum.center,
177
- textBaseline: TextBaselineEnum.middle,
178
149
  fontColor: '#000',
179
150
  globalAlpha: 0.5,
180
151
  fontWeight: 'normal',
181
- mode: CreateWatermarkModeEnum.default,
152
+ mode: 'default',
182
153
  mutationObserve: true,
183
154
  unique: true,
184
155
  parent: 'body',
@@ -186,10 +157,8 @@ var Watermark = /** @class */ (function () {
186
157
  onBeforeDestroy: function () { },
187
158
  onDestroyed: function () { }
188
159
  }, 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
160
  this.changeParentElement(this.options.parent);
161
+ this.initializeOptions();
193
162
  }
194
163
  /**
195
164
  * Create an HD canvas.
@@ -222,7 +191,7 @@ var Watermark = /** @class */ (function () {
222
191
  Watermark.prototype.create = function () {
223
192
  var _a, _b;
224
193
  return __awaiter(this, void 0, void 0, function () {
225
- var canvas, image, watermarkInnerDom;
194
+ var canvas, image, watermarkInnerDom, parentElementType;
226
195
  return __generator(this, function (_c) {
227
196
  switch (_c.label) {
228
197
  case 0:
@@ -240,8 +209,9 @@ var Watermark = /** @class */ (function () {
240
209
  watermarkInnerDom = document.createElement('div');
241
210
  this.watermarkDom.__WATERMARK__ = 'watermark';
242
211
  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 ");
212
+ parentElementType = this.checkParentElementType();
213
+ this.watermarkDom.style.cssText = "\n z-index: ".concat(this.options.zIndex, ";\n ").concat(parentElementType === 'custom' ? 'top: 0;bottom: 0;left: 0;right: 0;height: 100%;pointer-events: none;position: absolute' : 'position: relative', "\n ");
214
+ watermarkInnerDom.style.cssText = "\n position: ".concat(parentElementType === 'root' ? 'fixed;' : 'absolute;', "\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: ").concat(this.options.backgroundRepeat, ";\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
215
  this.watermarkDom.append(watermarkInnerDom);
246
216
  this.parentElement.appendChild(this.watermarkDom);
247
217
  if (this.options.mutationObserve) {
@@ -264,6 +234,70 @@ var Watermark = /** @class */ (function () {
264
234
  (_e = this.watermarkDom) === null || _e === void 0 ? void 0 : _e.remove();
265
235
  (_g = (_f = this.options).onDestroyed) === null || _g === void 0 ? void 0 : _g.call(_f);
266
236
  };
237
+ Watermark.prototype.initializeOptions = function () {
238
+ var _a;
239
+ if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.rotate) {
240
+ this.options.rotate = (360 - this.options.rotate % 360) * (Math.PI / 180);
241
+ }
242
+ var translateX;
243
+ var translateY;
244
+ var textBaseline = 'middle';
245
+ var textAlign = 'center';
246
+ switch (this.options.translatePlacement) {
247
+ case 'top':
248
+ translateX = this.options.width / 2;
249
+ translateY = 0;
250
+ textBaseline = 'top';
251
+ break;
252
+ case 'top-start':
253
+ translateX = 0;
254
+ translateY = 0;
255
+ textBaseline = 'top';
256
+ textAlign = 'start';
257
+ break;
258
+ case 'top-end':
259
+ translateX = this.options.width;
260
+ translateY = 0;
261
+ textBaseline = 'top';
262
+ textAlign = 'end';
263
+ break;
264
+ case 'bottom':
265
+ translateX = this.options.width / 2;
266
+ translateY = this.options.height;
267
+ textBaseline = 'bottom';
268
+ break;
269
+ case 'bottom-start':
270
+ translateX = 0;
271
+ translateY = this.options.height;
272
+ textBaseline = 'bottom';
273
+ textAlign = 'start';
274
+ break;
275
+ case 'bottom-end':
276
+ translateX = this.options.width;
277
+ translateY = this.options.height;
278
+ textBaseline = 'bottom';
279
+ textAlign = 'end';
280
+ break;
281
+ case 'left':
282
+ translateX = 0;
283
+ translateY = this.options.height / 2;
284
+ textAlign = 'start';
285
+ break;
286
+ case 'right':
287
+ translateX = this.options.width;
288
+ translateY = this.options.height / 2;
289
+ textAlign = 'end';
290
+ break;
291
+ case 'middle':
292
+ translateX = this.options.width / 2;
293
+ translateY = this.options.height / 2;
294
+ break;
295
+ }
296
+ isUndefined(this.options.translateX) && (this.options.translateX = translateX);
297
+ isUndefined(this.options.translateY) && (this.options.translateY = translateY);
298
+ isUndefined(this.options.textBaseline) && (this.options.textBaseline = textBaseline);
299
+ isUndefined(this.options.textAlign) && (this.options.textAlign = textAlign);
300
+ };
267
301
  Watermark.prototype.validateUnique = function () {
268
302
  var result = true;
269
303
  if (this.options.unique) {
@@ -281,11 +315,11 @@ var Watermark = /** @class */ (function () {
281
315
  };
282
316
  Watermark.prototype.validateContent = function () {
283
317
  switch (this.options.contentType) {
284
- case ContentTypeEnum.image:
318
+ case 'image':
285
319
  return Object.hasOwnProperty.call(this.options, 'image');
286
- case ContentTypeEnum.multiLineText:
287
- case ContentTypeEnum.richText:
288
- case ContentTypeEnum.text:
320
+ case 'multi-line-text':
321
+ case 'rich-text':
322
+ case 'text':
289
323
  return this.options.content.length > 0;
290
324
  }
291
325
  return false;
@@ -299,30 +333,30 @@ var Watermark = /** @class */ (function () {
299
333
  throw new Error('get context error');
300
334
  }
301
335
  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;
336
+ this.options.textAlign && (ctx.textAlign = this.options.textAlign);
337
+ this.options.textBaseline && (ctx.textBaseline = this.options.textBaseline);
304
338
  ctx.fillStyle = this.options.fontColor;
305
339
  ctx.globalAlpha = this.options.globalAlpha;
340
+ ctx.translate(this.options.translateX, this.options.translateY);
341
+ ctx.rotate(this.options.rotate);
306
342
  return new Promise(function (resolve) {
307
343
  switch (_this.options.contentType) {
308
- case ContentTypeEnum.text:
344
+ case 'text':
309
345
  _this.drawText(ctx, resolve);
310
346
  break;
311
- case ContentTypeEnum.image:
347
+ case 'image':
312
348
  _this.drawImage(ctx, resolve);
313
349
  break;
314
- case ContentTypeEnum.multiLineText:
350
+ case 'multi-line-text':
315
351
  _this.drawMultiLineText(ctx, resolve);
316
352
  break;
317
- case ContentTypeEnum.richText:
353
+ case 'rich-text':
318
354
  _this.drawRichText(ctx, resolve);
319
355
  break;
320
356
  }
321
357
  });
322
358
  };
323
359
  Watermark.prototype.drawText = function (ctx, resolve) {
324
- ctx.translate(this.options.width / 2, this.options.height / 2);
325
- ctx.rotate(this.options.rotate);
326
360
  ctx.fillText(this.options.content, 0, 0);
327
361
  resolve(ctx.canvas);
328
362
  };
@@ -332,8 +366,6 @@ var Watermark = /** @class */ (function () {
332
366
  image.setAttribute('crossOrigin', 'Anonymous');
333
367
  image.src = this.options.image;
334
368
  image.onload = function () {
335
- ctx.translate(_this.options.width / 2, _this.options.height / 2);
336
- ctx.rotate(_this.options.rotate);
337
369
  var _a = _this.getImageRect(image), imageWidth = _a.width, imageHeight = _a.height;
338
370
  ctx.drawImage(image, 0 - imageWidth / 2, 0 - imageHeight / 2, imageWidth, imageHeight);
339
371
  resolve(ctx.canvas);
@@ -358,8 +390,6 @@ var Watermark = /** @class */ (function () {
358
390
  // resolve(canvas)
359
391
  // }
360
392
  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
393
  var yOffsetValue = (lines.length - 1) * this.options.lineHeight / 2;
364
394
  lines.forEach(function (txt, index) {
365
395
  ctx.fillText(txt, 0, _this.options.lineHeight * index - yOffsetValue);
@@ -374,8 +404,6 @@ var Watermark = /** @class */ (function () {
374
404
  var element = createCustomContentSVG(ctx, this.options);
375
405
  image.src = convertSVGToImage(element);
376
406
  image.onload = function () {
377
- ctx.translate(_this.options.width / 2, _this.options.height / 2);
378
- ctx.rotate(_this.options.rotate);
379
407
  ctx.drawImage(image, -_this.options.width / 2, -_this.options.height / 2, ctx.canvas.width, ctx.canvas.height);
380
408
  resolve(ctx.canvas);
381
409
  };
@@ -396,6 +424,12 @@ var Watermark = /** @class */ (function () {
396
424
  }
397
425
  return rect;
398
426
  };
427
+ Watermark.prototype.checkParentElementType = function () {
428
+ if (['html', 'body'].includes(this.parentElement.tagName.toLocaleLowerCase())) {
429
+ return 'root';
430
+ }
431
+ return 'custom';
432
+ };
399
433
  Watermark.prototype.bindMutationObserve = function () {
400
434
  var _this = this;
401
435
  if (!this.watermarkDom) {
@@ -444,7 +478,7 @@ var BlindWatermark = /** @class */ (function (_super) {
444
478
  function BlindWatermark(props) {
445
479
  if (props === void 0) { props = {}; }
446
480
  props.globalAlpha = 0.005;
447
- props.mode = CreateWatermarkModeEnum.blind;
481
+ props.mode = 'blind';
448
482
  return _super.call(this, props) || this;
449
483
  }
450
484
  /**
@@ -456,12 +490,12 @@ var BlindWatermark = /** @class */ (function (_super) {
456
490
  url: '',
457
491
  fillColor: '#000',
458
492
  compositeOperation: 'color-burn',
459
- mode: DecodeBlindWatermarkModeEnum.canvas
493
+ mode: 'canvas'
460
494
  }, props);
461
495
  if (!options.url) {
462
496
  return;
463
497
  }
464
- if (options.mode === DecodeBlindWatermarkModeEnum.canvas) {
498
+ if (options.mode === 'canvas') {
465
499
  var img_1 = new Image();
466
500
  img_1.src = options.url;
467
501
  img_1.onload = function () {
package/dist/watermark.umd.js CHANGED
@@ -79,6 +79,9 @@
79
79
  var isFunction = function (value) {
80
80
  return typeof value === 'function';
81
81
  };
82
+ var isUndefined = function (value) {
83
+ return value === undefined;
84
+ };
82
85
  var createSVGElement = function (tagName, attrs, namespaceURI) {
83
86
  if (attrs === void 0) { attrs = {}; }
84
87
  if (namespaceURI === void 0) { namespaceURI = 'http://www.w3.org/2000/svg'; }
@@ -123,37 +126,6 @@
123
126
  return "data:image/svg+xml;charset=utf-8,".concat(richContent);
124
127
  };
125
128
 
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
129
  /**
158
130
  * Watermark class
159
131
  */
@@ -164,27 +136,26 @@
164
136
  */
165
137
  function Watermark(props) {
166
138
  if (props === void 0) { props = {}; }
167
- var _a;
168
139
  this.parentElement = document.body;
169
140
  this.options = Object.assign({
170
141
  width: 300,
171
142
  height: 300,
172
143
  rotate: 45,
173
- contentType: ContentTypeEnum.text,
144
+ translatePlacement: 'middle',
145
+ contentType: 'text',
174
146
  content: 'hello watermark-js-plus',
175
147
  imageWidth: 0,
176
148
  imageHeight: 0,
177
149
  lineHeight: 30,
178
150
  zIndex: 10000,
179
151
  backgroundPosition: '0 0, 0 0',
152
+ backgroundRepeat: 'repeat',
180
153
  fontSize: 20,
181
154
  fontFamily: 'sans-serif',
182
- textAlign: TextAlignEnum.center,
183
- textBaseline: TextBaselineEnum.middle,
184
155
  fontColor: '#000',
185
156
  globalAlpha: 0.5,
186
157
  fontWeight: 'normal',
187
- mode: CreateWatermarkModeEnum.default,
158
+ mode: 'default',
188
159
  mutationObserve: true,
189
160
  unique: true,
190
161
  parent: 'body',
@@ -192,10 +163,8 @@
192
163
  onBeforeDestroy: function () { },
193
164
  onDestroyed: function () { }
194
165
  }, 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
166
  this.changeParentElement(this.options.parent);
167
+ this.initializeOptions();
199
168
  }
200
169
  /**
201
170
  * Create an HD canvas.
@@ -228,7 +197,7 @@
228
197
  Watermark.prototype.create = function () {
229
198
  var _a, _b;
230
199
  return __awaiter(this, void 0, void 0, function () {
231
- var canvas, image, watermarkInnerDom;
200
+ var canvas, image, watermarkInnerDom, parentElementType;
232
201
  return __generator(this, function (_c) {
233
202
  switch (_c.label) {
234
203
  case 0:
@@ -246,8 +215,9 @@
246
215
  watermarkInnerDom = document.createElement('div');
247
216
  this.watermarkDom.__WATERMARK__ = 'watermark';
248
217
  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 ");
218
+ parentElementType = this.checkParentElementType();
219
+ this.watermarkDom.style.cssText = "\n z-index: ".concat(this.options.zIndex, ";\n ").concat(parentElementType === 'custom' ? 'top: 0;bottom: 0;left: 0;right: 0;height: 100%;pointer-events: none;position: absolute' : 'position: relative', "\n ");
220
+ watermarkInnerDom.style.cssText = "\n position: ".concat(parentElementType === 'root' ? 'fixed;' : 'absolute;', "\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: ").concat(this.options.backgroundRepeat, ";\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
221
  this.watermarkDom.append(watermarkInnerDom);
252
222
  this.parentElement.appendChild(this.watermarkDom);
253
223
  if (this.options.mutationObserve) {
@@ -270,6 +240,70 @@
270
240
  (_e = this.watermarkDom) === null || _e === void 0 ? void 0 : _e.remove();
271
241
  (_g = (_f = this.options).onDestroyed) === null || _g === void 0 ? void 0 : _g.call(_f);
272
242
  };
243
+ Watermark.prototype.initializeOptions = function () {
244
+ var _a;
245
+ if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.rotate) {
246
+ this.options.rotate = (360 - this.options.rotate % 360) * (Math.PI / 180);
247
+ }
248
+ var translateX;
249
+ var translateY;
250
+ var textBaseline = 'middle';
251
+ var textAlign = 'center';
252
+ switch (this.options.translatePlacement) {
253
+ case 'top':
254
+ translateX = this.options.width / 2;
255
+ translateY = 0;
256
+ textBaseline = 'top';
257
+ break;
258
+ case 'top-start':
259
+ translateX = 0;
260
+ translateY = 0;
261
+ textBaseline = 'top';
262
+ textAlign = 'start';
263
+ break;
264
+ case 'top-end':
265
+ translateX = this.options.width;
266
+ translateY = 0;
267
+ textBaseline = 'top';
268
+ textAlign = 'end';
269
+ break;
270
+ case 'bottom':
271
+ translateX = this.options.width / 2;
272
+ translateY = this.options.height;
273
+ textBaseline = 'bottom';
274
+ break;
275
+ case 'bottom-start':
276
+ translateX = 0;
277
+ translateY = this.options.height;
278
+ textBaseline = 'bottom';
279
+ textAlign = 'start';
280
+ break;
281
+ case 'bottom-end':
282
+ translateX = this.options.width;
283
+ translateY = this.options.height;
284
+ textBaseline = 'bottom';
285
+ textAlign = 'end';
286
+ break;
287
+ case 'left':
288
+ translateX = 0;
289
+ translateY = this.options.height / 2;
290
+ textAlign = 'start';
291
+ break;
292
+ case 'right':
293
+ translateX = this.options.width;
294
+ translateY = this.options.height / 2;
295
+ textAlign = 'end';
296
+ break;
297
+ case 'middle':
298
+ translateX = this.options.width / 2;
299
+ translateY = this.options.height / 2;
300
+ break;
301
+ }
302
+ isUndefined(this.options.translateX) && (this.options.translateX = translateX);
303
+ isUndefined(this.options.translateY) && (this.options.translateY = translateY);
304
+ isUndefined(this.options.textBaseline) && (this.options.textBaseline = textBaseline);
305
+ isUndefined(this.options.textAlign) && (this.options.textAlign = textAlign);
306
+ };
273
307
  Watermark.prototype.validateUnique = function () {
274
308
  var result = true;
275
309
  if (this.options.unique) {
@@ -287,11 +321,11 @@
287
321
  };
288
322
  Watermark.prototype.validateContent = function () {
289
323
  switch (this.options.contentType) {
290
- case ContentTypeEnum.image:
324
+ case 'image':
291
325
  return Object.hasOwnProperty.call(this.options, 'image');
292
- case ContentTypeEnum.multiLineText:
293
- case ContentTypeEnum.richText:
294
- case ContentTypeEnum.text:
326
+ case 'multi-line-text':
327
+ case 'rich-text':
328
+ case 'text':
295
329
  return this.options.content.length > 0;
296
330
  }
297
331
  return false;
@@ -305,30 +339,30 @@
305
339
  throw new Error('get context error');
306
340
  }
307
341
  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;
342
+ this.options.textAlign && (ctx.textAlign = this.options.textAlign);
343
+ this.options.textBaseline && (ctx.textBaseline = this.options.textBaseline);
310
344
  ctx.fillStyle = this.options.fontColor;
311
345
  ctx.globalAlpha = this.options.globalAlpha;
346
+ ctx.translate(this.options.translateX, this.options.translateY);
347
+ ctx.rotate(this.options.rotate);
312
348
  return new Promise(function (resolve) {
313
349
  switch (_this.options.contentType) {
314
- case ContentTypeEnum.text:
350
+ case 'text':
315
351
  _this.drawText(ctx, resolve);
316
352
  break;
317
- case ContentTypeEnum.image:
353
+ case 'image':
318
354
  _this.drawImage(ctx, resolve);
319
355
  break;
320
- case ContentTypeEnum.multiLineText:
356
+ case 'multi-line-text':
321
357
  _this.drawMultiLineText(ctx, resolve);
322
358
  break;
323
- case ContentTypeEnum.richText:
359
+ case 'rich-text':
324
360
  _this.drawRichText(ctx, resolve);
325
361
  break;
326
362
  }
327
363
  });
328
364
  };
329
365
  Watermark.prototype.drawText = function (ctx, resolve) {
330
- ctx.translate(this.options.width / 2, this.options.height / 2);
331
- ctx.rotate(this.options.rotate);
332
366
  ctx.fillText(this.options.content, 0, 0);
333
367
  resolve(ctx.canvas);
334
368
  };
@@ -338,8 +372,6 @@
338
372
  image.setAttribute('crossOrigin', 'Anonymous');
339
373
  image.src = this.options.image;
340
374
  image.onload = function () {
341
- ctx.translate(_this.options.width / 2, _this.options.height / 2);
342
- ctx.rotate(_this.options.rotate);
343
375
  var _a = _this.getImageRect(image), imageWidth = _a.width, imageHeight = _a.height;
344
376
  ctx.drawImage(image, 0 - imageWidth / 2, 0 - imageHeight / 2, imageWidth, imageHeight);
345
377
  resolve(ctx.canvas);
@@ -364,8 +396,6 @@
364
396
  // resolve(canvas)
365
397
  // }
366
398
  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
399
  var yOffsetValue = (lines.length - 1) * this.options.lineHeight / 2;
370
400
  lines.forEach(function (txt, index) {
371
401
  ctx.fillText(txt, 0, _this.options.lineHeight * index - yOffsetValue);
@@ -380,8 +410,6 @@
380
410
  var element = createCustomContentSVG(ctx, this.options);
381
411
  image.src = convertSVGToImage(element);
382
412
  image.onload = function () {
383
- ctx.translate(_this.options.width / 2, _this.options.height / 2);
384
- ctx.rotate(_this.options.rotate);
385
413
  ctx.drawImage(image, -_this.options.width / 2, -_this.options.height / 2, ctx.canvas.width, ctx.canvas.height);
386
414
  resolve(ctx.canvas);
387
415
  };
@@ -402,6 +430,12 @@
402
430
  }
403
431
  return rect;
404
432
  };
433
+ Watermark.prototype.checkParentElementType = function () {
434
+ if (['html', 'body'].includes(this.parentElement.tagName.toLocaleLowerCase())) {
435
+ return 'root';
436
+ }
437
+ return 'custom';
438
+ };
405
439
  Watermark.prototype.bindMutationObserve = function () {
406
440
  var _this = this;
407
441
  if (!this.watermarkDom) {
@@ -450,7 +484,7 @@
450
484
  function BlindWatermark(props) {
451
485
  if (props === void 0) { props = {}; }
452
486
  props.globalAlpha = 0.005;
453
- props.mode = CreateWatermarkModeEnum.blind;
487
+ props.mode = 'blind';
454
488
  return _super.call(this, props) || this;
455
489
  }
456
490
  /**
@@ -462,12 +496,12 @@
462
496
  url: '',
463
497
  fillColor: '#000',
464
498
  compositeOperation: 'color-burn',
465
- mode: DecodeBlindWatermarkModeEnum.canvas
499
+ mode: 'canvas'
466
500
  }, props);
467
501
  if (!options.url) {
468
502
  return;
469
503
  }
470
- if (options.mode === DecodeBlindWatermarkModeEnum.canvas) {
504
+ if (options.mode === 'canvas') {
471
505
  var img_1 = new Image();
472
506
  img_1.src = options.url;
473
507
  img_1.onload = function () {
package/dist/watermark.umd.min.js CHANGED
@@ -1 +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}));
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=function(t){return t.toDataURL("image/png",1)},r=function(t){return void 0===t},a=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},s=function(){function t(t){void 0===t&&(t={}),this.parentElement=document.body,this.options=Object.assign({width:300,height:300,rotate:45,translatePlacement:"middle",contentType:"text",content:"hello watermark-js-plus",imageWidth:0,imageHeight:0,lineHeight:30,zIndex:1e4,backgroundPosition:"0 0, 0 0",backgroundRepeat:"repeat",fontSize:20,fontFamily:"sans-serif",fontColor:"#000",globalAlpha:.5,fontWeight:"normal",mode:"default",mutationObserve:!0,unique:!0,parent:"body",onSuccess:function(){},onBeforeDestroy:function(){},onDestroyed:function(){}},t),this.changeParentElement(this.options.parent),this.initializeOptions()}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,r,a,s;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(),r=i(n),this.watermarkDom=document.createElement("div"),a=document.createElement("div"),this.watermarkDom.__WATERMARK__="watermark",this.watermarkDom.__WATERMARK__INSTANCE__=this,s=this.checkParentElementType(),this.watermarkDom.style.cssText="\n z-index: ".concat(this.options.zIndex,";\n ").concat("custom"===s?"top: 0;bottom: 0;left: 0;right: 0;height: 100%;pointer-events: none;position: absolute":"position: relative","\n "),a.style.cssText="\n position: ".concat("root"===s?"fixed;":"absolute;","\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(r,");\n background-repeat: ").concat(this.options.backgroundRepeat,";\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(a),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.initializeOptions=function(){var t,e,n;(null===(t=this.options)||void 0===t?void 0:t.rotate)&&(this.options.rotate=(360-this.options.rotate%360)*(Math.PI/180));var o="middle",i="center";switch(this.options.translatePlacement){case"top":e=this.options.width/2,n=0,o="top";break;case"top-start":e=0,n=0,o="top",i="start";break;case"top-end":e=this.options.width,n=0,o="top",i="end";break;case"bottom":e=this.options.width/2,n=this.options.height,o="bottom";break;case"bottom-start":e=0,n=this.options.height,o="bottom",i="start";break;case"bottom-end":e=this.options.width,n=this.options.height,o="bottom",i="end";break;case"left":e=0,n=this.options.height/2,i="start";break;case"right":e=this.options.width,n=this.options.height/2,i="end";break;case"middle":e=this.options.width/2,n=this.options.height/2}r(this.options.translateX)&&(this.options.translateX=e),r(this.options.translateY)&&(this.options.translateY=n),r(this.options.textBaseline)&&(this.options.textBaseline=o),r(this.options.textAlign)&&(this.options.textAlign=i)},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"image":return Object.hasOwnProperty.call(this.options,"image");case"multi-line-text":case"rich-text":case"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),this.options.textAlign&&(n.textAlign=this.options.textAlign),this.options.textBaseline&&(n.textBaseline=this.options.textBaseline),n.fillStyle=this.options.fontColor,n.globalAlpha=this.options.globalAlpha,n.translate(this.options.translateX,this.options.translateY),n.rotate(this.options.rotate),new Promise((function(t){switch(e.options.contentType){case"text":e.drawText(n,t);break;case"image":e.drawImage(n,t);break;case"multi-line-text":e.drawMultiLineText(n,t);break;case"rich-text":e.drawRichText(n,t)}}))},t.prototype.drawText=function(t,e){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(){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),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=a("svg",{xmlns:"http://www.w3.org/2000/svg"}),o=a("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.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.checkParentElementType=function(){return["html","body"].includes(this.parentElement.tagName.toLocaleLowerCase())?"root":"custom"},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}(),c=function(t){function n(e){return void 0===e&&(e={}),e.globalAlpha=.005,e.mode="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:"canvas"},t);if(e.url&&"canvas"===e.mode){var n=new Image;n.src=e.url,n.onload=function(){var t,o=n.width,r=n.height,a=s.createCanvas(o,r),c=a.getContext("2d");if(null===c)throw new Error("get context error");c.drawImage(n,0,0,o,r),c.globalCompositeOperation=e.compositeOperation,c.fillStyle=e.fillColor,c.fillRect(0,0,o,r);var h=i(a);e.onSuccess&&"function"==typeof e.onSuccess&&(null===(t=e.onSuccess)||void 0===t||t.call(e,h))}}},n}(s);t.BlindWatermark=c,t.Watermark=s}));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "watermark-js-plus",
3
- "version": "0.1.0",
3
+ "version": "0.3.0",
4
4
  "description": "watermark for the browser",
5
5
  "scripts": {
6
6
  "test": "echo \"Error: no test specified\" && exit 1",
@@ -44,7 +44,7 @@
44
44
  "dist"
45
45
  ],
46
46
  "devDependencies": {
47
- "@babel/core": "^7.20.5",
47
+ "@babel/core": "^7.20.7",
48
48
  "@babel/eslint-parser": "^7.19.1",
49
49
  "@babel/plugin-transform-runtime": "^7.19.6",
50
50
  "@babel/preset-env": "^7.20.2",
@@ -52,33 +52,33 @@
52
52
  "@commitlint/config-conventional": "^17.3.0",
53
53
  "@element-plus/icons-vue": "^2.0.10",
54
54
  "@rollup/plugin-babel": "^6.0.3",
55
- "@rollup/plugin-commonjs": "^23.0.4",
55
+ "@rollup/plugin-commonjs": "^24.0.0",
56
56
  "@rollup/plugin-eslint": "^9.0.1",
57
57
  "@rollup/plugin-node-resolve": "^15.0.1",
58
- "@rollup/plugin-replace": "^5.0.1",
59
- "@rollup/plugin-terser": "0.1.0",
58
+ "@rollup/plugin-replace": "^5.0.2",
59
+ "@rollup/plugin-terser": "0.2.1",
60
60
  "@rollup/plugin-typescript": "^10.0.1",
61
61
  "@types/markdown-it": "^12.2.3",
62
- "@typescript-eslint/parser": "^5.46.1",
62
+ "@typescript-eslint/parser": "^5.48.0",
63
63
  "@vue/theme": "^1.3.0",
64
64
  "concurrently": "^7.6.0",
65
65
  "conventional-changelog-angular": "^5.0.13",
66
66
  "conventional-changelog-cli": "^2.2.2",
67
- "core-js": "^3.26.1",
68
- "element-plus": "^2.2.26",
69
- "eslint": "^8.29.0",
67
+ "core-js": "^3.27.1",
68
+ "element-plus": "^2.2.28",
69
+ "eslint": "^8.31.0",
70
70
  "eslint-config-airbnb-base": "^15.0.0",
71
71
  "eslint-config-semistandard": "^17.0.0",
72
72
  "eslint-plugin-import": "^2.26.0",
73
- "husky": "^8.0.2",
73
+ "husky": "^8.0.3",
74
74
  "lint-staged": "^13.1.0",
75
75
  "markdown-it": "^13.0.1",
76
- "rollup": "^3.7.4",
76
+ "rollup": "^3.9.1",
77
77
  "rollup-plugin-filesize": "^9.1.2",
78
- "rollup-plugin-your-function": "^0.4.4",
78
+ "rollup-plugin-your-function": "^0.4.6",
79
79
  "terser": "^5.16.1",
80
80
  "typescript": "^4.9.4",
81
81
  "unplugin-element-plus": "^0.4.1",
82
- "vitepress": "^1.0.0-alpha.31"
82
+ "vitepress": "^1.0.0-alpha.34"
83
83
  }
84
84
  }