watermark-js-plus 0.6.0 → 0.7.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 +5 -0
  2. package/dist/types/index.d.ts +24 -1
  3. package/dist/utils/index.d.ts +1 -0
  4. package/dist/watermark.esm.js +68 -9
  5. package/dist/watermark.umd.js +68 -9
  6. package/dist/watermark.umd.min.js +1 -1
  7. package/package.json +10 -10
package/dist/core/watermark.d.ts CHANGED
@@ -20,6 +20,7 @@ export default class Watermark {
20
20
  * @param height - height of canvas
21
21
  */
22
22
  static createCanvas(width: number, height: number): HTMLCanvasElement;
23
+ changeOptions(props?: Partial<WatermarkOptions>): void;
23
24
  changeParentElement(parent: Element | string): void;
24
25
  /**
25
26
  * Creating a watermark.
@@ -34,6 +35,10 @@ export default class Watermark {
34
35
  private validateContent;
35
36
  private draw;
36
37
  private setStyle;
38
+ createLinearGradient(ctx: CanvasRenderingContext2D): CanvasGradient;
39
+ createConicGradient(ctx: CanvasRenderingContext2D): CanvasGradient;
40
+ createRadialGradient(ctx: CanvasRenderingContext2D): CanvasGradient;
41
+ createPattern(ctx: CanvasRenderingContext2D): CanvasPattern | null;
37
42
  private setText;
38
43
  private drawText;
39
44
  private drawImage;
package/dist/types/index.d.ts CHANGED
@@ -29,9 +29,10 @@ export interface WatermarkOptions {
29
29
  zIndex: number;
30
30
  backgroundPosition: string;
31
31
  backgroundRepeat: string;
32
- fontSize: number;
32
+ fontSize: string;
33
33
  fontFamily: string;
34
34
  fontStyle: string;
35
+ fontVariant: string;
35
36
  fontColor: string;
36
37
  fontWeight: string;
37
38
  textAlign?: TextAlignType;
@@ -39,6 +40,7 @@ export interface WatermarkOptions {
39
40
  filter: string;
40
41
  shadowStyle?: Partial<CanvasShadowStyles>;
41
42
  globalAlpha: number;
43
+ advancedStyle?: AdvancedStyleType;
42
44
  extraDrawFunc?: Function;
43
45
  mode: CreateWatermarkModeType;
44
46
  mutationObserve: boolean;
@@ -60,3 +62,24 @@ export interface CustomContentSVGType {
60
62
  width: number;
61
63
  height: number;
62
64
  }
65
+ export interface AdvancedStyleType {
66
+ type: 'linear' | 'radial' | 'conic' | 'pattern';
67
+ params?: Partial<AdvancedStyleParamsType>;
68
+ colorStops?: {
69
+ offset: number;
70
+ color: string;
71
+ }[];
72
+ }
73
+ export interface AdvancedStyleParamsType {
74
+ x0: number;
75
+ y0: number;
76
+ r0: number;
77
+ x1: number;
78
+ y1: number;
79
+ r1: number;
80
+ startAngle: number;
81
+ x: number;
82
+ y: number;
83
+ image: CanvasImageSource;
84
+ repetition: string;
85
+ }
package/dist/utils/index.d.ts CHANGED
@@ -2,6 +2,7 @@ import { CustomContentSVGType, WatermarkOptions } from '../types';
2
2
  export declare const convertImage: (canvas: HTMLCanvasElement) => string;
3
3
  export declare const isFunction: (value: Function) => boolean;
4
4
  export declare const isUndefined: (value: any) => boolean;
5
+ export declare const isString: (value: any) => boolean;
5
6
  export declare const createSVGElement: (tagName: string, attrs?: {
6
7
  [key: string]: string;
7
8
  }, namespaceURI?: string) => Element;
package/dist/watermark.esm.js CHANGED
@@ -155,9 +155,10 @@ var Watermark = /** @class */ (function () {
155
155
  zIndex: 10000,
156
156
  backgroundPosition: '0 0, 0 0',
157
157
  backgroundRepeat: 'repeat',
158
- fontSize: 20,
158
+ fontSize: '20px',
159
159
  fontFamily: 'sans-serif',
160
160
  fontStyle: '',
161
+ fontVariant: '',
161
162
  fontColor: '#000',
162
163
  fontWeight: 'normal',
163
164
  filter: 'none',
@@ -189,6 +190,14 @@ var Watermark = /** @class */ (function () {
189
190
  (_a = canvas.getContext('2d')) === null || _a === void 0 ? void 0 : _a.setTransform(ratio, 0, 0, ratio, 0, 0);
190
191
  return canvas;
191
192
  };
193
+ Watermark.prototype.changeOptions = function (props) {
194
+ var _this = this;
195
+ if (props === void 0) { props = {}; }
196
+ Object.keys(props).forEach(function (key) {
197
+ var _a;
198
+ ((_a = _this.options) === null || _a === void 0 ? void 0 : _a[key]) && (_this.options[key] = props[key]);
199
+ });
200
+ };
192
201
  Watermark.prototype.changeParentElement = function (parent) {
193
202
  if (typeof parent === 'string') {
194
203
  var parentElement = document.querySelector(parent);
@@ -248,7 +257,7 @@ var Watermark = /** @class */ (function () {
248
257
  (_g = (_f = this.options).onDestroyed) === null || _g === void 0 ? void 0 : _g.call(_f);
249
258
  };
250
259
  Watermark.prototype.initializeOptions = function () {
251
- var _a, _b, _c, _d, _e, _f, _g;
260
+ var _a, _b, _c, _d, _e;
252
261
  if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.rotate) {
253
262
  this.options.rotate = (360 - this.options.rotate % 360) * (Math.PI / 180);
254
263
  }
@@ -306,14 +315,18 @@ var Watermark = /** @class */ (function () {
306
315
  translateY = this.options.height / 2;
307
316
  break;
308
317
  }
309
- 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)) {
318
+ 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)) {
319
+ this.options.translateX = translateX;
320
+ this.options.translateY = translateY;
321
+ }
322
+ else {
310
323
  textBaseline = 'top';
311
324
  textAlign = 'left';
325
+ this.defaultAdvancedStyleParams.x0 = 0;
326
+ this.defaultAdvancedStyleParams.x1 = this.options.textRowMaxWidth || this.options.width;
312
327
  }
313
- isUndefined((_d = this.props) === null || _d === void 0 ? void 0 : _d.translateX) && (this.options.translateX = translateX);
314
- isUndefined((_e = this.props) === null || _e === void 0 ? void 0 : _e.translateY) && (this.options.translateY = translateY);
315
- isUndefined((_f = this.props) === null || _f === void 0 ? void 0 : _f.textBaseline) && (this.options.textBaseline = textBaseline);
316
- isUndefined((_g = this.props) === null || _g === void 0 ? void 0 : _g.textAlign) && (this.options.textAlign = textAlign);
328
+ isUndefined((_d = this.props) === null || _d === void 0 ? void 0 : _d.textBaseline) && (this.options.textBaseline = textBaseline);
329
+ isUndefined((_e = this.props) === null || _e === void 0 ? void 0 : _e.textAlign) && (this.options.textAlign = textAlign);
317
330
  };
318
331
  Watermark.prototype.validateUnique = function () {
319
332
  var result = true;
@@ -370,12 +383,30 @@ var Watermark = /** @class */ (function () {
370
383
  });
371
384
  };
372
385
  Watermark.prototype.setStyle = function (ctx) {
386
+ var _a;
373
387
  var propName = 'fillStyle';
374
388
  if (this.options.textType === 'stroke') {
375
389
  propName = 'strokeStyle';
376
390
  }
377
- ctx[propName] && (ctx[propName] = this.options.fontColor);
378
- ctx.font = "".concat(this.options.fontStyle, " ").concat(this.options.fontWeight, " ").concat(this.options.fontSize, "px ").concat(this.options.fontFamily);
391
+ var style = this.options.fontColor;
392
+ if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.advancedStyle) {
393
+ switch (this.options.advancedStyle.type) {
394
+ case 'linear':
395
+ style = this.createLinearGradient(ctx);
396
+ break;
397
+ case 'radial':
398
+ style = this.createRadialGradient(ctx);
399
+ break;
400
+ case 'conic':
401
+ style = this.createConicGradient(ctx);
402
+ break;
403
+ case 'pattern':
404
+ style = this.createPattern(ctx);
405
+ break;
406
+ }
407
+ }
408
+ ctx[propName] && style && (ctx[propName] = style);
409
+ ctx.font = "".concat(this.options.fontStyle, " ").concat(this.options.fontVariant, " ").concat(this.options.fontWeight, " ").concat(this.options.fontSize, " ").concat(this.options.fontFamily);
379
410
  ctx.filter = this.options.filter;
380
411
  this.options.textAlign && (ctx.textAlign = this.options.textAlign);
381
412
  this.options.textBaseline && (ctx.textBaseline = this.options.textBaseline);
@@ -390,6 +421,34 @@ var Watermark = /** @class */ (function () {
390
421
  this.options.extraDrawFunc(ctx);
391
422
  }
392
423
  };
424
+ Watermark.prototype.createLinearGradient = function (ctx) {
425
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
426
+ var gradient = ctx.createLinearGradient((_c = (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.advancedStyle) === null || _b === void 0 ? void 0 : _b.params) === null || _c === void 0 ? void 0 : _c.x0, (_f = (_e = (_d = this.options) === null || _d === void 0 ? void 0 : _d.advancedStyle) === null || _e === void 0 ? void 0 : _e.params) === null || _f === void 0 ? void 0 : _f.y0, (_j = (_h = (_g = this.options) === null || _g === void 0 ? void 0 : _g.advancedStyle) === null || _h === void 0 ? void 0 : _h.params) === null || _j === void 0 ? void 0 : _j.x1, (_m = (_l = (_k = this.options) === null || _k === void 0 ? void 0 : _k.advancedStyle) === null || _l === void 0 ? void 0 : _l.params) === null || _m === void 0 ? void 0 : _m.y1);
427
+ (_q = (_p = (_o = this.options) === null || _o === void 0 ? void 0 : _o.advancedStyle) === null || _p === void 0 ? void 0 : _p.colorStops) === null || _q === void 0 ? void 0 : _q.forEach(function (item) {
428
+ gradient.addColorStop(item.offset, item.color);
429
+ });
430
+ return gradient;
431
+ };
432
+ Watermark.prototype.createConicGradient = function (ctx) {
433
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
434
+ var gradient = ctx.createConicGradient((_c = (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.advancedStyle) === null || _b === void 0 ? void 0 : _b.params) === null || _c === void 0 ? void 0 : _c.startAngle, (_f = (_e = (_d = this.options) === null || _d === void 0 ? void 0 : _d.advancedStyle) === null || _e === void 0 ? void 0 : _e.params) === null || _f === void 0 ? void 0 : _f.x, (_j = (_h = (_g = this.options) === null || _g === void 0 ? void 0 : _g.advancedStyle) === null || _h === void 0 ? void 0 : _h.params) === null || _j === void 0 ? void 0 : _j.y);
435
+ (_m = (_l = (_k = this.options) === null || _k === void 0 ? void 0 : _k.advancedStyle) === null || _l === void 0 ? void 0 : _l.colorStops) === null || _m === void 0 ? void 0 : _m.forEach(function (item) {
436
+ gradient.addColorStop(item.offset, item.color);
437
+ });
438
+ return gradient;
439
+ };
440
+ Watermark.prototype.createRadialGradient = function (ctx) {
441
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
442
+ var gradient = ctx.createRadialGradient((_c = (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.advancedStyle) === null || _b === void 0 ? void 0 : _b.params) === null || _c === void 0 ? void 0 : _c.x0, (_f = (_e = (_d = this.options) === null || _d === void 0 ? void 0 : _d.advancedStyle) === null || _e === void 0 ? void 0 : _e.params) === null || _f === void 0 ? void 0 : _f.y0, (_j = (_h = (_g = this.options) === null || _g === void 0 ? void 0 : _g.advancedStyle) === null || _h === void 0 ? void 0 : _h.params) === null || _j === void 0 ? void 0 : _j.r0, (_m = (_l = (_k = this.options) === null || _k === void 0 ? void 0 : _k.advancedStyle) === null || _l === void 0 ? void 0 : _l.params) === null || _m === void 0 ? void 0 : _m.x1, (_q = (_p = (_o = this.options) === null || _o === void 0 ? void 0 : _o.advancedStyle) === null || _p === void 0 ? void 0 : _p.params) === null || _q === void 0 ? void 0 : _q.y1, (_t = (_s = (_r = this.options) === null || _r === void 0 ? void 0 : _r.advancedStyle) === null || _s === void 0 ? void 0 : _s.params) === null || _t === void 0 ? void 0 : _t.r1);
443
+ (_w = (_v = (_u = this.options) === null || _u === void 0 ? void 0 : _u.advancedStyle) === null || _v === void 0 ? void 0 : _v.colorStops) === null || _w === void 0 ? void 0 : _w.forEach(function (item) {
444
+ gradient.addColorStop(item.offset, item.color);
445
+ });
446
+ return gradient;
447
+ };
448
+ Watermark.prototype.createPattern = function (ctx) {
449
+ var _a, _b, _c, _d, _e, _f;
450
+ return ctx.createPattern((_c = (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.advancedStyle) === null || _b === void 0 ? void 0 : _b.params) === null || _c === void 0 ? void 0 : _c.image, ((_f = (_e = (_d = this.options) === null || _d === void 0 ? void 0 : _d.advancedStyle) === null || _e === void 0 ? void 0 : _e.params) === null || _f === void 0 ? void 0 : _f.repetition) || '');
451
+ };
393
452
  Watermark.prototype.setText = function (ctx, params) {
394
453
  var methodName = 'fillText';
395
454
  if (this.options.textType === 'stroke') {
package/dist/watermark.umd.js CHANGED
@@ -161,9 +161,10 @@
161
161
  zIndex: 10000,
162
162
  backgroundPosition: '0 0, 0 0',
163
163
  backgroundRepeat: 'repeat',
164
- fontSize: 20,
164
+ fontSize: '20px',
165
165
  fontFamily: 'sans-serif',
166
166
  fontStyle: '',
167
+ fontVariant: '',
167
168
  fontColor: '#000',
168
169
  fontWeight: 'normal',
169
170
  filter: 'none',
@@ -195,6 +196,14 @@
195
196
  (_a = canvas.getContext('2d')) === null || _a === void 0 ? void 0 : _a.setTransform(ratio, 0, 0, ratio, 0, 0);
196
197
  return canvas;
197
198
  };
199
+ Watermark.prototype.changeOptions = function (props) {
200
+ var _this = this;
201
+ if (props === void 0) { props = {}; }
202
+ Object.keys(props).forEach(function (key) {
203
+ var _a;
204
+ ((_a = _this.options) === null || _a === void 0 ? void 0 : _a[key]) && (_this.options[key] = props[key]);
205
+ });
206
+ };
198
207
  Watermark.prototype.changeParentElement = function (parent) {
199
208
  if (typeof parent === 'string') {
200
209
  var parentElement = document.querySelector(parent);
@@ -254,7 +263,7 @@
254
263
  (_g = (_f = this.options).onDestroyed) === null || _g === void 0 ? void 0 : _g.call(_f);
255
264
  };
256
265
  Watermark.prototype.initializeOptions = function () {
257
- var _a, _b, _c, _d, _e, _f, _g;
266
+ var _a, _b, _c, _d, _e;
258
267
  if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.rotate) {
259
268
  this.options.rotate = (360 - this.options.rotate % 360) * (Math.PI / 180);
260
269
  }
@@ -312,14 +321,18 @@
312
321
  translateY = this.options.height / 2;
313
322
  break;
314
323
  }
315
- 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)) {
324
+ 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)) {
325
+ this.options.translateX = translateX;
326
+ this.options.translateY = translateY;
327
+ }
328
+ else {
316
329
  textBaseline = 'top';
317
330
  textAlign = 'left';
331
+ this.defaultAdvancedStyleParams.x0 = 0;
332
+ this.defaultAdvancedStyleParams.x1 = this.options.textRowMaxWidth || this.options.width;
318
333
  }
319
- isUndefined((_d = this.props) === null || _d === void 0 ? void 0 : _d.translateX) && (this.options.translateX = translateX);
320
- isUndefined((_e = this.props) === null || _e === void 0 ? void 0 : _e.translateY) && (this.options.translateY = translateY);
321
- isUndefined((_f = this.props) === null || _f === void 0 ? void 0 : _f.textBaseline) && (this.options.textBaseline = textBaseline);
322
- isUndefined((_g = this.props) === null || _g === void 0 ? void 0 : _g.textAlign) && (this.options.textAlign = textAlign);
334
+ isUndefined((_d = this.props) === null || _d === void 0 ? void 0 : _d.textBaseline) && (this.options.textBaseline = textBaseline);
335
+ isUndefined((_e = this.props) === null || _e === void 0 ? void 0 : _e.textAlign) && (this.options.textAlign = textAlign);
323
336
  };
324
337
  Watermark.prototype.validateUnique = function () {
325
338
  var result = true;
@@ -376,12 +389,30 @@
376
389
  });
