watermark-js-plus 0.5.1 → 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 +6 -1
  2. package/dist/types/index.d.ts +30 -3
  3. package/dist/utils/index.d.ts +1 -0
  4. package/dist/watermark.esm.js +86 -15
  5. package/dist/watermark.umd.js +86 -15
  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.
@@ -33,7 +34,11 @@ export default class Watermark {
33
34
  private validateUnique;
34
35
  private validateContent;
35
36
  private draw;
36
- private setTextStyle;
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,13 +29,19 @@ 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
+ fontStyle: string;
35
+ fontVariant: string;
36
+ fontColor: string;
37
+ fontWeight: string;
34
38
  textAlign?: TextAlignType;
35
39
  textBaseline?: TextBaselineType;
36
- fontColor: string;
40
+ filter: string;
41
+ shadowStyle?: Partial<CanvasShadowStyles>;
37
42
  globalAlpha: number;
38
- fontWeight: string;
43
+ advancedStyle?: AdvancedStyleType;
44
+ extraDrawFunc?: Function;
39
45
  mode: CreateWatermarkModeType;
40
46
  mutationObserve: boolean;
41
47
  unique: boolean;
@@ -56,3 +62,24 @@ export interface CustomContentSVGType {
56
62
  width: number;
57
63
  height: number;
58
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,11 +155,14 @@ 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
+ fontStyle: '',
161
+ fontVariant: '',
160
162
  fontColor: '#000',
161
- globalAlpha: 0.5,
162
163
  fontWeight: 'normal',
164
+ filter: 'none',
165
+ globalAlpha: 0.5,
163
166
  mode: 'default',
164
167
  mutationObserve: true,
165
168
  unique: true,
@@ -187,6 +190,14 @@ var Watermark = /** @class */ (function () {
187
190
  (_a = canvas.getContext('2d')) === null || _a === void 0 ? void 0 : _a.setTransform(ratio, 0, 0, ratio, 0, 0);
188
191
  return canvas;
189
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
+ };
190
201
  Watermark.prototype.changeParentElement = function (parent) {
191
202
  if (typeof parent === 'string') {
192
203
  var parentElement = document.querySelector(parent);
@@ -246,7 +257,7 @@ var Watermark = /** @class */ (function () {
246
257
  (_g = (_f = this.options).onDestroyed) === null || _g === void 0 ? void 0 : _g.call(_f);
247
258
  };
248
259
  Watermark.prototype.initializeOptions = function () {
249
- var _a, _b, _c, _d, _e, _f, _g;
260
+ var _a, _b, _c, _d, _e;
250
261
  if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.rotate) {
251
262
  this.options.rotate = (360 - this.options.rotate % 360) * (Math.PI / 180);
252
263
  }
@@ -304,14 +315,18 @@ var Watermark = /** @class */ (function () {
304
315
  translateY = this.options.height / 2;
305
316
  break;
306
317
  }
307
- 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 {
308
323
  textBaseline = 'top';
309
324
  textAlign = 'left';
325
+ this.defaultAdvancedStyleParams.x0 = 0;
326
+ this.defaultAdvancedStyleParams.x1 = this.options.textRowMaxWidth || this.options.width;
310
327
  }
311
- isUndefined((_d = this.props) === null || _d === void 0 ? void 0 : _d.translateX) && (this.options.translateX = translateX);
312
- isUndefined((_e = this.props) === null || _e === void 0 ? void 0 : _e.translateY) && (this.options.translateY = translateY);
313
- isUndefined((_f = this.props) === null || _f === void 0 ? void 0 : _f.textBaseline) && (this.options.textBaseline = textBaseline);
314
- 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);
315
330
  };
316
331
  Watermark.prototype.validateUnique = function () {
317
332
  var result = true;
@@ -347,11 +362,7 @@ var Watermark = /** @class */ (function () {
347
362
  if (ctx === null) {
348
363
  throw new Error('get context error');
349
364
  }
350
- ctx.font = "".concat(this.options.fontWeight, " ").concat(this.options.fontSize, "px ").concat(this.options.fontFamily);
351
- this.options.textAlign && (ctx.textAlign = this.options.textAlign);
352
- this.options.textBaseline && (ctx.textBaseline = this.options.textBaseline);
353
- this.setTextStyle(ctx);
354
- ctx.globalAlpha = this.options.globalAlpha;
365
+ this.setStyle(ctx);
355
366
  ctx.translate(this.options.translateX, this.options.translateY);
356
367
  ctx.rotate(this.options.rotate);
357
368
  return new Promise(function (resolve) {
@@ -371,12 +382,72 @@ var Watermark = /** @class */ (function () {
371
382
  }
372
383
  });
373
384
  };
374
- Watermark.prototype.setTextStyle = function (ctx) {
385
+ Watermark.prototype.setStyle = function (ctx) {
386
+ var _a;
375
387
  var propName = 'fillStyle';
376
388
  if (this.options.textType === 'stroke') {
377
389
  propName = 'strokeStyle';
378
390
  }
379
- ctx[propName] && (ctx[propName] = this.options.fontColor);
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);
410
+ ctx.filter = this.options.filter;
411
+ this.options.textAlign && (ctx.textAlign = this.options.textAlign);
412
+ this.options.textBaseline && (ctx.textBaseline = this.options.textBaseline);
413
+ ctx.globalAlpha = this.options.globalAlpha;
414
+ if (this.options.shadowStyle) {
415
+ ctx.shadowBlur = this.options.shadowStyle.shadowBlur || 0;
416
+ ctx.shadowColor = this.options.shadowStyle.shadowColor || '#00000000';
417
+ ctx.shadowOffsetX = this.options.shadowStyle.shadowOffsetX || 0;
418
+ ctx.shadowOffsetY = this.options.shadowStyle.shadowOffsetY || 0;
419
+ }
420
+ if (isFunction(this.options.extraDrawFunc)) {
421
+ this.options.extraDrawFunc(ctx);
422
+ }
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) || '');
380
451
  };
381
452
  Watermark.prototype.setText = function (ctx, params) {
382
453
  var methodName = 'fillText';
package/dist/watermark.umd.js CHANGED
@@ -161,11 +161,14 @@
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
+ fontStyle: '',
167
+ fontVariant: '',
166
168
  fontColor: '#000',
167
- globalAlpha: 0.5,
168
169
  fontWeight: 'normal',
170
+ filter: 'none',
171
+ globalAlpha: 0.5,
169
172
  mode: 'default',
170
173
  mutationObserve: true,
171
174
  unique: true,
@@ -193,6 +196,14 @@
193
196
  (_a = canvas.getContext('2d')) === null || _a === void 0 ? void 0 : _a.setTransform(ratio, 0, 0, ratio, 0, 0);
194
197
  return canvas;
195
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
+ };
196
207
  Watermark.prototype.changeParentElement = function (parent) {
197
208
  if (typeof parent === 'string') {
198
209
  var parentElement = document.querySelector(parent);
@@ -252,7 +263,7 @@
252
263
  (_g = (_f = this.options).onDestroyed) === null || _g === void 0 ? void 0 : _g.call(_f);
253
264
  };
254
265
  Watermark.prototype.initializeOptions = function () {
255
- var _a, _b, _c, _d, _e, _f, _g;
266
+ var _a, _b, _c, _d, _e;
256
267
  if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.rotate) {
257
268
  this.options.rotate = (360 - this.options.rotate % 360) * (Math.PI / 180);
258
269
  }
@@ -310,14 +321,18 @@
310
321
  translateY = this.options.height / 2;
311
322
  break;
312
323
  }
313
- 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 {
314
329
  textBaseline = 'top';
315
330
  textAlign = 'left';
331
+ this.defaultAdvancedStyleParams.x0 = 0;
332
+ this.defaultAdvancedStyleParams.x1 = this.options.textRowMaxWidth || this.options.width;
316
333
  }
317
- isUndefined((_d = this.props) === null || _d === void 0 ? void 0 : _d.translateX) && (this.options.translateX = translateX);
318
- isUndefined((_e = this.props) === null || _e === void 0 ? void 0 : _e.translateY) && (this.options.translateY = translateY);
319
- isUndefined((_f = this.props) === null || _f === void 0 ? void 0 : _f.textBaseline) && (this.options.textBaseline = textBaseline);
320
- 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);
321
336
  };
322
337
  Watermark.prototype.validateUnique = function () {
323
338
  var result = true;
@@ -353,11 +368,7 @@
353
368
  if (ctx === null) {
354
369
  throw new Error('get context error');
355
370
  }
356
- ctx.font = "".concat(this.options.fontWeight, " ").concat(this.options.fontSize, "px ").concat(this.options.fontFamily);
357
- this.options.textAlign && (ctx.textAlign = this.options.textAlign);
358
- this.options.textBaseline && (ctx.textBaseline = this.options.textBaseline);
359
- this.setTextStyle(ctx);
360
- ctx.globalAlpha = this.options.globalAlpha;
371
+ this.setStyle(ctx);
361
372
  ctx.translate(this.options.translateX, this.options.translateY);
362
373
  ctx.rotate(this.options.rotate);
363
374
  return new Promise(function (resolve) {
@@ -377,12 +388,72 @@
377
388
  }
378
389
  });
379
390
  };
380
- Watermark.prototype.setTextStyle = function (ctx) {
391
+ Watermark.prototype.setStyle = function (ctx) {
392
+ var _a;
381
393
  var propName = 'fillStyle';
382
394
  if (this.options.textType === 'stroke') {
383
395
  propName = 'strokeStyle';
384
396
  }
385
- ctx[propName] && (ctx[propName] = this.options.fontColor);
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);
416
+ ctx.filter = this.options.filter;
417
+ this.options.textAlign && (ctx.textAlign = this.options.textAlign);
418
+ this.options.textBaseline && (ctx.textBaseline = this.options.textBaseline);
419
+ ctx.globalAlpha = this.options.globalAlpha;
420
+ if (this.options.shadowStyle) {
421
+ ctx.shadowBlur = this.options.shadowStyle.shadowBlur || 0;
422
+ ctx.shadowColor = this.options.shadowStyle.shadowColor || '#00000000';
423
+ ctx.shadowOffsetX = this.options.shadowStyle.shadowOffsetX || 0;
424
+ ctx.shadowOffsetY = this.options.shadowStyle.shadowOffsetY || 0;
425
+ }
426
+ if (isFunction(this.options.extraDrawFunc)) {
427
+ this.options.extraDrawFunc(ctx);
428
+ }
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) || '');
386
457
  };
387
458
  Watermark.prototype.setText = function (ctx, params) {
388
459
  var methodName = 'fillText';
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,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",textType:"fill",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),this.setTextStyle(o),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.setTextStyle=function(t){var e="fillStyle";"stroke"===this.options.textType&&(e="strokeStyle"),t[e]&&(t[e]=this.options.fontColor)},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),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=this.options.textRowMaxWidth||this.options.width,r=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,i);switch(this.options.textBaseline){case"middle":o=(r.length-1)*this.options.lineHeight/2;break;case"bottom":case"alphabetic":case"ideographic":o=(r.length-1)*this.options.lineHeight;break;case"top":case"hanging":o=0}r.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,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}));
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.5.1",
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
  }