watermark-js-plus 0.2.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.
@@ -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;
@@ -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;
@@ -42,12 +26,12 @@ export interface WatermarkOptions {
42
26
  backgroundRepeat: string;
43
27
  fontSize: number;
44
28
  fontFamily: string;
45
- textAlign: TextAlignEnum;
46
- textBaseline: TextBaselineEnum;
29
+ textAlign?: TextAlignType;
30
+ textBaseline?: TextBaselineType;
47
31
  fontColor: string;
48
32
  globalAlpha: number;
49
33
  fontWeight: string;
50
- mode: CreateWatermarkModeEnum;
34
+ mode: CreateWatermarkModeType;
51
35
  mutationObserve: boolean;
52
36
  unique: boolean;
53
37
  parent: Element | string;
@@ -59,6 +43,6 @@ export interface DecodeBlindWatermarkOptions {
59
43
  url: string;
60
44
  fillColor: string;
61
45
  compositeOperation: string;
62
- mode: DecodeBlindWatermarkModeEnum;
46
+ mode: DecodeBlindWatermarkModeType;
63
47
  onSuccess: Function;
64
48
  }
@@ -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;
@@ -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,13 +130,13 @@ 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,
@@ -174,12 +146,10 @@ var Watermark = /** @class */ (function () {
174
146
  backgroundRepeat: 'repeat',
175
147
  fontSize: 20,
176
148
  fontFamily: 'sans-serif',
177
- textAlign: TextAlignEnum.center,
178
- textBaseline: TextBaselineEnum.middle,
179
149
  fontColor: '#000',
180
150
  globalAlpha: 0.5,
181
151
  fontWeight: 'normal',
182
- mode: CreateWatermarkModeEnum.default,
152
+ mode: 'default',
183
153
  mutationObserve: true,
184
154
  unique: true,
185
155
  parent: 'body',
@@ -187,10 +157,8 @@ var Watermark = /** @class */ (function () {
187
157
  onBeforeDestroy: function () { },
188
158
  onDestroyed: function () { }
189
159
  }, props);
190
- if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.rotate) {
191
- this.options.rotate = (360 - this.options.rotate % 360) * (Math.PI / 180);
192
- }
193
160
  this.changeParentElement(this.options.parent);
161
+ this.initializeOptions();
194
162
  }
195
163
  /**
196
164
  * Create an HD canvas.
@@ -266,6 +234,70 @@ var Watermark = /** @class */ (function () {
266
234
  (_e = this.watermarkDom) === null || _e === void 0 ? void 0 : _e.remove();
267
235
  (_g = (_f = this.options).onDestroyed) === null || _g === void 0 ? void 0 : _g.call(_f);
268
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
+ };
269
301
  Watermark.prototype.validateUnique = function () {
270
302
  var result = true;
271
303
  if (this.options.unique) {
@@ -283,11 +315,11 @@ var Watermark = /** @class */ (function () {
283
315
  };
284
316
  Watermark.prototype.validateContent = function () {
285
317
  switch (this.options.contentType) {
286
- case ContentTypeEnum.image:
318
+ case 'image':
287
319
  return Object.hasOwnProperty.call(this.options, 'image');
288
- case ContentTypeEnum.multiLineText:
289
- case ContentTypeEnum.richText:
290
- case ContentTypeEnum.text:
320
+ case 'multi-line-text':
321
+ case 'rich-text':
322
+ case 'text':
291
323
  return this.options.content.length > 0;
292
324
  }
293
325
  return false;
@@ -301,30 +333,30 @@ var Watermark = /** @class */ (function () {
301
333
  throw new Error('get context error');
302
334
  }
303
335
  ctx.font = "".concat(this.options.fontWeight, " ").concat(this.options.fontSize, "px ").concat(this.options.fontFamily);
304
- ctx.textAlign = this.options.textAlign;
305
- ctx.textBaseline = this.options.textBaseline;
336
+ this.options.textAlign && (ctx.textAlign = this.options.textAlign);
337
+ this.options.textBaseline && (ctx.textBaseline = this.options.textBaseline);
306
338
  ctx.fillStyle = this.options.fontColor;
307
339
  ctx.globalAlpha = this.options.globalAlpha;
340
+ ctx.translate(this.options.translateX, this.options.translateY);
341
+ ctx.rotate(this.options.rotate);
308
342
  return new Promise(function (resolve) {
309
343
  switch (_this.options.contentType) {
310
- case ContentTypeEnum.text:
344
+ case 'text':
311
345
  _this.drawText(ctx, resolve);
312
346
  break;
313
- case ContentTypeEnum.image:
347
+ case 'image':
314
348
  _this.drawImage(ctx, resolve);
315
349
  break;
316
- case ContentTypeEnum.multiLineText:
350
+ case 'multi-line-text':
317
351
  _this.drawMultiLineText(ctx, resolve);
318
352
  break;
319
- case ContentTypeEnum.richText:
353
+ case 'rich-text':
320
354
  _this.drawRichText(ctx, resolve);
321
355
  break;
322
356
  }
323
357
  });
324
358
  };
325
359
  Watermark.prototype.drawText = function (ctx, resolve) {
326
- ctx.translate(this.options.width / 2, this.options.height / 2);
327
- ctx.rotate(this.options.rotate);
328
360
  ctx.fillText(this.options.content, 0, 0);
329
361
  resolve(ctx.canvas);
330
362
  };
@@ -334,8 +366,6 @@ var Watermark = /** @class */ (function () {
334
366
  image.setAttribute('crossOrigin', 'Anonymous');
335
367
  image.src = this.options.image;
336
368
  image.onload = function () {
337
- ctx.translate(_this.options.width / 2, _this.options.height / 2);
338
- ctx.rotate(_this.options.rotate);
339
369
  var _a = _this.getImageRect(image), imageWidth = _a.width, imageHeight = _a.height;
340
370
  ctx.drawImage(image, 0 - imageWidth / 2, 0 - imageHeight / 2, imageWidth, imageHeight);
341
371
  resolve(ctx.canvas);
@@ -360,8 +390,6 @@ var Watermark = /** @class */ (function () {
360
390
  // resolve(canvas)
361
391
  // }
362
392
  var lines = getMultiLineData(ctx, this.options.content, this.options.width);
363
- ctx.translate(this.options.width / 2, this.options.height / 2);
364
- ctx.rotate(this.options.rotate);
365
393
  var yOffsetValue = (lines.length - 1) * this.options.lineHeight / 2;
366
394
  lines.forEach(function (txt, index) {
367
395
  ctx.fillText(txt, 0, _this.options.lineHeight * index - yOffsetValue);
@@ -376,8 +404,6 @@ var Watermark = /** @class */ (function () {
376
404
  var element = createCustomContentSVG(ctx, this.options);
377
405
  image.src = convertSVGToImage(element);
378
406
  image.onload = function () {
379
- ctx.translate(_this.options.width / 2, _this.options.height / 2);
380
- ctx.rotate(_this.options.rotate);
381
407
  ctx.drawImage(image, -_this.options.width / 2, -_this.options.height / 2, ctx.canvas.width, ctx.canvas.height);
382
408
  resolve(ctx.canvas);
383
409
  };
@@ -452,7 +478,7 @@ var BlindWatermark = /** @class */ (function (_super) {
452
478
  function BlindWatermark(props) {
453
479
  if (props === void 0) { props = {}; }
454
480
  props.globalAlpha = 0.005;
455
- props.mode = CreateWatermarkModeEnum.blind;
481
+ props.mode = 'blind';
456
482
  return _super.call(this, props) || this;
457
483
  }
458
484
  /**
@@ -464,12 +490,12 @@ var BlindWatermark = /** @class */ (function (_super) {
464
490
  url: '',
465
491
  fillColor: '#000',
466
492
  compositeOperation: 'color-burn',
467
- mode: DecodeBlindWatermarkModeEnum.canvas
493
+ mode: 'canvas'
468
494
  }, props);
469
495
  if (!options.url) {
470
496
  return;
471
497
  }
472
- if (options.mode === DecodeBlindWatermarkModeEnum.canvas) {
498
+ if (options.mode === 'canvas') {
473
499
  var img_1 = new Image();
474
500
  img_1.src = options.url;
475
501
  img_1.onload = function () {
@@ -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,13 +136,13 @@
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,
@@ -180,12 +152,10 @@
180
152
  backgroundRepeat: 'repeat',
181
153
  fontSize: 20,
182
154
  fontFamily: 'sans-serif',
183
- textAlign: TextAlignEnum.center,
184
- textBaseline: TextBaselineEnum.middle,
185
155
  fontColor: '#000',
186
156
  globalAlpha: 0.5,
187
157
  fontWeight: 'normal',
188
- mode: CreateWatermarkModeEnum.default,
158
+ mode: 'default',
189
159
  mutationObserve: true,
190
160
  unique: true,
191
161
  parent: 'body',
@@ -193,10 +163,8 @@
193
163
  onBeforeDestroy: function () { },
194
164
  onDestroyed: function () { }
195
165
  }, props);
196
- if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.rotate) {
197
- this.options.rotate = (360 - this.options.rotate % 360) * (Math.PI / 180);
198
- }
199
166
  this.changeParentElement(this.options.parent);
167
+ this.initializeOptions();
200
168
  }
201
169
  /**
202
170
  * Create an HD canvas.
@@ -272,6 +240,70 @@
272
240
  (_e = this.watermarkDom) === null || _e === void 0 ? void 0 : _e.remove();
273
241
  (_g = (_f = this.options).onDestroyed) === null || _g === void 0 ? void 0 : _g.call(_f);
274
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
+ };
275
307
  Watermark.prototype.validateUnique = function () {
276
308
  var result = true;
277
309
  if (this.options.unique) {
@@ -289,11 +321,11 @@
289
321
  };
290
322
  Watermark.prototype.validateContent = function () {
291
323
  switch (this.options.contentType) {
292
- case ContentTypeEnum.image:
324
+ case 'image':
293
325
  return Object.hasOwnProperty.call(this.options, 'image');
294
- case ContentTypeEnum.multiLineText:
295
- case ContentTypeEnum.richText:
296
- case ContentTypeEnum.text:
326
+ case 'multi-line-text':
327
+ case 'rich-text':
328
+ case 'text':
297
329
  return this.options.content.length > 0;
298
330
  }
299
331
  return false;
@@ -307,30 +339,30 @@
307
339
  throw new Error('get context error');
308
340
  }
309
341
  ctx.font = "".concat(this.options.fontWeight, " ").concat(this.options.fontSize, "px ").concat(this.options.fontFamily);
310
- ctx.textAlign = this.options.textAlign;
311
- ctx.textBaseline = this.options.textBaseline;
342
+ this.options.textAlign && (ctx.textAlign = this.options.textAlign);
343
+ this.options.textBaseline && (ctx.textBaseline = this.options.textBaseline);
312
344
  ctx.fillStyle = this.options.fontColor;
313
345
  ctx.globalAlpha = this.options.globalAlpha;
346
+ ctx.translate(this.options.translateX, this.options.translateY);
347
+ ctx.rotate(this.options.rotate);
314
348
  return new Promise(function (resolve) {
315
349
  switch (_this.options.contentType) {
316
- case ContentTypeEnum.text:
350
+ case 'text':
317
351
  _this.drawText(ctx, resolve);
318
352
  break;
319
- case ContentTypeEnum.image:
353
+ case 'image':
320
354
  _this.drawImage(ctx, resolve);
321
355
  break;
322
- case ContentTypeEnum.multiLineText:
356
+ case 'multi-line-text':
323
357
  _this.drawMultiLineText(ctx, resolve);
324
358
  break;
325
- case ContentTypeEnum.richText:
359
+ case 'rich-text':
326
360
  _this.drawRichText(ctx, resolve);
327
361
  break;
328
362
  }
329
363
  });
330
364
  };
331
365
  Watermark.prototype.drawText = function (ctx, resolve) {
332
- ctx.translate(this.options.width / 2, this.options.height / 2);
333
- ctx.rotate(this.options.rotate);
334
366
  ctx.fillText(this.options.content, 0, 0);
335
367
  resolve(ctx.canvas);
336
368
  };
@@ -340,8 +372,6 @@
340
372
  image.setAttribute('crossOrigin', 'Anonymous');
341
373
  image.src = this.options.image;
342
374
  image.onload = function () {
343
- ctx.translate(_this.options.width / 2, _this.options.height / 2);
344
- ctx.rotate(_this.options.rotate);
345
375
  var _a = _this.getImageRect(image), imageWidth = _a.width, imageHeight = _a.height;
346
376
  ctx.drawImage(image, 0 - imageWidth / 2, 0 - imageHeight / 2, imageWidth, imageHeight);
347
377
  resolve(ctx.canvas);
@@ -366,8 +396,6 @@
366
396
  // resolve(canvas)
367
397
  // }
368
398
  var lines = getMultiLineData(ctx, this.options.content, this.options.width);
369
- ctx.translate(this.options.width / 2, this.options.height / 2);
370
- ctx.rotate(this.options.rotate);
371
399
  var yOffsetValue = (lines.length - 1) * this.options.lineHeight / 2;
372
400
  lines.forEach(function (txt, index) {
373
401
  ctx.fillText(txt, 0, _this.options.lineHeight * index - yOffsetValue);
@@ -382,8 +410,6 @@
382
410
  var element = createCustomContentSVG(ctx, this.options);
383
411
  image.src = convertSVGToImage(element);
384
412
  image.onload = function () {
385
- ctx.translate(_this.options.width / 2, _this.options.height / 2);
386
- ctx.rotate(_this.options.rotate);
387
413
  ctx.drawImage(image, -_this.options.width / 2, -_this.options.height / 2, ctx.canvas.width, ctx.canvas.height);
388
414
  resolve(ctx.canvas);
389
415
  };
@@ -458,7 +484,7 @@
458
484
  function BlindWatermark(props) {
459
485
  if (props === void 0) { props = {}; }
460
486
  props.globalAlpha = 0.005;
461
- props.mode = CreateWatermarkModeEnum.blind;
487
+ props.mode = 'blind';
462
488
  return _super.call(this, props) || this;
463
489
  }
464
490
  /**
@@ -470,12 +496,12 @@
470
496
  url: '',
471
497
  fillColor: '#000',
472
498
  compositeOperation: 'color-burn',
473
- mode: DecodeBlindWatermarkModeEnum.canvas
499
+ mode: 'canvas'
474
500
  }, props);
475
501
  if (!options.url) {
476
502
  return;
477
503
  }
478
- if (options.mode === DecodeBlindWatermarkModeEnum.canvas) {
504
+ if (options.mode === 'canvas') {
479
505
  var img_1 = new Image();
480
506
  img_1.src = options.url;
481
507
  img_1.onload = function () {
@@ -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",backgroundRepeat:"repeat",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,a;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,a=this.checkParentElementType(),this.watermarkDom.style.cssText="\n z-index: ".concat(this.options.zIndex,";\n ").concat("custom"===a?"top: 0;bottom: 0;left: 0;right: 0;height: 100%;pointer-events: none;position: absolute":"position: relative","\n "),r.style.cssText="\n position: ".concat("root"===a?"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(i,");\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(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.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}(),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.2.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",