377
390
  };
378
391
  Watermark.prototype.setStyle = function (ctx) {
392
+ var _a;
379
393
  var propName = 'fillStyle';
380
394
  if (this.options.textType === 'stroke') {
381
395
  propName = 'strokeStyle';
382
396
  }
383
- ctx[propName] && (ctx[propName] = this.options.fontColor);
384
- ctx.font = "".concat(this.options.fontStyle, " ").concat(this.options.fontWeight, " ").concat(this.options.fontSize, "px ").concat(this.options.fontFamily);
397
+ var style = this.options.fontColor;
398
+ if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.advancedStyle) {
399
+ switch (this.options.advancedStyle.type) {
400
+ case 'linear':
401
+ style = this.createLinearGradient(ctx);
402
+ break;
403
+ case 'radial':
404
+ style = this.createRadialGradient(ctx);
405
+ break;
406
+ case 'conic':
407
+ style = this.createConicGradient(ctx);
408
+ break;
409
+ case 'pattern':
410
+ style = this.createPattern(ctx);
411
+ break;
412
+ }
413
+ }
414
+ ctx[propName] && style && (ctx[propName] = style);
415
+ ctx.font = "".concat(this.options.fontStyle, " ").concat(this.options.fontVariant, " ").concat(this.options.fontWeight, " ").concat(this.options.fontSize, " ").concat(this.options.fontFamily);
385
416
  ctx.filter = this.options.filter;
