watermark-js-plus 0.2.0 → 0.4.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 (7) hide show
  1. package/dist/core/watermark.d.ts +3 -0
  2. package/dist/types/index.d.ts +21 -30
  3. package/dist/utils/index.d.ts +3 -2
  4. package/dist/watermark.esm.js +174 -74
  5. package/dist/watermark.umd.js +174 -74
  6. package/dist/watermark.umd.min.js +1 -1
  7. package/package.json +8 -8
package/dist/core/watermark.d.ts CHANGED
@@ -8,6 +8,7 @@ export default class Watermark {
8
8
  private observer?;
9
9
  private parentObserve?;
10
10
  private watermarkDom?;
11
+ private props?;
11
12
  /**
12
13
  * Watermark constructor
13
14
  * @param props - watermark options
@@ -28,6 +29,7 @@ export default class Watermark {
28
29
  * Deleting this watermark.
29
30
  */
30
31
  destroy(): void;
32
+ private initializeOptions;
31
33
  private validateUnique;
32
34
  private validateContent;
33
35
  private draw;
@@ -36,6 +38,7 @@ export default class Watermark {
36
38
  private drawMultiLineText;
37
39
  private drawRichText;
38
40
  private getImageRect;
41
+ private getDrawImagePosition;
39
42
  private checkParentElementType;
40
43
  private bindMutationObserve;
41
44
  }
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,23 +12,28 @@ 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;
38
22
  imageHeight: number;
23
+ richTextWidth?: number;
24
+ richTextHeight?: number;
39
25
  lineHeight: number;
40
26
  zIndex: number;
41
27
  backgroundPosition: string;
42
28
  backgroundRepeat: string;
43
29
  fontSize: number;
44
30
  fontFamily: string;
45
- textAlign: TextAlignEnum;
46
- textBaseline: TextBaselineEnum;
31
+ textAlign?: TextAlignType;
32
+ textBaseline?: TextBaselineType;
47
33
  fontColor: string;
48
34
  globalAlpha: number;
49
35
  fontWeight: string;
50
- mode: CreateWatermarkModeEnum;
36
+ mode: CreateWatermarkModeType;
51
37
  mutationObserve: boolean;
52
38
  unique: boolean;
53
39
  parent: Element | string;
@@ -59,6 +45,11 @@ export interface DecodeBlindWatermarkOptions {
59
45
  url: string;
60
46
  fillColor: string;
61
47
  compositeOperation: string;
62
- mode: DecodeBlindWatermarkModeEnum;
48
+ mode: DecodeBlindWatermarkModeType;
63
49
  onSuccess: Function;
64
50
  }
51
+ export interface CustomContentSVGType {
52
+ element: Element;
53
+ width: number;
54
+ height: number;
55
+ }
package/dist/utils/index.d.ts CHANGED
@@ -1,9 +1,10 @@
1
- import { WatermarkOptions } from '../types';
1
+ import { CustomContentSVGType, 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;
7
8
  export declare const getMultiLineData: (ctx: CanvasRenderingContext2D, text: string, maxWidth: number) => string[];
8
- export declare const createCustomContentSVG: (ctx: CanvasRenderingContext2D, options: WatermarkOptions) => Element;
9
+ export declare const createCustomContentSVG: (ctx: CanvasRenderingContext2D, options: WatermarkOptions) => CustomContentSVGType;
9
10
  export declare const convertSVGToImage: (svg: Element) => string;
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'; }
@@ -100,54 +103,32 @@ var createCustomContentSVG = function (ctx, options) {
100
103
  var svgElement = createSVGElement('svg', {
101
104
  xmlns: 'http://www.w3.org/2000/svg'
102
105
  });
103
- var foreignObjectElement = createSVGElement('foreignObject', {
104
- width: options.width.toString(),
105
- height: options.height.toString()
106
- });
107
106
  var bodyElement = document.createElement('div');
108
107
  bodyElement.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
109
- bodyElement.style.cssText = "\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n font: ".concat(ctx.font, ";\n color: ").concat(options.fontColor, ";\n ");
110
- bodyElement.innerHTML = options.content;
108
+ bodyElement.style.cssText = "\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n font: ".concat(ctx.font, ";\n color: ").concat(options.fontColor, ";\n");
109
+ bodyElement.innerHTML = "<div class=\"rich-text-content\">".concat(options.content, "</div>");
110
+ document.body.appendChild(bodyElement);
111
+ var _a = bodyElement.querySelector('.rich-text-content'), offsetHeight = _a.offsetHeight, offsetWidth = _a.offsetWidth;
112
+ document.body.removeChild(bodyElement);
113
+ var width = options.richTextWidth || offsetWidth || options.width;
114
+ var height = options.richTextHeight || offsetHeight || options.height;
115
+ var foreignObjectElement = createSVGElement('foreignObject', {
116
+ width: width.toString(),
117
+ height: height.toString()
118
+ });
111
119
  foreignObjectElement.appendChild(bodyElement);
112
120
  svgElement.appendChild(foreignObjectElement);
113
- return svgElement;
121
+ return {
122
+ element: svgElement,
123
+ width: width,
124
+ height: height
125
+ };
114
126
  };
115
127
  var convertSVGToImage = function (svg) {
116
128
  var richContent = svg.outerHTML.replace(/\n/g, '').replace(/\t/g, '').replace(/#/g, '%23');
117
129
  return "data:image/svg+xml;charset=utf-8,".concat(richContent);
118
130
  };
119
131
 
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
132
  /**
152
133
  * Watermark class
153
134
  */
@@ -158,13 +139,14 @@ var Watermark = /** @class */ (function () {
158
139
  */
159
140
  function Watermark(props) {
160
141
  if (props === void 0) { props = {}; }
161
- var _a;
162
142
  this.parentElement = document.body;
143
+ this.props = props;
163
144
  this.options = Object.assign({
164
145
  width: 300,
165
146
  height: 300,
166
147
  rotate: 45,
167
- contentType: ContentTypeEnum.text,
148
+ translatePlacement: 'middle',
149
+ contentType: 'text',
168
150
  content: 'hello watermark-js-plus',
169
151
  imageWidth: 0,
170
152
  imageHeight: 0,
@@ -174,12 +156,10 @@ var Watermark = /** @class */ (function () {
174
156
  backgroundRepeat: 'repeat',
175
157
  fontSize: 20,
176
158
  fontFamily: 'sans-serif',
177
- textAlign: TextAlignEnum.center,
178
- textBaseline: TextBaselineEnum.middle,
179
159
  fontColor: '#000',
180
160
  globalAlpha: 0.5,
181
161
  fontWeight: 'normal',
182
- mode: CreateWatermarkModeEnum.default,
162
+ mode: 'default',
183
163
  mutationObserve: true,
184
164
  unique: true,
185
165
  parent: 'body',
@@ -187,10 +167,8 @@ var Watermark = /** @class */ (function () {
187
167
  onBeforeDestroy: function () { },
188
168
  onDestroyed: function () { }
189
169
  }, 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
170
  this.changeParentElement(this.options.parent);
171
+ this.initializeOptions();
194
172
  }
195
173
  /**
196
174
  * Create an HD canvas.
@@ -266,6 +244,74 @@ var Watermark = /** @class */ (function () {
266
244
  (_e = this.watermarkDom) === null || _e === void 0 ? void 0 : _e.remove();
267
245
  (_g = (_f = this.options).onDestroyed) === null || _g === void 0 ? void 0 : _g.call(_f);
268
246
  };
247
+ Watermark.prototype.initializeOptions = function () {
248
+ var _a, _b, _c, _d, _e, _f, _g;
249
+ if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.rotate) {
250
+ this.options.rotate = (360 - this.options.rotate % 360) * (Math.PI / 180);
251
+ }
252
+ var translateX;
253
+ var translateY;
254
+ var textBaseline = 'middle';
255
+ var textAlign = 'center';
256
+ switch (this.options.translatePlacement) {
257
+ case 'top':
258
+ translateX = this.options.width / 2;
259
+ translateY = 0;
260
+ textBaseline = 'top';
261
+ break;
262
+ case 'top-start':
263
+ translateX = 0;
264
+ translateY = 0;
265
+ textBaseline = 'top';
266
+ textAlign = 'start';
267
+ break;
268
+ case 'top-end':
269
+ translateX = this.options.width;
270
+ translateY = 0;
271
+ textBaseline = 'top';
272
+ textAlign = 'end';
273
+ break;
274
+ case 'bottom':
275
+ translateX = this.options.width / 2;
276
+ translateY = this.options.height;
277
+ textBaseline = 'bottom';
278
+ break;
279
+ case 'bottom-start':
280
+ translateX = 0;
281
+ translateY = this.options.height;
282
+ textBaseline = 'bottom';
283
+ textAlign = 'start';
284
+ break;
285
+ case 'bottom-end':
286
+ translateX = this.options.width;
287
+ translateY = this.options.height;
288
+ textBaseline = 'bottom';
289
+ textAlign = 'end';
290
+ break;
291
+ case 'left':
292
+ translateX = 0;
293
+ translateY = this.options.height / 2;
294
+ textAlign = 'start';
295
+ break;
296
+ case 'right':
297
+ translateX = this.options.width;
298
+ translateY = this.options.height / 2;
299
+ textAlign = 'end';
300
+ break;
301
+ case 'middle':
302
+ translateX = this.options.width / 2;
303
+ translateY = this.options.height / 2;
304
+ break;
305
+ }
306
+ if (!isUndefined((_b = this.props) === null || _b === void 0 ? void 0 : _b.translateX) || !isUndefined((_c = this.props) === null || _c === void 0 ? void 0 : _c.translateY)) {
307
+ textBaseline = 'top';
308
+ textAlign = 'left';
309
+ }
310
+ isUndefined((_d = this.props) === null || _d === void 0 ? void 0 : _d.translateX) && (this.options.translateX = translateX);
311
+ isUndefined((_e = this.props) === null || _e === void 0 ? void 0 : _e.translateY) && (this.options.translateY = translateY);
312
+ isUndefined((_f = this.props) === null || _f === void 0 ? void 0 : _f.textBaseline) && (this.options.textBaseline = textBaseline);
313
+ isUndefined((_g = this.props) === null || _g === void 0 ? void 0 : _g.textAlign) && (this.options.textAlign = textAlign);
314
+ };
269
315
  Watermark.prototype.validateUnique = function () {
270
316
  var result = true;
271
317
  if (this.options.unique) {
@@ -283,11 +329,11 @@ var Watermark = /** @class */ (function () {
283
329
  };
284
330
  Watermark.prototype.validateContent = function () {
285
331
  switch (this.options.contentType) {
286
- case ContentTypeEnum.image:
332
+ case 'image':
287
333
  return Object.hasOwnProperty.call(this.options, 'image');
288
- case ContentTypeEnum.multiLineText:
289
- case ContentTypeEnum.richText:
290
- case ContentTypeEnum.text:
334
+ case 'multi-line-text':
335
+ case 'rich-text':
336
+ case 'text':
291
337
  return this.options.content.length > 0;
292
338
  }
293
339
  return false;
@@ -301,30 +347,30 @@ var Watermark = /** @class */ (function () {
301
347
  throw new Error('get context error');
302
348
  }
303
349
  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;
350
+ this.options.textAlign && (ctx.textAlign = this.options.textAlign);
351
+ this.options.textBaseline && (ctx.textBaseline = this.options.textBaseline);
306
352
  ctx.fillStyle = this.options.fontColor;
307
353
  ctx.globalAlpha = this.options.globalAlpha;
354
+ ctx.translate(this.options.translateX, this.options.translateY);
355
+ ctx.rotate(this.options.rotate);
308
356
  return new Promise(function (resolve) {
309
357
  switch (_this.options.contentType) {
310
- case ContentTypeEnum.text:
358
+ case 'text':
311
359
  _this.drawText(ctx, resolve);
312
360
  break;
313
- case ContentTypeEnum.image:
361
+ case 'image':
314
362
  _this.drawImage(ctx, resolve);
315
363
  break;
316
- case ContentTypeEnum.multiLineText:
364
+ case 'multi-line-text':
317
365
  _this.drawMultiLineText(ctx, resolve);
318
366
  break;
319
- case ContentTypeEnum.richText:
367
+ case 'rich-text':
320
368
  _this.drawRichText(ctx, resolve);
321
369
  break;
322
370
  }
323
371
  });
324
372
  };
325
373
  Watermark.prototype.drawText = function (ctx, resolve) {
326
- ctx.translate(this.options.width / 2, this.options.height / 2);
327
- ctx.rotate(this.options.rotate);
328
374
  ctx.fillText(this.options.content, 0, 0);
329
375
  resolve(ctx.canvas);
330
376
  };
@@ -334,10 +380,9 @@ var Watermark = /** @class */ (function () {
334
380
  image.setAttribute('crossOrigin', 'Anonymous');
335
381
  image.src = this.options.image;
336
382
  image.onload = function () {
337
- ctx.translate(_this.options.width / 2, _this.options.height / 2);
338
- ctx.rotate(_this.options.rotate);
339
383
  var _a = _this.getImageRect(image), imageWidth = _a.width, imageHeight = _a.height;
340
- ctx.drawImage(image, 0 - imageWidth / 2, 0 - imageHeight / 2, imageWidth, imageHeight);
384
+ var imagePosition = _this.getDrawImagePosition(imageWidth, imageHeight);
385
+ ctx.drawImage(image, imagePosition.x, imagePosition.y, imageWidth, imageHeight);
341
386
  resolve(ctx.canvas);
342
387
  };
343
388
  };
@@ -360,9 +405,21 @@ var Watermark = /** @class */ (function () {
360
405
  // resolve(canvas)
361
406
  // }
362
407
  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
- var yOffsetValue = (lines.length - 1) * this.options.lineHeight / 2;
408
+ var yOffsetValue;
409
+ switch (this.options.textBaseline) {
410
+ case 'middle':
411
+ yOffsetValue = (lines.length - 1) * this.options.lineHeight / 2;
412
+ break;
413
+ case 'bottom':
414
+ case 'alphabetic':
415
+ case 'ideographic':
416
+ yOffsetValue = (lines.length - 1) * this.options.lineHeight;
417
+ break;
418
+ case 'top':
419
+ case 'hanging':
420
+ yOffsetValue = 0;
421
+ break;
422
+ }
366
423
  lines.forEach(function (txt, index) {
367
424
  ctx.fillText(txt, 0, _this.options.lineHeight * index - yOffsetValue);
368
425
  });
@@ -370,15 +427,14 @@ var Watermark = /** @class */ (function () {
370
427
  };
371
428
  Watermark.prototype.drawRichText = function (ctx, resolve) {
372
429
  var _this = this;
430
+ var obj = createCustomContentSVG(ctx, this.options);
373
431
  var image = new Image();
374
- image.width = this.options.width;
375
- image.height = this.options.height;
376
- var element = createCustomContentSVG(ctx, this.options);
377
- image.src = convertSVGToImage(element);
432
+ image.width = obj.width;
433
+ image.height = obj.height;
434
+ image.src = convertSVGToImage(obj.element);
378
435
  image.onload = function () {
379
- ctx.translate(_this.options.width / 2, _this.options.height / 2);
380
- ctx.rotate(_this.options.rotate);
381
- ctx.drawImage(image, -_this.options.width / 2, -_this.options.height / 2, ctx.canvas.width, ctx.canvas.height);
436
+ var imagePosition = _this.getDrawImagePosition(image.width, image.height);
437
+ ctx.drawImage(image, imagePosition.x, imagePosition.y, ctx.canvas.width, ctx.canvas.height);
382
438
  resolve(ctx.canvas);
383
439
  };
384
440
  };
@@ -398,6 +454,50 @@ var Watermark = /** @class */ (function () {
398
454
  }
399
455
  return rect;
400
456
  };
457
+ Watermark.prototype.getDrawImagePosition = function (imageWidth, imageHeight) {
458
+ var _a, _b;
459
+ var result = {
460
+ x: -imageWidth / 2,
461
+ y: -imageHeight / 2
462
+ };
463
+ switch (this.options.translatePlacement) {
464
+ case 'top':
465
+ result.x = -imageWidth / 2;
466
+ result.y = 0;
467
+ break;
468
+ case 'top-start':
469
+ result.x = 0;
470
+ result.y = 0;
471
+ break;
472
+ case 'top-end':
473
+ result.x = -imageWidth;
474
+ result.y = 0;
475
+ break;
476
+ case 'bottom':
477
+ result.x = -imageWidth / 2;
478
+ result.y = -imageHeight;
479
+ break;
480
+ case 'bottom-start':
481
+ result.x = 0;
482
+ result.y = -imageHeight;
483
+ break;
484
+ case 'bottom-end':
485
+ result.x = -imageWidth;
486
+ result.y = -imageHeight;
487
+ break;
488
+ case 'left':
489
+ result.x = 0;
490
+ result.y = -imageHeight / 2;
491
+ break;
492
+ case 'right':
493
+ result.x = -imageWidth;
494
+ result.y = -imageHeight / 2;
495
+ break;
496
+ }
497
+ !isUndefined((_a = this.props) === null || _a === void 0 ? void 0 : _a.translateX) && (result.x = 0);
498
+ !isUndefined((_b = this.props) === null || _b === void 0 ? void 0 : _b.translateY) && (result.y = 0);
499
+ return result;
500
+ };
401
501
  Watermark.prototype.checkParentElementType = function () {
402
502
  if (['html', 'body'].includes(this.parentElement.tagName.toLocaleLowerCase())) {
403
503
  return 'root';
@@ -452,7 +552,7 @@ var BlindWatermark = /** @class */ (function (_super) {
452
552
  function BlindWatermark(props) {
453
553
  if (props === void 0) { props = {}; }
454
554
  props.globalAlpha = 0.005;
455
- props.mode = CreateWatermarkModeEnum.blind;
555
+ props.mode = 'blind';
456
556
  return _super.call(this, props) || this;
457
557
  }
458
558
  /**
@@ -464,12 +564,12 @@ var BlindWatermark = /** @class */ (function (_super) {
464
564
  url: '',
465
565
  fillColor: '#000',
466
566
  compositeOperation: 'color-burn',
467
- mode: DecodeBlindWatermarkModeEnum.canvas
567
+ mode: 'canvas'
468
568
  }, props);
469
569
  if (!options.url) {
470
570
  return;
471
571
  }
472
- if (options.mode === DecodeBlindWatermarkModeEnum.canvas) {
572
+ if (options.mode === 'canvas') {
473
573
  var img_1 = new Image();
474
574
  img_1.src = options.url;
475
575
  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'; }
@@ -106,54 +109,32 @@
106
109
  var svgElement = createSVGElement('svg', {
107
110
  xmlns: 'http://www.w3.org/2000/svg'
108
111
  });
109
- var foreignObjectElement = createSVGElement('foreignObject', {
110
- width: options.width.toString(),
111
- height: options.height.toString()
112
- });
113
112
  var bodyElement = document.createElement('div');
114
113
  bodyElement.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
115
- bodyElement.style.cssText = "\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n font: ".concat(ctx.font, ";\n color: ").concat(options.fontColor, ";\n ");
116
- bodyElement.innerHTML = options.content;
114
+ bodyElement.style.cssText = "\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n font: ".concat(ctx.font, ";\n color: ").concat(options.fontColor, ";\n");
115
+ bodyElement.innerHTML = "<div class=\"rich-text-content\">".concat(options.content, "</div>");
116
+ document.body.appendChild(bodyElement);
117
+ var _a = bodyElement.querySelector('.rich-text-content'), offsetHeight = _a.offsetHeight, offsetWidth = _a.offsetWidth;
118
+ document.body.removeChild(bodyElement);
119
+ var width = options.richTextWidth || offsetWidth || options.width;
120
+ var height = options.richTextHeight || offsetHeight || options.height;
121
+ var foreignObjectElement = createSVGElement('foreignObject', {
122
+ width: width.toString(),
123
+ height: height.toString()
124
+ });
117
125
  foreignObjectElement.appendChild(bodyElement);
118
126
  svgElement.appendChild(foreignObjectElement);
119
- return svgElement;
127
+ return {
128
+ element: svgElement,
129
+ width: width,
130
+ height: height
131
+ };
120
132
  };
121
133
  var convertSVGToImage = function (svg) {
122
134
  var richContent = svg.outerHTML.replace(/\n/g, '').replace(/\t/g, '').replace(/#/g, '%23');
123
135
  return "data:image/svg+xml;charset=utf-8,".concat(richContent);
124
136
  };
125
137
 
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
138
  /**
158
139
  * Watermark class
159
140
  */
@@ -164,13 +145,14 @@
164
145
  */
165
146
  function Watermark(props) {
166
147
  if (props === void 0) { props = {}; }
167
- var _a;
168
148
  this.parentElement = document.body;
149
+ this.props = props;
169
150
  this.options = Object.assign({
170
151
  width: 300,
171
152
  height: 300,
172
153
  rotate: 45,
173
- contentType: ContentTypeEnum.text,
154
+ translatePlacement: 'middle',
155
+ contentType: 'text',
174
156
  content: 'hello watermark-js-plus',
175
157
  imageWidth: 0,
176
158
  imageHeight: 0,
@@ -180,12 +162,10 @@
180
162
  backgroundRepeat: 'repeat',
181
163
  fontSize: 20,
182
164
  fontFamily: 'sans-serif',
183
- textAlign: TextAlignEnum.center,
184
- textBaseline: TextBaselineEnum.middle,
185
165
  fontColor: '#000',
186
166
  globalAlpha: 0.5,
187
167
  fontWeight: 'normal',
188
- mode: CreateWatermarkModeEnum.default,
168
+ mode: 'default',
189
169
  mutationObserve: true,
190
170
  unique: true,
191
171
  parent: 'body',
@@ -193,10 +173,8 @@
193
173
  onBeforeDestroy: function () { },
194
174
  onDestroyed: function () { }
195
175
  }, 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
176
  this.changeParentElement(this.options.parent);
177
+ this.initializeOptions();
200
178
  }
201
179
  /**
202
180
  * Create an HD canvas.
@@ -272,6 +250,74 @@
272
250
  (_e = this.watermarkDom) === null || _e === void 0 ? void 0 : _e.remove();
273
251
  (_g = (_f = this.options).onDestroyed) === null || _g === void 0 ? void 0 : _g.call(_f);
274
252
  };
253
+ Watermark.prototype.initializeOptions = function () {
254
+ var _a, _b, _c, _d, _e, _f, _g;
255
+ if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.rotate) {
256
+ this.options.rotate = (360 - this.options.rotate % 360) * (Math.PI / 180);
257
+ }
258
+ var translateX;
259
+ var translateY;
260
+ var textBaseline = 'middle';
261
+ var textAlign = 'center';
262
+ switch (this.options.translatePlacement) {
263
+ case 'top':
264
+ translateX = this.options.width / 2;
265
+ translateY = 0;
266
+ textBaseline = 'top';
267
+ break;
268
+ case 'top-start':
269
+ translateX = 0;
270
+ translateY = 0;
271
+ textBaseline = 'top';
272
+ textAlign = 'start';
273
+ break;
274
+ case 'top-end':
275
+ translateX = this.options.width;
276
+ translateY = 0;
277
+ textBaseline = 'top';
278
+ textAlign = 'end';
279
+ break;
280
+ case 'bottom':
281
+ translateX = this.options.width / 2;
282
+ translateY = this.options.height;
283
+ textBaseline = 'bottom';
284
+ break;
285
+ case 'bottom-start':
286
+ translateX = 0;
287
+ translateY = this.options.height;
288
+ textBaseline = 'bottom';
289
+ textAlign = 'start';
290
+ break;
291
+ case 'bottom-end':
292
+ translateX = this.options.width;
293
+ translateY = this.options.height;
294
+ textBaseline = 'bottom';
295
+ textAlign = 'end';
296
+ break;
297
+ case 'left':
298
+ translateX = 0;
299
+ translateY = this.options.height / 2;
300
+ textAlign = 'start';
301
+ break;
302
+ case 'right':
303
+ translateX = this.options.width;
304
+ translateY = this.options.height / 2;
305
+ textAlign = 'end';
306
+ break;
307
+ case 'middle':
308
+ translateX = this.options.width / 2;
309
+ translateY = this.options.height / 2;
310
+ break;
311
+ }
312
+ if (!isUndefined((_b = this.props) === null || _b === void 0 ? void 0 : _b.translateX) || !isUndefined((_c = this.props) === null || _c === void 0 ? void 0 : _c.translateY)) {
313
+ textBaseline = 'top';
314
+ textAlign = 'left';
315
+ }
316
+ isUndefined((_d = this.props) === null || _d === void 0 ? void 0 : _d.translateX) && (this.options.translateX = translateX);
317
+ isUndefined((_e = this.props) === null || _e === void 0 ? void 0 : _e.translateY) && (this.options.translateY = translateY);
318
+ isUndefined((_f = this.props) === null || _f === void 0 ? void 0 : _f.textBaseline) && (this.options.textBaseline = textBaseline);
319
+ isUndefined((_g = this.props) === null || _g === void 0 ? void 0 : _g.textAlign) && (this.options.textAlign = textAlign);
320
+ };
275
321
  Watermark.prototype.validateUnique = function () {
276
322
  var result = true;
277
323
  if (this.options.unique) {
@@ -289,11 +335,11 @@
289
335
  };
290
336
  Watermark.prototype.validateContent = function () {
291
337
  switch (this.options.contentType) {
292
- case ContentTypeEnum.image:
338
+ case 'image':
293
339
  return Object.hasOwnProperty.call(this.options, 'image');
294
- case ContentTypeEnum.multiLineText:
295
- case ContentTypeEnum.richText:
296
- case ContentTypeEnum.text:
340
+ case 'multi-line-text':
341
+ case 'rich-text':
342
+ case 'text':
297
343
  return this.options.content.length > 0;
298
344
  }
299
345
  return false;
@@ -307,30 +353,30 @@
307
353
  throw new Error('get context error');
308
354
  }
309
355
  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;
356
+ this.options.textAlign && (ctx.textAlign = this.options.textAlign);
357
+ this.options.textBaseline && (ctx.textBaseline = this.options.textBaseline);
312
358
  ctx.fillStyle = this.options.fontColor;
313
359
  ctx.globalAlpha = this.options.globalAlpha;
360
+ ctx.translate(this.options.translateX, this.options.translateY);
361
+ ctx.rotate(this.options.rotate);
314
362
  return new Promise(function (resolve) {
315
363
  switch (_this.options.contentType) {
316
- case ContentTypeEnum.text:
364
+ case 'text':
317
365
  _this.drawText(ctx, resolve);
318
366
  break;
319
- case ContentTypeEnum.image:
367
+ case 'image':
320
368
  _this.drawImage(ctx, resolve);
321
369
  break;
322
- case ContentTypeEnum.multiLineText:
370
+ case 'multi-line-text':
323
371
  _this.drawMultiLineText(ctx, resolve);
324
372
  break;
325
- case ContentTypeEnum.richText:
373
+ case 'rich-text':
326
374
  _this.drawRichText(ctx, resolve);
327
375
  break;
328
376
  }
329
377
  });
330
378
  };
331
379
  Watermark.prototype.drawText = function (ctx, resolve) {
332
- ctx.translate(this.options.width / 2, this.options.height / 2);
333
- ctx.rotate(this.options.rotate);
334
380
  ctx.fillText(this.options.content, 0, 0);
335
381
  resolve(ctx.canvas);
336
382
  };
@@ -340,10 +386,9 @@
340
386
  image.setAttribute('crossOrigin', 'Anonymous');
341
387
  image.src = this.options.image;
342
388
  image.onload = function () {
343
- ctx.translate(_this.options.width / 2, _this.options.height / 2);
344
- ctx.rotate(_this.options.rotate);
345
389
  var _a = _this.getImageRect(image), imageWidth = _a.width, imageHeight = _a.height;
346
- ctx.drawImage(image, 0 - imageWidth / 2, 0 - imageHeight / 2, imageWidth, imageHeight);
390
+ var imagePosition = _this.getDrawImagePosition(imageWidth, imageHeight);
391
+ ctx.drawImage(image, imagePosition.x, imagePosition.y, imageWidth, imageHeight);
347
392
  resolve(ctx.canvas);
348
393
  };
349
394
  };
@@ -366,9 +411,21 @@
366
411
  // resolve(canvas)
367
412
  // }
368
413
  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
- var yOffsetValue = (lines.length - 1) * this.options.lineHeight / 2;
414
+ var yOffsetValue;
415
+ switch (this.options.textBaseline) {
416
+ case 'middle':
417
+ yOffsetValue = (lines.length - 1) * this.options.lineHeight / 2;
418
+ break;
419
+ case 'bottom':
420
+ case 'alphabetic':
421
+ case 'ideographic':
422
+ yOffsetValue = (lines.length - 1) * this.options.lineHeight;
423
+ break;
424
+ case 'top':
425
+ case 'hanging':
426
+ yOffsetValue = 0;
427
+ break;
428
+ }
372
429
  lines.forEach(function (txt, index) {
373
430
  ctx.fillText(txt, 0, _this.options.lineHeight * index - yOffsetValue);
374
431
  });
@@ -376,15 +433,14 @@
376
433
  };
377
434
  Watermark.prototype.drawRichText = function (ctx, resolve) {
378
435
  var _this = this;
436
+ var obj = createCustomContentSVG(ctx, this.options);
379
437
  var image = new Image();
380
- image.width = this.options.width;
381
- image.height = this.options.height;
382
- var element = createCustomContentSVG(ctx, this.options);
383
- image.src = convertSVGToImage(element);
438
+ image.width = obj.width;
439
+ image.height = obj.height;
440
+ image.src = convertSVGToImage(obj.element);
384
441
  image.onload = function () {
385
- ctx.translate(_this.options.width / 2, _this.options.height / 2);
386
- ctx.rotate(_this.options.rotate);
387
- ctx.drawImage(image, -_this.options.width / 2, -_this.options.height / 2, ctx.canvas.width, ctx.canvas.height);
442
+ var imagePosition = _this.getDrawImagePosition(image.width, image.height);
443
+ ctx.drawImage(image, imagePosition.x, imagePosition.y, ctx.canvas.width, ctx.canvas.height);
388
444
  resolve(ctx.canvas);
389
445
  };
390
446
  };
@@ -404,6 +460,50 @@
404
460
  }
405
461
  return rect;
406
462
  };
463
+ Watermark.prototype.getDrawImagePosition = function (imageWidth, imageHeight) {
464
+ var _a, _b;
465
+ var result = {
466
+ x: -imageWidth / 2,
467
+ y: -imageHeight / 2
468
+ };
469
+ switch (this.options.translatePlacement) {
470
+ case 'top':
471
+ result.x = -imageWidth / 2;
472
+ result.y = 0;
473
+ break;
474
+ case 'top-start':
475
+ result.x = 0;
476
+ result.y = 0;
477
+ break;
478
+ case 'top-end':
479
+ result.x = -imageWidth;
480
+ result.y = 0;
481
+ break;
482
+ case 'bottom':
483
+ result.x = -imageWidth / 2;
484
+ result.y = -imageHeight;
485
+ break;
486
+ case 'bottom-start':
487
+ result.x = 0;
488
+ result.y = -imageHeight;
489
+ break;
490
+ case 'bottom-end':
491
+ result.x = -imageWidth;
492
+ result.y = -imageHeight;
493
+ break;
494
+ case 'left':
495
+ result.x = 0;
496
+ result.y = -imageHeight / 2;
497
+ break;
498
+ case 'right':
499
+ result.x = -imageWidth;
500
+ result.y = -imageHeight / 2;
501
+ break;
502
+ }
503
+ !isUndefined((_a = this.props) === null || _a === void 0 ? void 0 : _a.translateX) && (result.x = 0);
504
+ !isUndefined((_b = this.props) === null || _b === void 0 ? void 0 : _b.translateY) && (result.y = 0);
505
+ return result;
506
+ };
407
507
  Watermark.prototype.checkParentElementType = function () {
408
508
  if (['html', 'body'].includes(this.parentElement.tagName.toLocaleLowerCase())) {
409
509
  return 'root';
@@ -458,7 +558,7 @@
458
558
  function BlindWatermark(props) {
459
559
  if (props === void 0) { props = {}; }
460
560
  props.globalAlpha = 0.005;
461
- props.mode = CreateWatermarkModeEnum.blind;
561
+ props.mode = 'blind';
462
562
  return _super.call(this, props) || this;
463
563
  }
464
564
  /**
@@ -470,12 +570,12 @@
470
570
  url: '',
471
571
  fillColor: '#000',
472
572
  compositeOperation: 'color-burn',
473
- mode: DecodeBlindWatermarkModeEnum.canvas
573
+ mode: 'canvas'
474
574
  }, props);
475
575
  if (!options.url) {
476
576
  return;
477
577
  }
478
- if (options.mode === DecodeBlindWatermarkModeEnum.canvas) {
578
+ if (options.mode === 'canvas') {
479
579
  var img_1 = new Image();
480
580
  img_1.src = options.url;
481
581
  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",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,o){return e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o])},e(t,o)};function o(t,e,o,n){return new(o||(o=Promise))((function(i,r){function a(t){try{c(n.next(t))}catch(t){r(t)}}function s(t){try{c(n.throw(t))}catch(t){r(t)}}function c(t){var e;t.done?i(t.value):(e=t.value,e instanceof o?e:new o((function(t){t(e)}))).then(a,s)}c((n=n.apply(t,e||[])).next())}))}function n(t,e){var o,n,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(o)throw new TypeError("Generator is already executing.");for(;a;)try{if(o=1,n&&(i=2&r[0]?n.return:r[0]?n.throw||((i=n.return)&&i.call(n),0):n.next)&&!(i=i.call(n,r[1])).done)return i;switch(n=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++,n=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],n=0}finally{o=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,o){void 0===e&&(e={}),void 0===o&&(o="http://www.w3.org/2000/svg");var n=document.createElementNS(o,t);for(var i in e)n.setAttribute(i,e[i]);return n},s=function(){function t(t){void 0===t&&(t={}),this.parentElement=document.body,this.props=t,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 o,n=window.devicePixelRatio||1,i=document.createElement("canvas");return i.width=t*n,i.height=e*n,i.style.width="".concat(t,"px"),i.style.height="".concat(e,"px"),null===(o=i.getContext("2d"))||void 0===o||o.setTransform(n,0,0,n,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 o(this,void 0,void 0,(function(){var o,r,a,s;return n(this,(function(n){switch(n.label){case 0:return this.validateUnique()&&this.validateContent()?[4,this.draw()]:[2];case 1:return o=n.sent(),r=i(o),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,o,n,i,r,a;null===(e=(t=this.options).onBeforeDestroy)||void 0===e||e.call(t),null===(o=this.observer)||void 0===o||o.disconnect(),null===(n=this.parentObserve)||void 0===n||n.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,o,n,i,a,s,c,h;(null===(t=this.options)||void 0===t?void 0:t.rotate)&&(this.options.rotate=(360-this.options.rotate%360)*(Math.PI/180));var l="middle",p="center";switch(this.options.translatePlacement){case"top":c=this.options.width/2,h=0,l="top";break;case"top-start":c=0,h=0,l="top",p="start";break;case"top-end":c=this.options.width,h=0,l="top",p="end";break;case"bottom":c=this.options.width/2,h=this.options.height,l="bottom";break;case"bottom-start":c=0,h=this.options.height,l="bottom",p="start";break;case"bottom-end":c=this.options.width,h=this.options.height,l="bottom",p="end";break;case"left":c=0,h=this.options.height/2,p="start";break;case"right":c=this.options.width,h=this.options.height/2,p="end";break;case"middle":c=this.options.width/2,h=this.options.height/2}r(null===(e=this.props)||void 0===e?void 0:e.translateX)&&r(null===(o=this.props)||void 0===o?void 0:o.translateY)||(l="top",p="left"),r(null===(n=this.props)||void 0===n?void 0:n.translateX)&&(this.options.translateX=c),r(null===(i=this.props)||void 0===i?void 0:i.translateY)&&(this.options.translateY=h),r(null===(a=this.props)||void 0===a?void 0:a.textBaseline)&&(this.options.textBaseline=l),r(null===(s=this.props)||void 0===s?void 0:s.textAlign)&&(this.options.textAlign=p)},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,o=t.createCanvas(this.options.width,this.options.height).getContext("2d");if(null===o)throw new Error("get context error");return o.font="".concat(this.options.fontWeight," ").concat(this.options.fontSize,"px ").concat(this.options.fontFamily),this.options.textAlign&&(o.textAlign=this.options.textAlign),this.options.textBaseline&&(o.textBaseline=this.options.textBaseline),o.fillStyle=this.options.fontColor,o.globalAlpha=this.options.globalAlpha,o.translate(this.options.translateX,this.options.translateY),o.rotate(this.options.rotate),new Promise((function(t){switch(e.options.contentType){case"text":e.drawText(o,t);break;case"image":e.drawImage(o,t);break;case"multi-line-text":e.drawMultiLineText(o,t);break;case"rich-text":e.drawRichText(o,t)}}))},t.prototype.drawText=function(t,e){t.fillText(this.options.content,0,0),e(t.canvas)},t.prototype.drawImage=function(t,e){var o=this,n=new Image;n.setAttribute("crossOrigin","Anonymous"),n.src=this.options.image,n.onload=function(){var i=o.getImageRect(n),r=i.width,a=i.height,s=o.getDrawImagePosition(r,a);t.drawImage(n,s.x,s.y,r,a),e(t.canvas)}},t.prototype.drawMultiLineText=function(t,e){var o,n=this,i=function(t,e,o){for(var n=[],i="",r=0,a=e.length;r<a;r++)i+=e.charAt(r),t.measureText(i).width>o&&(n.push(i.substring(0,i.length-1)),i="",r--);return n.push(i),n}(t,this.options.content,this.options.width);switch(this.options.textBaseline){case"middle":o=(i.length-1)*this.options.lineHeight/2;break;case"bottom":case"alphabetic":case"ideographic":o=(i.length-1)*this.options.lineHeight;break;case"top":case"hanging":o=0}i.forEach((function(e,i){t.fillText(e,0,n.options.lineHeight*i-o)})),e(t.canvas)},t.prototype.drawRichText=function(t,e){var o,n,i=this,r=function(t,e){var o=a("svg",{xmlns:"http://www.w3.org/2000/svg"}),n=document.createElement("div");n.setAttribute("xmlns","http://www.w3.org/1999/xhtml"),n.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"),n.innerHTML='<div class="rich-text-content">'.concat(e.content,"</div>"),document.body.appendChild(n);var i=n.querySelector(".rich-text-content"),r=i.offsetHeight,s=i.offsetWidth;document.body.removeChild(n);var c=e.richTextWidth||s||e.width,h=e.richTextHeight||r||e.height,l=a("foreignObject",{width:c.toString(),height:h.toString()});return l.appendChild(n),o.appendChild(l),{element:o,width:c,height:h}}(t,this.options),s=new Image;s.width=r.width,s.height=r.height,s.src=(o=r.element,n=o.outerHTML.replace(/\n/g,"").replace(/\t/g,"").replace(/#/g,"%23"),"data:image/svg+xml;charset=utf-8,".concat(n)),s.onload=function(){var o=i.getDrawImagePosition(s.width,s.height);t.drawImage(s,o.x,o.y,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.getDrawImagePosition=function(t,e){var o,n,i={x:-t/2,y:-e/2};switch(this.options.translatePlacement){case"top":i.x=-t/2,i.y=0;break;case"top-start":i.x=0,i.y=0;break;case"top-end":i.x=-t,i.y=0;break;case"bottom":i.x=-t/2,i.y=-e;break;case"bottom-start":i.x=0,i.y=-e;break;case"bottom-end":i.x=-t,i.y=-e;break;case"left":i.x=0,i.y=-e/2;break;case"right":i.x=-t,i.y=-e/2}return!r(null===(o=this.props)||void 0===o?void 0:o.translateX)&&(i.x=0),!r(null===(n=this.props)||void 0===n?void 0:n.translateY)&&(i.y=0),i},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 o;(null==e?void 0:e.target)!==t.watermarkDom&&(null===(o=null==e?void 0:e.removedNodes)||void 0===o?void 0:o[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 o(e){return void 0===e&&(e={}),e.globalAlpha=.005,e.mode="blind",t.call(this,e)||this}return function(t,o){if("function"!=typeof o&&null!==o)throw new TypeError("Class extends value "+String(o)+" is not a constructor or null");function n(){this.constructor=t}e(t,o),t.prototype=null===o?Object.create(o):(n.prototype=o.prototype,new n)}(o,t),o.decode=function(t){var e=Object.assign({url:"",fillColor:"#000",compositeOperation:"color-burn",mode:"canvas"},t);if(e.url&&"canvas"===e.mode){var o=new Image;o.src=e.url,o.onload=function(){var t,n=o.width,r=o.height,a=s.createCanvas(n,r),c=a.getContext("2d");if(null===c)throw new Error("get context error");c.drawImage(o,0,0,n,r),c.globalCompositeOperation=e.compositeOperation,c.fillStyle=e.fillColor,c.fillRect(0,0,n,r);var h=i(a);e.onSuccess&&"function"==typeof e.onSuccess&&(null===(t=e.onSuccess)||void 0===t||t.call(e,h))}}},o}(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.4.0",
4
4
  "description": "watermark for the browser",
5
5
  "scripts": {
6
6
  "test": "echo \"Error: no test specified\" && exit 1",
@@ -44,20 +44,20 @@
44
44
  "dist"
45
45
  ],
46
46
  "devDependencies": {
47
- "@babel/core": "^7.20.7",
47
+ "@babel/core": "^7.20.12",
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",
51
- "@commitlint/cli": "^17.3.0",
52
- "@commitlint/config-conventional": "^17.3.0",
51
+ "@commitlint/cli": "^17.4.0",
52
+ "@commitlint/config-conventional": "^17.4.0",
53
53
  "@element-plus/icons-vue": "^2.0.10",
54
54
  "@rollup/plugin-babel": "^6.0.3",
55
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
58
  "@rollup/plugin-replace": "^5.0.2",
59
- "@rollup/plugin-terser": "0.2.1",
60
- "@rollup/plugin-typescript": "^10.0.1",
59
+ "@rollup/plugin-terser": "0.3.0",
60
+ "@rollup/plugin-typescript": "^11.0.0",
61
61
  "@types/markdown-it": "^12.2.3",
62
62
  "@typescript-eslint/parser": "^5.48.0",
63
63
  "@vue/theme": "^1.3.0",
@@ -75,10 +75,10 @@
75
75
  "markdown-it": "^13.0.1",
76
76
  "rollup": "^3.9.1",
77
77
  "rollup-plugin-filesize": "^9.1.2",
78
- "rollup-plugin-your-function": "^0.4.6",
78
+ "rollup-plugin-your-function": "^0.4.7",
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.34"
82
+ "vitepress": "^1.0.0-alpha.35"
83
83
  }
84
84
  }