386
417
  this.options.textAlign && (ctx.textAlign = this.options.textAlign);
387
418
  this.options.textBaseline && (ctx.textBaseline = this.options.textBaseline);
@@ -396,6 +427,34 @@
396
427
  this.options.extraDrawFunc(ctx);
397
428
  }
398
429
  };
430
+ Watermark.prototype.createLinearGradient = function (ctx) {
431
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
432
+ var gradient = ctx.createLinearGradient((_c = (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.advancedStyle) === null || _b === void 0 ? void 0 : _b.params) === null || _c === void 0 ? void 0 : _c.x0, (_f = (_e = (_d = this.options) === null || _d === void 0 ? void 0 : _d.advancedStyle) === null || _e === void 0 ? void 0 : _e.params) === null || _f === void 0 ? void 0 : _f.y0, (_j = (_h = (_g = this.options) === null || _g === void 0 ? void 0 : _g.advancedStyle) === null || _h === void 0 ? void 0 : _h.params) === null || _j === void 0 ? void 0 : _j.x1, (_m = (_l = (_k = this.options) === null || _k === void 0 ? void 0 : _k.advancedStyle) === null || _l === void 0 ? void 0 : _l.params) === null || _m === void 0 ? void 0 : _m.y1);
433
+ (_q = (_p = (_o = this.options) === null || _o === void 0 ? void 0 : _o.advancedStyle) === null || _p === void 0 ? void 0 : _p.colorStops) === null || _q === void 0 ? void 0 : _q.forEach(function (item) {
434
+ gradient.addColorStop(item.offset, item.color);
435
+ });
436
+ return gradient;
437
+ };
438
+ Watermark.prototype.createConicGradient = function (ctx) {
439
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
440
+ var gradient = ctx.createConicGradient((_c = (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.advancedStyle) === null || _b === void 0 ? void 0 : _b.params) === null || _c === void 0 ? void 0 : _c.startAngle, (_f = (_e = (_d = this.options) === null || _d === void 0 ? void 0 : _d.advancedStyle) === null || _e === void 0 ? void 0 : _e.params) === null || _f === void 0 ? void 0 : _f.x, (_j = (_h = (_g = this.options) === null || _g === void 0 ? void 0 : _g.advancedStyle) === null || _h === void 0 ? void 0 : _h.params) === null || _j === void 0 ? void 0 : _j.y);
441
+ (_m = (_l = (_k = this.options) === null || _k === void 0 ? void 0 : _k.advancedStyle) === null || _l === void 0 ? void 0 : _l.colorStops) === null || _m === void 0 ? void 0 : _m.forEach(function (item) {
442
+ gradient.addColorStop(item.offset, item.color);
443
+ });
444
+ return gradient;
445
+ };
446
+ Watermark.prototype.createRadialGradient = function (ctx) {
447
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
448
+ var gradient = ctx.createRadialGradient((_c = (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.advancedStyle) === null || _b === void 0 ? void 0 : _b.params) === null || _c === void 0 ? void 0 : _c.x0, (_f = (_e = (_d = this.options) === null || _d === void 0 ? void 0 : _d.advancedStyle) === null || _e === void 0 ? void 0 : _e.params) === null || _f === void 0 ? void 0 : _f.y0, (_j = (_h = (_g = this.options) === null || _g === void 0 ? void 0 : _g.advancedStyle) === null || _h === void 0 ? void 0 : _h.params) === null || _j === void 0 ? void 0 : _j.r0, (_m = (_l = (_k = this.options) === null || _k === void 0 ? void 0 : _k.advancedStyle) === null || _l === void 0 ? void 0 : _l.params) === null || _m === void 0 ? void 0 : _m.x1, (_q = (_p = (_o = this.options) === null || _o === void 0 ? void 0 : _o.advancedStyle) === null || _p === void 0 ? void 0 : _p.params) === null || _q === void 0 ? void 0 : _q.y1, (_t = (_s = (_r = this.options) === null || _r === void 0 ? void 0 : _r.advancedStyle) === null || _s === void 0 ? void 0 : _s.params) === null || _t === void 0 ? void 0 : _t.r1);
449
+ (_w = (_v = (_u = this.options) === null || _u === void 0 ? void 0 : _u.advancedStyle) === null || _v === void 0 ? void 0 : _v.colorStops) === null || _w === void 0 ? void 0 : _w.forEach(function (item) {
450
+ gradient.addColorStop(item.offset, item.color);
451
+ });
452
+ return gradient;
453
+ };
454
+ Watermark.prototype.createPattern = function (ctx) {
455
+ var _a, _b, _c, _d, _e, _f;
456
+ return ctx.createPattern((_c = (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.advancedStyle) === null || _b === void 0 ? void 0 : _b.params) === null || _c === void 0 ? void 0 : _c.image, ((_f = (_e = (_d = this.options) === null || _d === void 0 ? void 0 : _d.advancedStyle) === null || _e === void 0 ? void 0 : _e.params) === null || _f === void 0 ? void 0 : _f.repetition) || '');
457
+ };
399
458
  Watermark.prototype.setText = function (ctx, params) {
400
459
  var methodName = 'fillText';
401
460
  if (this.options.textType === 'stroke') {
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,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,s){function r(t){try{h(n.next(t))}catch(t){s(t)}}function a(t){try{h(n.throw(t))}catch(t){s(t)}}function h(t){var e;t.done?i(t.value):(e=t.value,e instanceof o?e:new o((function(t){t(e)}))).then(r,a)}h((n=n.apply(t,e||[])).next())}))}function n(t,e){var o,n,i,s,r={label:0,sent:function(){if(1&i[0])throw i[1];return i[1]},trys:[],ops:[]};return s={next:a(0),throw:a(1),return:a(2)},"function"==typeof Symbol&&(s[Symbol.iterator]=function(){return this}),s;function a(s){return function(a){return function(s){if(o)throw new TypeError("Generator is already executing.");for(;r;)try{if(o=1,n&&(i=2&s[0]?n.return:s[0]?n.throw||((i=n.return)&&i.call(n),0):n.next)&&!(i=i.call(n,s[1])).done)return i;switch(n=0,i&&(s=[2&s[0],i.value]),s[0]){case 0:case 1:i=s;break;case 4:return r.label++,{value:s[1],done:!1};case 5:r.label++,n=s[1],s=[0];continue;case 7:s=r.ops.pop(),r.trys.pop();continue;default:if(!(i=r.trys,(i=i.length>0&&i[i.length-1])||6!==s[0]&&2!==s[0])){r=0;continue}if(3===s[0]&&(!i||s[1]>i[0]&&s[1]<i[3])){r.label=s[1];break}if(6===s[0]&&r.label<i[1]){r.label=i[1],i=s;break}if(i&&r.label<i[2]){r.label=i[2],r.ops.push(s);break}i[2]&&r.ops.pop(),r.trys.pop();continue}s=e.call(t,r)}catch(t){s=[6,t],n=0}finally{o=i=0}if(5&s[0])throw s[1];return{value:s[0]?s[1]:void 0,done:!0}}([s,a])}}}var i=function(t){return t.toDataURL("image/png",1)},s=function(t){return"function"==typeof t},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},h=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",textType:"fill",imageWidth:0,imageHeight:0,lineHeight:30,zIndex:1e4,backgroundPosition:"0 0, 0 0",backgroundRepeat:"repeat",fontSize:20,fontFamily:"sans-serif",fontStyle:"",fontColor:"#000",fontWeight:"normal",filter:"none",globalAlpha:.5,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,s,r,a;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(),s=i(o),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(s,");\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,o,n,i,s,r;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===(r=(s=this.options).onDestroyed)||void 0===r||r.call(s)},t.prototype.initializeOptions=function(){var t,e,o,n,i,s,a,h,c;(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":h=this.options.width/2,c=0,l="top";break;case"top-start":h=0,c=0,l="top",p="start";break;case"top-end":h=this.options.width,c=0,l="top",p="end";break;case"bottom":h=this.options.width/2,c=this.options.height,l="bottom";break;case"bottom-start":h=0,c=this.options.height,l="bottom",p="start";break;case"bottom-end":h=this.options.width,c=this.options.height,l="bottom",p="end";break;case"left":h=0,c=this.options.height/2,p="start";break;case"right":h=this.options.width,c=this.options.height/2,p="end";break;case"middle":h=this.options.width/2,c=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=h),r(null===(i=this.props)||void 0===i?void 0:i.translateY)&&(this.options.translateY=c),r(null===(s=this.props)||void 0===s?void 0:s.textBaseline)&&(this.options.textBaseline=l),r(null===(a=this.props)||void 0===a?void 0:a.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 this.setStyle(o),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.setStyle=function(t){var e="fillStyle";"stroke"===this.options.textType&&(e="strokeStyle"),t[e]&&(t[e]=this.options.fontColor),t.font="".concat(this.options.fontStyle," ").concat(this.options.fontWeight," ").concat(this.options.fontSize,"px ").concat(this.options.fontFamily),t.filter=this.options.filter,this.options.textAlign&&(t.textAlign=this.options.textAlign),this.options.textBaseline&&(t.textBaseline=this.options.textBaseline),t.globalAlpha=this.options.globalAlpha,this.options.shadowStyle&&(t.shadowBlur=this.options.shadowStyle.shadowBlur||0,t.shadowColor=this.options.shadowStyle.shadowColor||"#00000000",t.shadowOffsetX=this.options.shadowStyle.shadowOffsetX||0,t.shadowOffsetY=this.options.shadowStyle.shadowOffsetY||0),s(this.options.extraDrawFunc)&&this.options.extraDrawFunc(t)},t.prototype.setText=function(t,e){var o="fillText";"stroke"===this.options.textType&&(o="strokeText"),t[o]&&t[o](e.text,e.x,e.y,e.maxWidth)},t.prototype.drawText=function(t,e){this.setText(t,{text:this.options.content,x:0,y:0,maxWidth:this.options.textRowMaxWidth}),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),s=i.width,r=i.height,a=o.getDrawImagePosition(s,r);t.drawImage(n,a.x,a.y,s,r),e(t.canvas)}},t.prototype.drawMultiLineText=function(t,e){var o,n=this,i=this.options.textRowMaxWidth||this.options.width,s=function(t,e,o){for(var n=[],i="",s=0,r=e.length;s<r;s++)i+=e.charAt(s),t.measureText(i).width>o&&(n.push(i.substring(0,i.length-1)),i="",s--);return n.push(i),n}(t,this.options.content,i);switch(this.options.textBaseline){case"middle":o=(s.length-1)*this.options.lineHeight/2;break;case"bottom":case"alphabetic":case"ideographic":o=(s.length-1)*this.options.lineHeight;break;case"top":case"hanging":o=0}s.forEach((function(e,i){n.setText(t,{text:e,x:0,y:n.options.lineHeight*i-o})})),e(t.canvas)},t.prototype.drawRichText=function(t,e){var o,n,i=this,s=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"),s=i.offsetHeight,r=i.offsetWidth;document.body.removeChild(n);var h=e.richTextWidth||r||e.width,c=e.richTextHeight||s||e.height,l=a("foreignObject",{width:h.toString(),height:c.toString()});return l.appendChild(n),o.appendChild(l),{element:o,width:h,height:c}}(t,this.options),r=new Image;r.width=s.width,r.height=s.height,r.src=(o=s.element,n=o.outerHTML.replace(/\n/g,"").replace(/\t/g,"").replace(/#/g,"%23"),"data:image/svg+xml;charset=utf-8,".concat(n)),r.onload=function(){var o=i.getDrawImagePosition(r.width,r.height);t.drawImage(r,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=h.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 l=i(a);e.onSuccess&&s(e.onSuccess)&&(null===(t=e.onSuccess)||void 0===t||t.call(e,l))}}},o}(h);t.BlindWatermark=c,t.Watermark=h}));
1
+ !function(t,o){"object"==typeof exports&&"undefined"!=typeof module?o(exports):"function"==typeof define&&define.amd?define(["exports"],o):o((t="undefined"!=typeof globalThis?globalThis:t||self).watermark={})}(this,(function(t){"use strict";var o=function(t,e){return o=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,o){t.__proto__=o}||function(t,o){for(var e in o)Object.prototype.hasOwnProperty.call(o,e)&&(t[e]=o[e])},o(t,e)};function e(t,o,e,i){return new(e||(e=Promise))((function(n,a){function s(t){try{l(i.next(t))}catch(t){a(t)}}function r(t){try{l(i.throw(t))}catch(t){a(t)}}function l(t){var o;t.done?n(t.value):(o=t.value,o instanceof e?o:new e((function(t){t(o)}))).then(s,r)}l((i=i.apply(t,o||[])).next())}))}function i(t,o){var e,i,n,a,s={label:0,sent:function(){if(1&n[0])throw n[1];return n[1]},trys:[],ops:[]};return a={next:r(0),throw:r(1),return:r(2)},"function"==typeof Symbol&&(a[Symbol.iterator]=function(){return this}),a;function r(a){return function(r){return function(a){if(e)throw new TypeError("Generator is already executing.");for(;s;)try{if(e=1,i&&(n=2&a[0]?i.return:a[0]?i.throw||((n=i.return)&&n.call(i),0):i.next)&&!(n=n.call(i,a[1])).done)return n;switch(i=0,n&&(a=[2&a[0],n.value]),a[0]){case 0:case 1:n=a;break;case 4:return s.label++,{value:a[1],done:!1};case 5:s.label++,i=a[1],a=[0];continue;case 7:a=s.ops.pop(),s.trys.pop();continue;default:if(!(n=s.trys,(n=n.length>0&&n[n.length-1])||6!==a[0]&&2!==a[0])){s=0;continue}if(3===a[0]&&(!n||a[1]>n[0]&&a[1]<n[3])){s.label=a[1];break}if(6===a[0]&&s.label<n[1]){s.label=n[1],n=a;break}if(n&&s.label<n[2]){s.label=n[2],s.ops.push(a);break}n[2]&&s.ops.pop(),s.trys.pop();continue}a=o.call(t,s)}catch(t){a=[6,t],i=0}finally{e=n=0}if(5&a[0])throw a[1];return{value:a[0]?a[1]:void 0,done:!0}}([a,r])}}}var n=function(t){return t.toDataURL("image/png",1)},a=function(t){return"function"==typeof t},s=function(t){return void 0===t},r=function(t,o,e){void 0===o&&(o={}),void 0===e&&(e="http://www.w3.org/2000/svg");var i=document.createElementNS(e,t);for(var n in o)i.setAttribute(n,o[n]);return i},l=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",textType:"fill",imageWidth:0,imageHeight:0,lineHeight:30,zIndex:1e4,backgroundPosition:"0 0, 0 0",backgroundRepeat:"repeat",fontSize:"20px",fontFamily:"sans-serif",fontStyle:"",fontVariant:"",fontColor:"#000",fontWeight:"normal",filter:"none",globalAlpha:.5,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,o){var e,i=window.devicePixelRatio||1,n=document.createElement("canvas");return n.width=t*i,n.height=o*i,n.style.width="".concat(t,"px"),n.style.height="".concat(o,"px"),null===(e=n.getContext("2d"))||void 0===e||e.setTransform(i,0,0,i,0,0),n},t.prototype.changeOptions=function(t){var o=this;void 0===t&&(t={}),Object.keys(t).forEach((function(e){var i;(null===(i=o.options)||void 0===i?void 0:i[e])&&(o.options[e]=t[e])}))},t.prototype.changeParentElement=function(t){if("string"==typeof t){var o=document.querySelector(t);o&&(this.parentElement=o)}else this.parentElement=t},t.prototype.create=function(){var t,o;return e(this,void 0,void 0,(function(){var e,a,s,r;return i(this,(function(i){switch(i.label){case 0:return this.validateUnique()&&this.validateContent()?[4,this.draw()]:[2];case 1:return e=i.sent(),a=n(e),this.watermarkDom=document.createElement("div"),s=document.createElement("div"),this.watermarkDom.__WATERMARK__="watermark",this.watermarkDom.__WATERMARK__INSTANCE__=this,r=this.checkParentElementType(),this.watermarkDom.style.cssText="\n z-index: ".concat(this.options.zIndex,";\n ").concat("custom"===r?"top: 0;bottom: 0;left: 0;right: 0;height: 100%;pointer-events: none;position: absolute":"position: relative","\n "),s.style.cssText="\n position: ".concat("root"===r?"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(a,");\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(s),this.parentElement.appendChild(this.watermarkDom),this.options.mutationObserve&&this.bindMutationObserve(),null===(o=(t=this.options).onSuccess)||void 0===o||o.call(t),[2]}}))}))},t.prototype.destroy=function(){var t,o,e,i,n,a,s;null===(o=(t=this.options).onBeforeDestroy)||void 0===o||o.call(t),null===(e=this.observer)||void 0===e||e.disconnect(),null===(i=this.parentObserve)||void 0===i||i.disconnect(),null===(n=this.watermarkDom)||void 0===n||n.remove(),null===(s=(a=this.options).onDestroyed)||void 0===s||s.call(a)},t.prototype.initializeOptions=function(){var t,o,e,i,n,a,r;(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",d="center";switch(this.options.translatePlacement){case"top":a=this.options.width/2,r=0,l="top";break;case"top-start":a=0,r=0,l="top",d="start";break;case"top-end":a=this.options.width,r=0,l="top",d="end";break;case"bottom":a=this.options.width/2,r=this.options.height,l="bottom";break;case"bottom-start":a=0,r=this.options.height,l="bottom",d="start";break;case"bottom-end":a=this.options.width,r=this.options.height,l="bottom",d="end";break;case"left":a=0,r=this.options.height/2,d="start";break;case"right":a=this.options.width,r=this.options.height/2,d="end";break;case"middle":a=this.options.width/2,r=this.options.height/2}s(null===(o=this.props)||void 0===o?void 0:o.translateX)||s(null===(e=this.props)||void 0===e?void 0:e.translateY)?(this.options.translateX=a,this.options.translateY=r):(l="top",d="left",this.defaultAdvancedStyleParams.x0=0,this.defaultAdvancedStyleParams.x1=this.options.textRowMaxWidth||this.options.width),s(null===(i=this.props)||void 0===i?void 0:i.textBaseline)&&(this.options.textBaseline=l),s(null===(n=this.props)||void 0===n?void 0:n.textAlign)&&(this.options.textAlign=d)},t.prototype.validateUnique=function(){var t=!0;return this.options.unique&&this.parentElement.childNodes.forEach((function(o){t&&Object.hasOwnProperty.call(o,"__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 o=this,e=t.createCanvas(this.options.width,this.options.height).getContext("2d");if(null===e)throw new Error("get context error");return this.setStyle(e),e.translate(this.options.translateX,this.options.translateY),e.rotate(this.options.rotate),new Promise((function(t){switch(o.options.contentType){case"text":o.drawText(e,t);break;case"image":o.drawImage(e,t);break;case"multi-line-text":o.drawMultiLineText(e,t);break;case"rich-text":o.drawRichText(e,t)}}))},t.prototype.setStyle=function(t){var o,e="fillStyle";"stroke"===this.options.textType&&(e="strokeStyle");var i=this.options.fontColor;if(null===(o=this.options)||void 0===o?void 0:o.advancedStyle)switch(this.options.advancedStyle.type){case"linear":i=this.createLinearGradient(t);break;case"radial":i=this.createRadialGradient(t);break;case"conic":i=this.createConicGradient(t);break;case"pattern":i=this.createPattern(t)}t[e]&&i&&(t[e]=i),t.font="".concat(this.options.fontStyle," ").concat(this.options.fontVariant," ").concat(this.options.fontWeight," ").concat(this.options.fontSize," ").concat(this.options.fontFamily),t.filter=this.options.filter,this.options.textAlign&&(t.textAlign=this.options.textAlign),this.options.textBaseline&&(t.textBaseline=this.options.textBaseline),t.globalAlpha=this.options.globalAlpha,this.options.shadowStyle&&(t.shadowBlur=this.options.shadowStyle.shadowBlur||0,t.shadowColor=this.options.shadowStyle.shadowColor||"#00000000",t.shadowOffsetX=this.options.shadowStyle.shadowOffsetX||0,t.shadowOffsetY=this.options.shadowStyle.shadowOffsetY||0),a(this.options.extraDrawFunc)&&this.options.extraDrawFunc(t)},t.prototype.createLinearGradient=function(t){var o,e,i,n,a,s,r,l,d,c,h,p,u,v,f,m=t.createLinearGradient(null===(i=null===(e=null===(o=this.options)||void 0===o?void 0:o.advancedStyle)||void 0===e?void 0:e.params)||void 0===i?void 0:i.x0,null===(s=null===(a=null===(n=this.options)||void 0===n?void 0:n.advancedStyle)||void 0===a?void 0:a.params)||void 0===s?void 0:s.y0,null===(d=null===(l=null===(r=this.options)||void 0===r?void 0:r.advancedStyle)||void 0===l?void 0:l.params)||void 0===d?void 0:d.x1,null===(p=null===(h=null===(c=this.options)||void 0===c?void 0:c.advancedStyle)||void 0===h?void 0:h.params)||void 0===p?void 0:p.y1);return null===(f=null===(v=null===(u=this.options)||void 0===u?void 0:u.advancedStyle)||void 0===v?void 0:v.colorStops)||void 0===f||f.forEach((function(t){m.addColorStop(t.offset,t.color)})),m},t.prototype.createConicGradient=function(t){var o,e,i,n,a,s,r,l,d,c,h,p,u=t.createConicGradient(null===(i=null===(e=null===(o=this.options)||void 0===o?void 0:o.advancedStyle)||void 0===e?void 0:e.params)||void 0===i?void 0:i.startAngle,null===(s=null===(a=null===(n=this.options)||void 0===n?void 0:n.advancedStyle)||void 0===a?void 0:a.params)||void 0===s?void 0:s.x,null===(d=null===(l=null===(r=this.options)||void 0===r?void 0:r.advancedStyle)||void 0===l?void 0:l.params)||void 0===d?void 0:d.y);return null===(p=null===(h=null===(c=this.options)||void 0===c?void 0:c.advancedStyle)||void 0===h?void 0:h.colorStops)||void 0===p||p.forEach((function(t){u.addColorStop(t.offset,t.color)})),u},t.prototype.createRadialGradient=function(t){var o,e,i,n,a,s,r,l,d,c,h,p,u,v,f,m,g,y,w,b,x,k=t.createRadialGradient(null===(i=null===(e=null===(o=this.options)||void 0===o?void 0:o.advancedStyle)||void 0===e?void 0:e.params)||void 0===i?void 0:i.x0,null===(s=null===(a=null===(n=this.options)||void 0===n?void 0:n.advancedStyle)||void 0===a?void 0:a.params)||void 0===s?void 0:s.y0,null===(d=null===(l=null===(r=this.options)||void 0===r?void 0:r.advancedStyle)||void 0===l?void 0:l.params)||void 0===d?void 0:d.r0,null===(p=null===(h=null===(c=this.options)||void 0===c?void 0:c.advancedStyle)||void 0===h?void 0:h.params)||void 0===p?void 0:p.x1,null===(f=null===(v=null===(u=this.options)||void 0===u?void 0:u.advancedStyle)||void 0===v?void 0:v.params)||void 0===f?void 0:f.y1,null===(y=null===(g=null===(m=this.options)||void 0===m?void 0:m.advancedStyle)||void 0===g?void 0:g.params)||void 0===y?void 0:y.r1);return null===(x=null===(b=null===(w=this.options)||void 0===w?void 0:w.advancedStyle)||void 0===b?void 0:b.colorStops)||void 0===x||x.forEach((function(t){k.addColorStop(t.offset,t.color)})),k},t.prototype.createPattern=function(t){var o,e,i,n,a,s;return t.createPattern(null===(i=null===(e=null===(o=this.options)||void 0===o?void 0:o.advancedStyle)||void 0===e?void 0:e.params)||void 0===i?void 0:i.image,(null===(s=null===(a=null===(n=this.options)||void 0===n?void 0:n.advancedStyle)||void 0===a?void 0:a.params)||void 0===s?void 0:s.repetition)||"")},t.prototype.setText=function(t,o){var e="fillText";"stroke"===this.options.textType&&(e="strokeText"),t[e]&&t[e](o.text,o.x,o.y,o.maxWidth)},t.prototype.drawText=function(t,o){this.setText(t,{text:this.options.content,x:0,y:0,maxWidth:this.options.textRowMaxWidth}),o(t.canvas)},t.prototype.drawImage=function(t,o){var e=this,i=new Image;i.setAttribute("crossOrigin","Anonymous"),i.src=this.options.image,i.onload=function(){var n=e.getImageRect(i),a=n.width,s=n.height,r=e.getDrawImagePosition(a,s);t.drawImage(i,r.x,r.y,a,s),o(t.canvas)}},t.prototype.drawMultiLineText=function(t,o){var e,i=this,n=this.options.textRowMaxWidth||this.options.width,a=function(t,o,e){for(var i=[],n="",a=0,s=o.length;a<s;a++)n+=o.charAt(a),t.measureText(n).width>e&&(i.push(n.substring(0,n.length-1)),n="",a--);return i.push(n),i}(t,this.options.content,n);switch(this.options.textBaseline){case"middle":e=(a.length-1)*this.options.lineHeight/2;break;case"bottom":case"alphabetic":case"ideographic":e=(a.length-1)*this.options.lineHeight;break;case"top":case"hanging":e=0}a.forEach((function(o,n){i.setText(t,{text:o,x:0,y:i.options.lineHeight*n-e})})),o(t.canvas)},t.prototype.drawRichText=function(t,o){var e,i,n=this,a=function(t,o){var e=r("svg",{xmlns:"http://www.w3.org/2000/svg"}),i=document.createElement("div");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(o.fontColor,";\n"),i.innerHTML='<div class="rich-text-content">'.concat(o.content,"</div>"),document.body.appendChild(i);var n=i.querySelector(".rich-text-content"),a=n.offsetHeight,s=n.offsetWidth;document.body.removeChild(i);var l=o.richTextWidth||s||o.width,d=o.richTextHeight||a||o.height,c=r("foreignObject",{width:l.toString(),height:d.toString()});return c.appendChild(i),e.appendChild(c),{element:e,width:l,height:d}}(t,this.options),s=new Image;s.width=a.width,s.height=a.height,s.src=(e=a.element,i=e.outerHTML.replace(/\n/g,"").replace(/\t/g,"").replace(/#/g,"%23"),"data:image/svg+xml;charset=utf-8,".concat(i)),s.onload=function(){var e=n.getDrawImagePosition(s.width,s.height);t.drawImage(s,e.x,e.y,t.canvas.width,t.canvas.height),o(t.canvas)}},t.prototype.getImageRect=function(t){var o={width:this.options.imageWidth,height:this.options.imageHeight};switch(!0){case 0!==o.width&&0===o.height:o.height=o.width*t.height/t.width;break;case 0===o.width&&0!==o.height:o.width=o.height*t.width/t.height;break;case 0===o.width&&0===o.height:o.width=t.width,o.height=t.height}return o},t.prototype.getDrawImagePosition=function(t,o){var e,i,n={x:-t/2,y:-o/2};switch(this.options.translatePlacement){case"top":n.x=-t/2,n.y=0;break;case"top-start":n.x=0,n.y=0;break;case"top-end":n.x=-t,n.y=0;break;case"bottom":n.x=-t/2,n.y=-o;break;case"bottom-start":n.x=0,n.y=-o;break;case"bottom-end":n.x=-t,n.y=-o;break;case"left":n.x=0,n.y=-o/2;break;case"right":n.x=-t,n.y=-o/2}return!s(null===(e=this.props)||void 0===e?void 0:e.translateX)&&(n.x=0),!s(null===(i=this.props)||void 0===i?void 0:i.translateY)&&(n.y=0),n},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(o){o.length>0&&(t.destroy(),t.create())})),this.observer.observe(this.watermarkDom,{attributes:!0,childList:!0,subtree:!0,characterData:!0}),this.parentObserve=new MutationObserver((function(o){o.forEach((function(o){var e;(null==o?void 0:o.target)!==t.watermarkDom&&(null===(e=null==o?void 0:o.removedNodes)||void 0===e?void 0:e[0])!==t.watermarkDom||(t.destroy(),t.create())}))})),this.parentObserve.observe(this.parentElement,{attributes:!0,childList:!0,subtree:!0,characterData:!0}))},t}(),d=function(t){function e(o){return void 0===o&&(o={}),o.globalAlpha=.005,o.mode="blind",t.call(this,o)||this}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Class extends value "+String(e)+" is not a constructor or null");function i(){this.constructor=t}o(t,e),t.prototype=null===e?Object.create(e):(i.prototype=e.prototype,new i)}(e,t),e.decode=function(t){var o=Object.assign({url:"",fillColor:"#000",compositeOperation:"color-burn",mode:"canvas"},t);if(o.url&&"canvas"===o.mode){var e=new Image;e.src=o.url,e.onload=function(){var t,i=e.width,s=e.height,r=l.createCanvas(i,s),d=r.getContext("2d");if(null===d)throw new Error("get context error");d.drawImage(e,0,0,i,s),d.globalCompositeOperation=o.compositeOperation,d.fillStyle=o.fillColor,d.fillRect(0,0,i,s);var c=n(r);o.onSuccess&&a(o.onSuccess)&&(null===(t=o.onSuccess)||void 0===t||t.call(o,c))}}},e}(l);t.BlindWatermark=d,t.Watermark=l}));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "watermark-js-plus",
3
- "version": "0.6.0",
3
+ "version": "0.7.0",
4
4
  "description": "watermark for the browser",
5
5
  "scripts": {
6
6
  "test": "echo \"Error: no test specified\" && exit 1",
@@ -48,37 +48,37 @@
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.4.0",
52
- "@commitlint/config-conventional": "^17.4.0",
51
+ "@commitlint/cli": "^17.4.2",
52
+ "@commitlint/config-conventional": "^17.4.2",
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
- "@rollup/plugin-eslint": "^9.0.1",
56
+ "@rollup/plugin-eslint": "^9.0.2",
57
57
  "@rollup/plugin-node-resolve": "^15.0.1",
58
58
  "@rollup/plugin-replace": "^5.0.2",
59
59
  "@rollup/plugin-terser": "0.3.0",
60
60
  "@rollup/plugin-typescript": "^11.0.0",
61
61
  "@types/markdown-it": "^12.2.3",
62
- "@typescript-eslint/parser": "^5.48.0",
62
+ "@typescript-eslint/parser": "^5.48.1",
63
63
  "@vue/theme": "^1.3.0",
64
64
  "concurrently": "^7.6.0",
65
65
  "conventional-changelog-angular": "^5.0.13",
66
66
  "conventional-changelog-cli": "^2.2.2",
67
67
  "core-js": "^3.27.1",
68
68
  "element-plus": "^2.2.28",
69
- "eslint": "^8.31.0",
69
+ "eslint": "^8.32.0",
70
70
  "eslint-config-airbnb-base": "^15.0.0",
71
71
  "eslint-config-semistandard": "^17.0.0",
72
- "eslint-plugin-import": "^2.26.0",
72
+ "eslint-plugin-import": "^2.27.4",
73
73
  "husky": "^8.0.3",
74
74
  "lint-staged": "^13.1.0",
75
75
  "markdown-it": "^13.0.1",
76
- "rollup": "^3.9.1",
76
+ "rollup": "^3.10.0",
77
77
  "rollup-plugin-filesize": "^9.1.2",
78
- "rollup-plugin-your-function": "^0.4.7",
78
+ "rollup-plugin-your-function": "^0.4.9",
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.35"
82
+ "vitepress": "^1.0.0-alpha.36"
83
83
  }
84
84
  }