watermark-js-plus 0.3.0 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/core/watermark.d.ts +2 -0
- package/dist/types/index.d.ts +7 -0
- package/dist/utils/index.d.ts +2 -2
- package/dist/watermark.esm.js +93 -19
- package/dist/watermark.umd.js +93 -19
- package/dist/watermark.umd.min.js +1 -1
- package/package.json +8 -8
package/dist/core/watermark.d.ts
CHANGED
|
@@ -8,6 +8,7 @@ export default class Watermark {
|
|
|
8
8
|
private observer?;
|
|
9
9
|
private parentObserve?;
|
|
10
10
|
private watermarkDom?;
|
|
11
|
+
private props?;
|
|
11
12
|
/**
|
|
12
13
|
* Watermark constructor
|
|
13
14
|
* @param props - watermark options
|
|
@@ -37,6 +38,7 @@ export default class Watermark {
|
|
|
37
38
|
private drawMultiLineText;
|
|
38
39
|
private drawRichText;
|
|
39
40
|
private getImageRect;
|
|
41
|
+
private getDrawImagePosition;
|
|
40
42
|
private checkParentElementType;
|
|
41
43
|
private bindMutationObserve;
|
|
42
44
|
}
|
package/dist/types/index.d.ts
CHANGED
|
@@ -20,6 +20,8 @@ export interface WatermarkOptions {
|
|
|
20
20
|
image?: string;
|
|
21
21
|
imageWidth: number;
|
|
22
22
|
imageHeight: number;
|
|
23
|
+
richTextWidth?: number;
|
|
24
|
+
richTextHeight?: number;
|
|
23
25
|
lineHeight: number;
|
|
24
26
|
zIndex: number;
|
|
25
27
|
backgroundPosition: string;
|
|
@@ -46,3 +48,8 @@ export interface DecodeBlindWatermarkOptions {
|
|
|
46
48
|
mode: DecodeBlindWatermarkModeType;
|
|
47
49
|
onSuccess: Function;
|
|
48
50
|
}
|
|
51
|
+
export interface CustomContentSVGType {
|
|
52
|
+
element: Element;
|
|
53
|
+
width: number;
|
|
54
|
+
height: number;
|
|
55
|
+
}
|
package/dist/utils/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { WatermarkOptions } from '../types';
|
|
1
|
+
import { CustomContentSVGType, WatermarkOptions } from '../types';
|
|
2
2
|
export declare const convertImage: (canvas: HTMLCanvasElement) => string;
|
|
3
3
|
export declare const isFunction: (value: Function) => boolean;
|
|
4
4
|
export declare const isUndefined: (value: any) => boolean;
|
|
@@ -6,5 +6,5 @@ export declare const createSVGElement: (tagName: string, attrs?: {
|
|
|
6
6
|
[key: string]: string;
|
|
7
7
|
}, namespaceURI?: string) => Element;
|
|
8
8
|
export declare const getMultiLineData: (ctx: CanvasRenderingContext2D, text: string, maxWidth: number) => string[];
|
|
9
|
-
export declare const createCustomContentSVG: (ctx: CanvasRenderingContext2D, options: WatermarkOptions) =>
|
|
9
|
+
export declare const createCustomContentSVG: (ctx: CanvasRenderingContext2D, options: WatermarkOptions) => CustomContentSVGType;
|
|
10
10
|
export declare const convertSVGToImage: (svg: Element) => string;
|
package/dist/watermark.esm.js
CHANGED
|
@@ -103,17 +103,26 @@ var createCustomContentSVG = function (ctx, options) {
|
|
|
103
103
|
var svgElement = createSVGElement('svg', {
|
|
104
104
|
xmlns: 'http://www.w3.org/2000/svg'
|
|
105
105
|
});
|
|
106
|
-
var foreignObjectElement = createSVGElement('foreignObject', {
|
|
107
|
-
width: options.width.toString(),
|
|
108
|
-
height: options.height.toString()
|
|
109
|
-
});
|
|
110
106
|
var bodyElement = document.createElement('div');
|
|
111
107
|
bodyElement.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
|
|
112
|
-
bodyElement.style.cssText = "\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n font: ".concat(ctx.font, ";\n color: ").concat(options.fontColor, ";\n
|
|
113
|
-
bodyElement.innerHTML = options.content;
|
|
108
|
+
bodyElement.style.cssText = "\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n font: ".concat(ctx.font, ";\n color: ").concat(options.fontColor, ";\n");
|
|
109
|
+
bodyElement.innerHTML = "<div class=\"rich-text-content\">".concat(options.content, "</div>");
|
|
110
|
+
document.body.appendChild(bodyElement);
|
|
111
|
+
var _a = bodyElement.querySelector('.rich-text-content'), offsetHeight = _a.offsetHeight, offsetWidth = _a.offsetWidth;
|
|
112
|
+
document.body.removeChild(bodyElement);
|
|
113
|
+
var width = options.richTextWidth || offsetWidth || options.width;
|
|
114
|
+
var height = options.richTextHeight || offsetHeight || options.height;
|
|
115
|
+
var foreignObjectElement = createSVGElement('foreignObject', {
|
|
116
|
+
width: width.toString(),
|
|
117
|
+
height: height.toString()
|
|
118
|
+
});
|
|
114
119
|
foreignObjectElement.appendChild(bodyElement);
|
|
115
120
|
svgElement.appendChild(foreignObjectElement);
|
|
116
|
-
return
|
|
121
|
+
return {
|
|
122
|
+
element: svgElement,
|
|
123
|
+
width: width,
|
|
124
|
+
height: height
|
|
125
|
+
};
|
|
117
126
|
};
|
|
118
127
|
var convertSVGToImage = function (svg) {
|
|
119
128
|
var richContent = svg.outerHTML.replace(/\n/g, '').replace(/\t/g, '').replace(/#/g, '%23');
|
|
@@ -131,6 +140,7 @@ var Watermark = /** @class */ (function () {
|
|
|
131
140
|
function Watermark(props) {
|
|
132
141
|
if (props === void 0) { props = {}; }
|
|
133
142
|
this.parentElement = document.body;
|
|
143
|
+
this.props = props;
|
|
134
144
|
this.options = Object.assign({
|
|
135
145
|
width: 300,
|
|
136
146
|
height: 300,
|
|
@@ -235,7 +245,7 @@ var Watermark = /** @class */ (function () {
|
|
|
235
245
|
(_g = (_f = this.options).onDestroyed) === null || _g === void 0 ? void 0 : _g.call(_f);
|
|
236
246
|
};
|
|
237
247
|
Watermark.prototype.initializeOptions = function () {
|
|
238
|
-
var _a;
|
|
248
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
239
249
|
if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.rotate) {
|
|
240
250
|
this.options.rotate = (360 - this.options.rotate % 360) * (Math.PI / 180);
|
|
241
251
|
}
|
|
@@ -293,10 +303,14 @@ var Watermark = /** @class */ (function () {
|
|
|
293
303
|
translateY = this.options.height / 2;
|
|
294
304
|
break;
|
|
295
305
|
}
|
|
296
|
-
isUndefined(this.
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
306
|
+
if (!isUndefined((_b = this.props) === null || _b === void 0 ? void 0 : _b.translateX) || !isUndefined((_c = this.props) === null || _c === void 0 ? void 0 : _c.translateY)) {
|
|
307
|
+
textBaseline = 'top';
|
|
308
|
+
textAlign = 'left';
|
|
309
|
+
}
|
|
310
|
+
isUndefined((_d = this.props) === null || _d === void 0 ? void 0 : _d.translateX) && (this.options.translateX = translateX);
|
|
311
|
+
isUndefined((_e = this.props) === null || _e === void 0 ? void 0 : _e.translateY) && (this.options.translateY = translateY);
|
|
312
|
+
isUndefined((_f = this.props) === null || _f === void 0 ? void 0 : _f.textBaseline) && (this.options.textBaseline = textBaseline);
|
|
313
|
+
isUndefined((_g = this.props) === null || _g === void 0 ? void 0 : _g.textAlign) && (this.options.textAlign = textAlign);
|
|
300
314
|
};
|
|
301
315
|
Watermark.prototype.validateUnique = function () {
|
|
302
316
|
var result = true;
|
|
@@ -367,7 +381,8 @@ var Watermark = /** @class */ (function () {
|
|
|
367
381
|
image.src = this.options.image;
|
|
368
382
|
image.onload = function () {
|
|
369
383
|
var _a = _this.getImageRect(image), imageWidth = _a.width, imageHeight = _a.height;
|
|
370
|
-
|
|
384
|
+
var imagePosition = _this.getDrawImagePosition(imageWidth, imageHeight);
|
|
385
|
+
ctx.drawImage(image, imagePosition.x, imagePosition.y, imageWidth, imageHeight);
|
|
371
386
|
resolve(ctx.canvas);
|
|
372
387
|
};
|
|
373
388
|
};
|
|
@@ -390,7 +405,21 @@ var Watermark = /** @class */ (function () {
|
|
|
390
405
|
// resolve(canvas)
|
|
391
406
|
// }
|
|
392
407
|
var lines = getMultiLineData(ctx, this.options.content, this.options.width);
|
|
393
|
-
var yOffsetValue
|
|
408
|
+
var yOffsetValue;
|
|
409
|
+
switch (this.options.textBaseline) {
|
|
410
|
+
case 'middle':
|
|
411
|
+
yOffsetValue = (lines.length - 1) * this.options.lineHeight / 2;
|
|
412
|
+
break;
|
|
413
|
+
case 'bottom':
|
|
414
|
+
case 'alphabetic':
|
|
415
|
+
case 'ideographic':
|
|
416
|
+
yOffsetValue = (lines.length - 1) * this.options.lineHeight;
|
|
417
|
+
break;
|
|
418
|
+
case 'top':
|
|
419
|
+
case 'hanging':
|
|
420
|
+
yOffsetValue = 0;
|
|
421
|
+
break;
|
|
422
|
+
}
|
|
394
423
|
lines.forEach(function (txt, index) {
|
|
395
424
|
ctx.fillText(txt, 0, _this.options.lineHeight * index - yOffsetValue);
|
|
396
425
|
});
|
|
@@ -398,13 +427,14 @@ var Watermark = /** @class */ (function () {
|
|
|
398
427
|
};
|
|
399
428
|
Watermark.prototype.drawRichText = function (ctx, resolve) {
|
|
400
429
|
var _this = this;
|
|
430
|
+
var obj = createCustomContentSVG(ctx, this.options);
|
|
401
431
|
var image = new Image();
|
|
402
|
-
image.width =
|
|
403
|
-
image.height =
|
|
404
|
-
|
|
405
|
-
image.src = convertSVGToImage(element);
|
|
432
|
+
image.width = obj.width;
|
|
433
|
+
image.height = obj.height;
|
|
434
|
+
image.src = convertSVGToImage(obj.element);
|
|
406
435
|
image.onload = function () {
|
|
407
|
-
|
|
436
|
+
var imagePosition = _this.getDrawImagePosition(image.width, image.height);
|
|
437
|
+
ctx.drawImage(image, imagePosition.x, imagePosition.y, ctx.canvas.width, ctx.canvas.height);
|
|
408
438
|
resolve(ctx.canvas);
|
|
409
439
|
};
|
|
410
440
|
};
|
|
@@ -424,6 +454,50 @@ var Watermark = /** @class */ (function () {
|
|
|
424
454
|
}
|
|
425
455
|
return rect;
|
|
426
456
|
};
|
|
457
|
+
Watermark.prototype.getDrawImagePosition = function (imageWidth, imageHeight) {
|
|
458
|
+
var _a, _b;
|
|
459
|
+
var result = {
|
|
460
|
+
x: -imageWidth / 2,
|
|
461
|
+
y: -imageHeight / 2
|
|
462
|
+
};
|
|
463
|
+
switch (this.options.translatePlacement) {
|
|
464
|
+
case 'top':
|
|
465
|
+
result.x = -imageWidth / 2;
|
|
466
|
+
result.y = 0;
|
|
467
|
+
break;
|
|
468
|
+
case 'top-start':
|
|
469
|
+
result.x = 0;
|
|
470
|
+
result.y = 0;
|
|
471
|
+
break;
|
|
472
|
+
case 'top-end':
|
|
473
|
+
result.x = -imageWidth;
|
|
474
|
+
result.y = 0;
|
|
475
|
+
break;
|
|
476
|
+
case 'bottom':
|
|
477
|
+
result.x = -imageWidth / 2;
|
|
478
|
+
result.y = -imageHeight;
|
|
479
|
+
break;
|
|
480
|
+
case 'bottom-start':
|
|
481
|
+
result.x = 0;
|
|
482
|
+
result.y = -imageHeight;
|
|
483
|
+
break;
|
|
484
|
+
case 'bottom-end':
|
|
485
|
+
result.x = -imageWidth;
|
|
486
|
+
result.y = -imageHeight;
|
|
487
|
+
break;
|
|
488
|
+
case 'left':
|
|
489
|
+
result.x = 0;
|
|
490
|
+
result.y = -imageHeight / 2;
|
|
491
|
+
break;
|
|
492
|
+
case 'right':
|
|
493
|
+
result.x = -imageWidth;
|
|
494
|
+
result.y = -imageHeight / 2;
|
|
495
|
+
break;
|
|
496
|
+
}
|
|
497
|
+
!isUndefined((_a = this.props) === null || _a === void 0 ? void 0 : _a.translateX) && (result.x = 0);
|
|
498
|
+
!isUndefined((_b = this.props) === null || _b === void 0 ? void 0 : _b.translateY) && (result.y = 0);
|
|
499
|
+
return result;
|
|
500
|
+
};
|
|
427
501
|
Watermark.prototype.checkParentElementType = function () {
|
|
428
502
|
if (['html', 'body'].includes(this.parentElement.tagName.toLocaleLowerCase())) {
|
|
429
503
|
return 'root';
|
package/dist/watermark.umd.js
CHANGED
|
@@ -109,17 +109,26 @@
|
|
|
109
109
|
var svgElement = createSVGElement('svg', {
|
|
110
110
|
xmlns: 'http://www.w3.org/2000/svg'
|
|
111
111
|
});
|
|
112
|
-
var foreignObjectElement = createSVGElement('foreignObject', {
|
|
113
|
-
width: options.width.toString(),
|
|
114
|
-
height: options.height.toString()
|
|
115
|
-
});
|
|
116
112
|
var bodyElement = document.createElement('div');
|
|
117
113
|
bodyElement.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
|
|
118
|
-
bodyElement.style.cssText = "\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n font: ".concat(ctx.font, ";\n color: ").concat(options.fontColor, ";\n
|
|
119
|
-
bodyElement.innerHTML = options.content;
|
|
114
|
+
bodyElement.style.cssText = "\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n font: ".concat(ctx.font, ";\n color: ").concat(options.fontColor, ";\n");
|
|
115
|
+
bodyElement.innerHTML = "<div class=\"rich-text-content\">".concat(options.content, "</div>");
|
|
116
|
+
document.body.appendChild(bodyElement);
|
|
117
|
+
var _a = bodyElement.querySelector('.rich-text-content'), offsetHeight = _a.offsetHeight, offsetWidth = _a.offsetWidth;
|
|
118
|
+
document.body.removeChild(bodyElement);
|
|
119
|
+
var width = options.richTextWidth || offsetWidth || options.width;
|
|
120
|
+
var height = options.richTextHeight || offsetHeight || options.height;
|
|
121
|
+
var foreignObjectElement = createSVGElement('foreignObject', {
|
|
122
|
+
width: width.toString(),
|
|
123
|
+
height: height.toString()
|
|
124
|
+
});
|
|
120
125
|
foreignObjectElement.appendChild(bodyElement);
|
|
121
126
|
svgElement.appendChild(foreignObjectElement);
|
|
122
|
-
return
|
|
127
|
+
return {
|
|
128
|
+
element: svgElement,
|
|
129
|
+
width: width,
|
|
130
|
+
height: height
|
|
131
|
+
};
|
|
123
132
|
};
|
|
124
133
|
var convertSVGToImage = function (svg) {
|
|
125
134
|
var richContent = svg.outerHTML.replace(/\n/g, '').replace(/\t/g, '').replace(/#/g, '%23');
|
|
@@ -137,6 +146,7 @@
|
|
|
137
146
|
function Watermark(props) {
|
|
138
147
|
if (props === void 0) { props = {}; }
|
|
139
148
|
this.parentElement = document.body;
|
|
149
|
+
this.props = props;
|
|
140
150
|
this.options = Object.assign({
|
|
141
151
|
width: 300,
|
|
142
152
|
height: 300,
|
|
@@ -241,7 +251,7 @@
|
|
|
241
251
|
(_g = (_f = this.options).onDestroyed) === null || _g === void 0 ? void 0 : _g.call(_f);
|
|
242
252
|
};
|
|
243
253
|
Watermark.prototype.initializeOptions = function () {
|
|
244
|
-
var _a;
|
|
254
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
245
255
|
if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.rotate) {
|
|
246
256
|
this.options.rotate = (360 - this.options.rotate % 360) * (Math.PI / 180);
|
|
247
257
|
}
|
|
@@ -299,10 +309,14 @@
|
|
|
299
309
|
translateY = this.options.height / 2;
|
|
300
310
|
break;
|
|
301
311
|
}
|
|
302
|
-
isUndefined(this.
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
312
|
+
if (!isUndefined((_b = this.props) === null || _b === void 0 ? void 0 : _b.translateX) || !isUndefined((_c = this.props) === null || _c === void 0 ? void 0 : _c.translateY)) {
|
|
313
|
+
textBaseline = 'top';
|
|
314
|
+
textAlign = 'left';
|
|
315
|
+
}
|
|
316
|
+
isUndefined((_d = this.props) === null || _d === void 0 ? void 0 : _d.translateX) && (this.options.translateX = translateX);
|
|
317
|
+
isUndefined((_e = this.props) === null || _e === void 0 ? void 0 : _e.translateY) && (this.options.translateY = translateY);
|
|
318
|
+
isUndefined((_f = this.props) === null || _f === void 0 ? void 0 : _f.textBaseline) && (this.options.textBaseline = textBaseline);
|
|
319
|
+
isUndefined((_g = this.props) === null || _g === void 0 ? void 0 : _g.textAlign) && (this.options.textAlign = textAlign);
|
|
306
320
|
};
|
|
307
321
|
Watermark.prototype.validateUnique = function () {
|
|
308
322
|
var result = true;
|
|
@@ -373,7 +387,8 @@
|
|
|
373
387
|
image.src = this.options.image;
|
|
374
388
|
image.onload = function () {
|
|
375
389
|
var _a = _this.getImageRect(image), imageWidth = _a.width, imageHeight = _a.height;
|
|
376
|
-
|
|
390
|
+
var imagePosition = _this.getDrawImagePosition(imageWidth, imageHeight);
|
|
391
|
+
ctx.drawImage(image, imagePosition.x, imagePosition.y, imageWidth, imageHeight);
|
|
377
392
|
resolve(ctx.canvas);
|
|
378
393
|
};
|
|
379
394
|
};
|
|
@@ -396,7 +411,21 @@
|
|
|
396
411
|
// resolve(canvas)
|
|
397
412
|
// }
|
|
398
413
|
var lines = getMultiLineData(ctx, this.options.content, this.options.width);
|
|
399
|
-
var yOffsetValue
|
|
414
|
+
var yOffsetValue;
|
|
415
|
+
switch (this.options.textBaseline) {
|
|
416
|
+
case 'middle':
|
|
417
|
+
yOffsetValue = (lines.length - 1) * this.options.lineHeight / 2;
|
|
418
|
+
break;
|
|
419
|
+
case 'bottom':
|
|
420
|
+
case 'alphabetic':
|
|
421
|
+
case 'ideographic':
|
|
422
|
+
yOffsetValue = (lines.length - 1) * this.options.lineHeight;
|
|
423
|
+
break;
|
|
424
|
+
case 'top':
|
|
425
|
+
case 'hanging':
|
|
426
|
+
yOffsetValue = 0;
|
|
427
|
+
break;
|
|
428
|
+
}
|
|
400
429
|
lines.forEach(function (txt, index) {
|
|
401
430
|
ctx.fillText(txt, 0, _this.options.lineHeight * index - yOffsetValue);
|
|
402
431
|
});
|
|
@@ -404,13 +433,14 @@
|
|
|
404
433
|
};
|
|
405
434
|
Watermark.prototype.drawRichText = function (ctx, resolve) {
|
|
406
435
|
var _this = this;
|
|
436
|
+
var obj = createCustomContentSVG(ctx, this.options);
|
|
407
437
|
var image = new Image();
|
|
408
|
-
image.width =
|
|
409
|
-
image.height =
|
|
410
|
-
|
|
411
|
-
image.src = convertSVGToImage(element);
|
|
438
|
+
image.width = obj.width;
|
|
439
|
+
image.height = obj.height;
|
|
440
|
+
image.src = convertSVGToImage(obj.element);
|
|
412
441
|
image.onload = function () {
|
|
413
|
-
|
|
442
|
+
var imagePosition = _this.getDrawImagePosition(image.width, image.height);
|
|
443
|
+
ctx.drawImage(image, imagePosition.x, imagePosition.y, ctx.canvas.width, ctx.canvas.height);
|
|
414
444
|
resolve(ctx.canvas);
|
|
415
445
|
};
|
|
416
446
|
};
|
|
@@ -430,6 +460,50 @@
|
|
|
430
460
|
}
|
|
431
461
|
return rect;
|
|
432
462
|
};
|
|
463
|
+
Watermark.prototype.getDrawImagePosition = function (imageWidth, imageHeight) {
|
|
464
|
+
var _a, _b;
|
|
465
|
+
var result = {
|
|
466
|
+
x: -imageWidth / 2,
|
|
467
|
+
y: -imageHeight / 2
|
|
468
|
+
};
|
|
469
|
+
switch (this.options.translatePlacement) {
|
|
470
|
+
case 'top':
|
|
471
|
+
result.x = -imageWidth / 2;
|
|
472
|
+
result.y = 0;
|
|
473
|
+
break;
|
|
474
|
+
case 'top-start':
|
|
475
|
+
result.x = 0;
|
|
476
|
+
result.y = 0;
|
|
477
|
+
break;
|
|
478
|
+
case 'top-end':
|
|
479
|
+
result.x = -imageWidth;
|
|
480
|
+
result.y = 0;
|
|
481
|
+
break;
|
|
482
|
+
case 'bottom':
|
|
483
|
+
result.x = -imageWidth / 2;
|
|
484
|
+
result.y = -imageHeight;
|
|
485
|
+
break;
|
|
486
|
+
case 'bottom-start':
|
|
487
|
+
result.x = 0;
|
|
488
|
+
result.y = -imageHeight;
|
|
489
|
+
break;
|
|
490
|
+
case 'bottom-end':
|
|
491
|
+
result.x = -imageWidth;
|
|
492
|
+
result.y = -imageHeight;
|
|
493
|
+
break;
|
|
494
|
+
case 'left':
|
|
495
|
+
result.x = 0;
|
|
496
|
+
result.y = -imageHeight / 2;
|
|
497
|
+
break;
|
|
498
|
+
case 'right':
|
|
499
|
+
result.x = -imageWidth;
|
|
500
|
+
result.y = -imageHeight / 2;
|
|
501
|
+
break;
|
|
502
|
+
}
|
|
503
|
+
!isUndefined((_a = this.props) === null || _a === void 0 ? void 0 : _a.translateX) && (result.x = 0);
|
|
504
|
+
!isUndefined((_b = this.props) === null || _b === void 0 ? void 0 : _b.translateY) && (result.y = 0);
|
|
505
|
+
return result;
|
|
506
|
+
};
|
|
433
507
|
Watermark.prototype.checkParentElementType = function () {
|
|
434
508
|
if (['html', 'body'].includes(this.parentElement.tagName.toLocaleLowerCase())) {
|
|
435
509
|
return 'root';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).watermark={})}(this,(function(t){"use strict";var e=function(t,n){return e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n])},e(t,n)};function n(t,e,n,o){return new(n||(n=Promise))((function(i,r){function a(t){try{c(o.next(t))}catch(t){r(t)}}function s(t){try{c(o.throw(t))}catch(t){r(t)}}function c(t){var e;t.done?i(t.value):(e=t.value,e instanceof n?e:new n((function(t){t(e)}))).then(a,s)}c((o=o.apply(t,e||[])).next())}))}function o(t,e){var n,o,i,r,a={label:0,sent:function(){if(1&i[0])throw i[1];return i[1]},trys:[],ops:[]};return r={next:s(0),throw:s(1),return:s(2)},"function"==typeof Symbol&&(r[Symbol.iterator]=function(){return this}),r;function s(r){return function(s){return function(r){if(n)throw new TypeError("Generator is already executing.");for(;a;)try{if(n=1,o&&(i=2&r[0]?o.return:r[0]?o.throw||((i=o.return)&&i.call(o),0):o.next)&&!(i=i.call(o,r[1])).done)return i;switch(o=0,i&&(r=[2&r[0],i.value]),r[0]){case 0:case 1:i=r;break;case 4:return a.label++,{value:r[1],done:!1};case 5:a.label++,o=r[1],r=[0];continue;case 7:r=a.ops.pop(),a.trys.pop();continue;default:if(!(i=a.trys,(i=i.length>0&&i[i.length-1])||6!==r[0]&&2!==r[0])){a=0;continue}if(3===r[0]&&(!i||r[1]>i[0]&&r[1]<i[3])){a.label=r[1];break}if(6===r[0]&&a.label<i[1]){a.label=i[1],i=r;break}if(i&&a.label<i[2]){a.label=i[2],a.ops.push(r);break}i[2]&&a.ops.pop(),a.trys.pop();continue}r=e.call(t,a)}catch(t){r=[6,t],o=0}finally{n=i=0}if(5&r[0])throw r[1];return{value:r[0]?r[1]:void 0,done:!0}}([r,s])}}}var i=function(t){return t.toDataURL("image/png",1)},r=function(t){return void 0===t},a=function(t,e,n){void 0===e&&(e={}),void 0===n&&(n="http://www.w3.org/2000/svg");var o=document.createElementNS(n,t);for(var i in e)o.setAttribute(i,e[i]);return o},s=function(){function t(t){void 0===t&&(t={}),this.parentElement=document.body,this.options=Object.assign({width:300,height:300,rotate:45,translatePlacement:"middle",contentType:"text",content:"hello watermark-js-plus",imageWidth:0,imageHeight:0,lineHeight:30,zIndex:1e4,backgroundPosition:"0 0, 0 0",backgroundRepeat:"repeat",fontSize:20,fontFamily:"sans-serif",fontColor:"#000",globalAlpha:.5,fontWeight:"normal",mode:"default",mutationObserve:!0,unique:!0,parent:"body",onSuccess:function(){},onBeforeDestroy:function(){},onDestroyed:function(){}},t),this.changeParentElement(this.options.parent),this.initializeOptions()}return t.createCanvas=function(t,e){var n,o=window.devicePixelRatio||1,i=document.createElement("canvas");return i.width=t*o,i.height=e*o,i.style.width="".concat(t,"px"),i.style.height="".concat(e,"px"),null===(n=i.getContext("2d"))||void 0===n||n.setTransform(o,0,0,o,0,0),i},t.prototype.changeParentElement=function(t){if("string"==typeof t){var e=document.querySelector(t);e&&(this.parentElement=e)}else this.parentElement=t},t.prototype.create=function(){var t,e;return n(this,void 0,void 0,(function(){var n,r,a,s;return o(this,(function(o){switch(o.label){case 0:return this.validateUnique()&&this.validateContent()?[4,this.draw()]:[2];case 1:return n=o.sent(),r=i(n),this.watermarkDom=document.createElement("div"),a=document.createElement("div"),this.watermarkDom.__WATERMARK__="watermark",this.watermarkDom.__WATERMARK__INSTANCE__=this,s=this.checkParentElementType(),this.watermarkDom.style.cssText="\n z-index: ".concat(this.options.zIndex,";\n ").concat("custom"===s?"top: 0;bottom: 0;left: 0;right: 0;height: 100%;pointer-events: none;position: absolute":"position: relative","\n "),a.style.cssText="\n position: ".concat("root"===s?"fixed;":"absolute;","\n z-index: ").concat(this.options.zIndex,";\n pointer-events: none;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n background-image: url(").concat(r,");\n background-repeat: ").concat(this.options.backgroundRepeat,";\n background-size: ").concat(this.options.width,"px ").concat(this.options.height,"px;\n background-position: ").concat(this.options.backgroundPosition,";\n -webkit-print-color-adjust: exact;\n "),this.watermarkDom.append(a),this.parentElement.appendChild(this.watermarkDom),this.options.mutationObserve&&this.bindMutationObserve(),null===(e=(t=this.options).onSuccess)||void 0===e||e.call(t),[2]}}))}))},t.prototype.destroy=function(){var t,e,n,o,i,r,a;null===(e=(t=this.options).onBeforeDestroy)||void 0===e||e.call(t),null===(n=this.observer)||void 0===n||n.disconnect(),null===(o=this.parentObserve)||void 0===o||o.disconnect(),null===(i=this.watermarkDom)||void 0===i||i.remove(),null===(a=(r=this.options).onDestroyed)||void 0===a||a.call(r)},t.prototype.initializeOptions=function(){var t,e,n;(null===(t=this.options)||void 0===t?void 0:t.rotate)&&(this.options.rotate=(360-this.options.rotate%360)*(Math.PI/180));var o="middle",i="center";switch(this.options.translatePlacement){case"top":e=this.options.width/2,n=0,o="top";break;case"top-start":e=0,n=0,o="top",i="start";break;case"top-end":e=this.options.width,n=0,o="top",i="end";break;case"bottom":e=this.options.width/2,n=this.options.height,o="bottom";break;case"bottom-start":e=0,n=this.options.height,o="bottom",i="start";break;case"bottom-end":e=this.options.width,n=this.options.height,o="bottom",i="end";break;case"left":e=0,n=this.options.height/2,i="start";break;case"right":e=this.options.width,n=this.options.height/2,i="end";break;case"middle":e=this.options.width/2,n=this.options.height/2}r(this.options.translateX)&&(this.options.translateX=e),r(this.options.translateY)&&(this.options.translateY=n),r(this.options.textBaseline)&&(this.options.textBaseline=o),r(this.options.textAlign)&&(this.options.textAlign=i)},t.prototype.validateUnique=function(){var t=!0;return this.options.unique&&this.parentElement.childNodes.forEach((function(e){t&&Object.hasOwnProperty.call(e,"__WATERMARK__")&&(t=!1)})),t},t.prototype.validateContent=function(){switch(this.options.contentType){case"image":return Object.hasOwnProperty.call(this.options,"image");case"multi-line-text":case"rich-text":case"text":return this.options.content.length>0}return!1},t.prototype.draw=function(){var e=this,n=t.createCanvas(this.options.width,this.options.height).getContext("2d");if(null===n)throw new Error("get context error");return n.font="".concat(this.options.fontWeight," ").concat(this.options.fontSize,"px ").concat(this.options.fontFamily),this.options.textAlign&&(n.textAlign=this.options.textAlign),this.options.textBaseline&&(n.textBaseline=this.options.textBaseline),n.fillStyle=this.options.fontColor,n.globalAlpha=this.options.globalAlpha,n.translate(this.options.translateX,this.options.translateY),n.rotate(this.options.rotate),new Promise((function(t){switch(e.options.contentType){case"text":e.drawText(n,t);break;case"image":e.drawImage(n,t);break;case"multi-line-text":e.drawMultiLineText(n,t);break;case"rich-text":e.drawRichText(n,t)}}))},t.prototype.drawText=function(t,e){t.fillText(this.options.content,0,0),e(t.canvas)},t.prototype.drawImage=function(t,e){var n=this,o=new Image;o.setAttribute("crossOrigin","Anonymous"),o.src=this.options.image,o.onload=function(){var i=n.getImageRect(o),r=i.width,a=i.height;t.drawImage(o,0-r/2,0-a/2,r,a),e(t.canvas)}},t.prototype.drawMultiLineText=function(t,e){var n=this,o=function(t,e,n){for(var o=[],i="",r=0,a=e.length;r<a;r++)i+=e.charAt(r),t.measureText(i).width>n&&(o.push(i.substring(0,i.length-1)),i="",r--);return o.push(i),o}(t,this.options.content,this.options.width),i=(o.length-1)*this.options.lineHeight/2;o.forEach((function(e,o){t.fillText(e,0,n.options.lineHeight*o-i)})),e(t.canvas)},t.prototype.drawRichText=function(t,e){var n=this,o=new Image;o.width=this.options.width,o.height=this.options.height;var i,r=function(t,e){var n=a("svg",{xmlns:"http://www.w3.org/2000/svg"}),o=a("foreignObject",{width:e.width.toString(),height:e.height.toString()}),i=document.createElement("div");return i.setAttribute("xmlns","http://www.w3.org/1999/xhtml"),i.style.cssText="\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n font: ".concat(t.font,";\n color: ").concat(e.fontColor,";\n "),i.innerHTML=e.content,o.appendChild(i),n.appendChild(o),n}(t,this.options);o.src=(i=r.outerHTML.replace(/\n/g,"").replace(/\t/g,"").replace(/#/g,"%23"),"data:image/svg+xml;charset=utf-8,".concat(i)),o.onload=function(){t.drawImage(o,-n.options.width/2,-n.options.height/2,t.canvas.width,t.canvas.height),e(t.canvas)}},t.prototype.getImageRect=function(t){var e={width:this.options.imageWidth,height:this.options.imageHeight};switch(!0){case 0!==e.width&&0===e.height:e.height=e.width*t.height/t.width;break;case 0===e.width&&0!==e.height:e.width=e.height*t.width/t.height;break;case 0===e.width&&0===e.height:e.width=t.width,e.height=t.height}return e},t.prototype.checkParentElementType=function(){return["html","body"].includes(this.parentElement.tagName.toLocaleLowerCase())?"root":"custom"},t.prototype.bindMutationObserve=function(){var t=this;this.watermarkDom&&(this.observer=new MutationObserver((function(e){e.length>0&&(t.destroy(),t.create())})),this.observer.observe(this.watermarkDom,{attributes:!0,childList:!0,subtree:!0,characterData:!0}),this.parentObserve=new MutationObserver((function(e){e.forEach((function(e){var n;(null==e?void 0:e.target)!==t.watermarkDom&&(null===(n=null==e?void 0:e.removedNodes)||void 0===n?void 0:n[0])!==t.watermarkDom||(t.destroy(),t.create())}))})),this.parentObserve.observe(this.parentElement,{attributes:!0,childList:!0,subtree:!0,characterData:!0}))},t}(),c=function(t){function n(e){return void 0===e&&(e={}),e.globalAlpha=.005,e.mode="blind",t.call(this,e)||this}return function(t,n){if("function"!=typeof n&&null!==n)throw new TypeError("Class extends value "+String(n)+" is not a constructor or null");function o(){this.constructor=t}e(t,n),t.prototype=null===n?Object.create(n):(o.prototype=n.prototype,new o)}(n,t),n.decode=function(t){var e=Object.assign({url:"",fillColor:"#000",compositeOperation:"color-burn",mode:"canvas"},t);if(e.url&&"canvas"===e.mode){var n=new Image;n.src=e.url,n.onload=function(){var t,o=n.width,r=n.height,a=s.createCanvas(o,r),c=a.getContext("2d");if(null===c)throw new Error("get context error");c.drawImage(n,0,0,o,r),c.globalCompositeOperation=e.compositeOperation,c.fillStyle=e.fillColor,c.fillRect(0,0,o,r);var h=i(a);e.onSuccess&&"function"==typeof e.onSuccess&&(null===(t=e.onSuccess)||void 0===t||t.call(e,h))}}},n}(s);t.BlindWatermark=c,t.Watermark=s}));
|
|
1
|
+
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).watermark={})}(this,(function(t){"use strict";var e=function(t,o){return e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o])},e(t,o)};function o(t,e,o,n){return new(o||(o=Promise))((function(i,r){function a(t){try{c(n.next(t))}catch(t){r(t)}}function s(t){try{c(n.throw(t))}catch(t){r(t)}}function c(t){var e;t.done?i(t.value):(e=t.value,e instanceof o?e:new o((function(t){t(e)}))).then(a,s)}c((n=n.apply(t,e||[])).next())}))}function n(t,e){var o,n,i,r,a={label:0,sent:function(){if(1&i[0])throw i[1];return i[1]},trys:[],ops:[]};return r={next:s(0),throw:s(1),return:s(2)},"function"==typeof Symbol&&(r[Symbol.iterator]=function(){return this}),r;function s(r){return function(s){return function(r){if(o)throw new TypeError("Generator is already executing.");for(;a;)try{if(o=1,n&&(i=2&r[0]?n.return:r[0]?n.throw||((i=n.return)&&i.call(n),0):n.next)&&!(i=i.call(n,r[1])).done)return i;switch(n=0,i&&(r=[2&r[0],i.value]),r[0]){case 0:case 1:i=r;break;case 4:return a.label++,{value:r[1],done:!1};case 5:a.label++,n=r[1],r=[0];continue;case 7:r=a.ops.pop(),a.trys.pop();continue;default:if(!(i=a.trys,(i=i.length>0&&i[i.length-1])||6!==r[0]&&2!==r[0])){a=0;continue}if(3===r[0]&&(!i||r[1]>i[0]&&r[1]<i[3])){a.label=r[1];break}if(6===r[0]&&a.label<i[1]){a.label=i[1],i=r;break}if(i&&a.label<i[2]){a.label=i[2],a.ops.push(r);break}i[2]&&a.ops.pop(),a.trys.pop();continue}r=e.call(t,a)}catch(t){r=[6,t],n=0}finally{o=i=0}if(5&r[0])throw r[1];return{value:r[0]?r[1]:void 0,done:!0}}([r,s])}}}var i=function(t){return t.toDataURL("image/png",1)},r=function(t){return void 0===t},a=function(t,e,o){void 0===e&&(e={}),void 0===o&&(o="http://www.w3.org/2000/svg");var n=document.createElementNS(o,t);for(var i in e)n.setAttribute(i,e[i]);return n},s=function(){function t(t){void 0===t&&(t={}),this.parentElement=document.body,this.props=t,this.options=Object.assign({width:300,height:300,rotate:45,translatePlacement:"middle",contentType:"text",content:"hello watermark-js-plus",imageWidth:0,imageHeight:0,lineHeight:30,zIndex:1e4,backgroundPosition:"0 0, 0 0",backgroundRepeat:"repeat",fontSize:20,fontFamily:"sans-serif",fontColor:"#000",globalAlpha:.5,fontWeight:"normal",mode:"default",mutationObserve:!0,unique:!0,parent:"body",onSuccess:function(){},onBeforeDestroy:function(){},onDestroyed:function(){}},t),this.changeParentElement(this.options.parent),this.initializeOptions()}return t.createCanvas=function(t,e){var o,n=window.devicePixelRatio||1,i=document.createElement("canvas");return i.width=t*n,i.height=e*n,i.style.width="".concat(t,"px"),i.style.height="".concat(e,"px"),null===(o=i.getContext("2d"))||void 0===o||o.setTransform(n,0,0,n,0,0),i},t.prototype.changeParentElement=function(t){if("string"==typeof t){var e=document.querySelector(t);e&&(this.parentElement=e)}else this.parentElement=t},t.prototype.create=function(){var t,e;return o(this,void 0,void 0,(function(){var o,r,a,s;return n(this,(function(n){switch(n.label){case 0:return this.validateUnique()&&this.validateContent()?[4,this.draw()]:[2];case 1:return o=n.sent(),r=i(o),this.watermarkDom=document.createElement("div"),a=document.createElement("div"),this.watermarkDom.__WATERMARK__="watermark",this.watermarkDom.__WATERMARK__INSTANCE__=this,s=this.checkParentElementType(),this.watermarkDom.style.cssText="\n z-index: ".concat(this.options.zIndex,";\n ").concat("custom"===s?"top: 0;bottom: 0;left: 0;right: 0;height: 100%;pointer-events: none;position: absolute":"position: relative","\n "),a.style.cssText="\n position: ".concat("root"===s?"fixed;":"absolute;","\n z-index: ").concat(this.options.zIndex,";\n pointer-events: none;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n background-image: url(").concat(r,");\n background-repeat: ").concat(this.options.backgroundRepeat,";\n background-size: ").concat(this.options.width,"px ").concat(this.options.height,"px;\n background-position: ").concat(this.options.backgroundPosition,";\n -webkit-print-color-adjust: exact;\n "),this.watermarkDom.append(a),this.parentElement.appendChild(this.watermarkDom),this.options.mutationObserve&&this.bindMutationObserve(),null===(e=(t=this.options).onSuccess)||void 0===e||e.call(t),[2]}}))}))},t.prototype.destroy=function(){var t,e,o,n,i,r,a;null===(e=(t=this.options).onBeforeDestroy)||void 0===e||e.call(t),null===(o=this.observer)||void 0===o||o.disconnect(),null===(n=this.parentObserve)||void 0===n||n.disconnect(),null===(i=this.watermarkDom)||void 0===i||i.remove(),null===(a=(r=this.options).onDestroyed)||void 0===a||a.call(r)},t.prototype.initializeOptions=function(){var t,e,o,n,i,a,s,c,h;(null===(t=this.options)||void 0===t?void 0:t.rotate)&&(this.options.rotate=(360-this.options.rotate%360)*(Math.PI/180));var l="middle",p="center";switch(this.options.translatePlacement){case"top":c=this.options.width/2,h=0,l="top";break;case"top-start":c=0,h=0,l="top",p="start";break;case"top-end":c=this.options.width,h=0,l="top",p="end";break;case"bottom":c=this.options.width/2,h=this.options.height,l="bottom";break;case"bottom-start":c=0,h=this.options.height,l="bottom",p="start";break;case"bottom-end":c=this.options.width,h=this.options.height,l="bottom",p="end";break;case"left":c=0,h=this.options.height/2,p="start";break;case"right":c=this.options.width,h=this.options.height/2,p="end";break;case"middle":c=this.options.width/2,h=this.options.height/2}r(null===(e=this.props)||void 0===e?void 0:e.translateX)&&r(null===(o=this.props)||void 0===o?void 0:o.translateY)||(l="top",p="left"),r(null===(n=this.props)||void 0===n?void 0:n.translateX)&&(this.options.translateX=c),r(null===(i=this.props)||void 0===i?void 0:i.translateY)&&(this.options.translateY=h),r(null===(a=this.props)||void 0===a?void 0:a.textBaseline)&&(this.options.textBaseline=l),r(null===(s=this.props)||void 0===s?void 0:s.textAlign)&&(this.options.textAlign=p)},t.prototype.validateUnique=function(){var t=!0;return this.options.unique&&this.parentElement.childNodes.forEach((function(e){t&&Object.hasOwnProperty.call(e,"__WATERMARK__")&&(t=!1)})),t},t.prototype.validateContent=function(){switch(this.options.contentType){case"image":return Object.hasOwnProperty.call(this.options,"image");case"multi-line-text":case"rich-text":case"text":return this.options.content.length>0}return!1},t.prototype.draw=function(){var e=this,o=t.createCanvas(this.options.width,this.options.height).getContext("2d");if(null===o)throw new Error("get context error");return o.font="".concat(this.options.fontWeight," ").concat(this.options.fontSize,"px ").concat(this.options.fontFamily),this.options.textAlign&&(o.textAlign=this.options.textAlign),this.options.textBaseline&&(o.textBaseline=this.options.textBaseline),o.fillStyle=this.options.fontColor,o.globalAlpha=this.options.globalAlpha,o.translate(this.options.translateX,this.options.translateY),o.rotate(this.options.rotate),new Promise((function(t){switch(e.options.contentType){case"text":e.drawText(o,t);break;case"image":e.drawImage(o,t);break;case"multi-line-text":e.drawMultiLineText(o,t);break;case"rich-text":e.drawRichText(o,t)}}))},t.prototype.drawText=function(t,e){t.fillText(this.options.content,0,0),e(t.canvas)},t.prototype.drawImage=function(t,e){var o=this,n=new Image;n.setAttribute("crossOrigin","Anonymous"),n.src=this.options.image,n.onload=function(){var i=o.getImageRect(n),r=i.width,a=i.height,s=o.getDrawImagePosition(r,a);t.drawImage(n,s.x,s.y,r,a),e(t.canvas)}},t.prototype.drawMultiLineText=function(t,e){var o,n=this,i=function(t,e,o){for(var n=[],i="",r=0,a=e.length;r<a;r++)i+=e.charAt(r),t.measureText(i).width>o&&(n.push(i.substring(0,i.length-1)),i="",r--);return n.push(i),n}(t,this.options.content,this.options.width);switch(this.options.textBaseline){case"middle":o=(i.length-1)*this.options.lineHeight/2;break;case"bottom":case"alphabetic":case"ideographic":o=(i.length-1)*this.options.lineHeight;break;case"top":case"hanging":o=0}i.forEach((function(e,i){t.fillText(e,0,n.options.lineHeight*i-o)})),e(t.canvas)},t.prototype.drawRichText=function(t,e){var o,n,i=this,r=function(t,e){var o=a("svg",{xmlns:"http://www.w3.org/2000/svg"}),n=document.createElement("div");n.setAttribute("xmlns","http://www.w3.org/1999/xhtml"),n.style.cssText="\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n font: ".concat(t.font,";\n color: ").concat(e.fontColor,";\n"),n.innerHTML='<div class="rich-text-content">'.concat(e.content,"</div>"),document.body.appendChild(n);var i=n.querySelector(".rich-text-content"),r=i.offsetHeight,s=i.offsetWidth;document.body.removeChild(n);var c=e.richTextWidth||s||e.width,h=e.richTextHeight||r||e.height,l=a("foreignObject",{width:c.toString(),height:h.toString()});return l.appendChild(n),o.appendChild(l),{element:o,width:c,height:h}}(t,this.options),s=new Image;s.width=r.width,s.height=r.height,s.src=(o=r.element,n=o.outerHTML.replace(/\n/g,"").replace(/\t/g,"").replace(/#/g,"%23"),"data:image/svg+xml;charset=utf-8,".concat(n)),s.onload=function(){var o=i.getDrawImagePosition(s.width,s.height);t.drawImage(s,o.x,o.y,t.canvas.width,t.canvas.height),e(t.canvas)}},t.prototype.getImageRect=function(t){var e={width:this.options.imageWidth,height:this.options.imageHeight};switch(!0){case 0!==e.width&&0===e.height:e.height=e.width*t.height/t.width;break;case 0===e.width&&0!==e.height:e.width=e.height*t.width/t.height;break;case 0===e.width&&0===e.height:e.width=t.width,e.height=t.height}return e},t.prototype.getDrawImagePosition=function(t,e){var o,n,i={x:-t/2,y:-e/2};switch(this.options.translatePlacement){case"top":i.x=-t/2,i.y=0;break;case"top-start":i.x=0,i.y=0;break;case"top-end":i.x=-t,i.y=0;break;case"bottom":i.x=-t/2,i.y=-e;break;case"bottom-start":i.x=0,i.y=-e;break;case"bottom-end":i.x=-t,i.y=-e;break;case"left":i.x=0,i.y=-e/2;break;case"right":i.x=-t,i.y=-e/2}return!r(null===(o=this.props)||void 0===o?void 0:o.translateX)&&(i.x=0),!r(null===(n=this.props)||void 0===n?void 0:n.translateY)&&(i.y=0),i},t.prototype.checkParentElementType=function(){return["html","body"].includes(this.parentElement.tagName.toLocaleLowerCase())?"root":"custom"},t.prototype.bindMutationObserve=function(){var t=this;this.watermarkDom&&(this.observer=new MutationObserver((function(e){e.length>0&&(t.destroy(),t.create())})),this.observer.observe(this.watermarkDom,{attributes:!0,childList:!0,subtree:!0,characterData:!0}),this.parentObserve=new MutationObserver((function(e){e.forEach((function(e){var o;(null==e?void 0:e.target)!==t.watermarkDom&&(null===(o=null==e?void 0:e.removedNodes)||void 0===o?void 0:o[0])!==t.watermarkDom||(t.destroy(),t.create())}))})),this.parentObserve.observe(this.parentElement,{attributes:!0,childList:!0,subtree:!0,characterData:!0}))},t}(),c=function(t){function o(e){return void 0===e&&(e={}),e.globalAlpha=.005,e.mode="blind",t.call(this,e)||this}return function(t,o){if("function"!=typeof o&&null!==o)throw new TypeError("Class extends value "+String(o)+" is not a constructor or null");function n(){this.constructor=t}e(t,o),t.prototype=null===o?Object.create(o):(n.prototype=o.prototype,new n)}(o,t),o.decode=function(t){var e=Object.assign({url:"",fillColor:"#000",compositeOperation:"color-burn",mode:"canvas"},t);if(e.url&&"canvas"===e.mode){var o=new Image;o.src=e.url,o.onload=function(){var t,n=o.width,r=o.height,a=s.createCanvas(n,r),c=a.getContext("2d");if(null===c)throw new Error("get context error");c.drawImage(o,0,0,n,r),c.globalCompositeOperation=e.compositeOperation,c.fillStyle=e.fillColor,c.fillRect(0,0,n,r);var h=i(a);e.onSuccess&&"function"==typeof e.onSuccess&&(null===(t=e.onSuccess)||void 0===t||t.call(e,h))}}},o}(s);t.BlindWatermark=c,t.Watermark=s}));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "watermark-js-plus",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.4.0",
|
|
4
4
|
"description": "watermark for the browser",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
@@ -44,20 +44,20 @@
|
|
|
44
44
|
"dist"
|
|
45
45
|
],
|
|
46
46
|
"devDependencies": {
|
|
47
|
-
"@babel/core": "^7.20.
|
|
47
|
+
"@babel/core": "^7.20.12",
|
|
48
48
|
"@babel/eslint-parser": "^7.19.1",
|
|
49
49
|
"@babel/plugin-transform-runtime": "^7.19.6",
|
|
50
50
|
"@babel/preset-env": "^7.20.2",
|
|
51
|
-
"@commitlint/cli": "^17.
|
|
52
|
-
"@commitlint/config-conventional": "^17.
|
|
51
|
+
"@commitlint/cli": "^17.4.0",
|
|
52
|
+
"@commitlint/config-conventional": "^17.4.0",
|
|
53
53
|
"@element-plus/icons-vue": "^2.0.10",
|
|
54
54
|
"@rollup/plugin-babel": "^6.0.3",
|
|
55
55
|
"@rollup/plugin-commonjs": "^24.0.0",
|
|
56
56
|
"@rollup/plugin-eslint": "^9.0.1",
|
|
57
57
|
"@rollup/plugin-node-resolve": "^15.0.1",
|
|
58
58
|
"@rollup/plugin-replace": "^5.0.2",
|
|
59
|
-
"@rollup/plugin-terser": "0.
|
|
60
|
-
"@rollup/plugin-typescript": "^
|
|
59
|
+
"@rollup/plugin-terser": "0.3.0",
|
|
60
|
+
"@rollup/plugin-typescript": "^11.0.0",
|
|
61
61
|
"@types/markdown-it": "^12.2.3",
|
|
62
62
|
"@typescript-eslint/parser": "^5.48.0",
|
|
63
63
|
"@vue/theme": "^1.3.0",
|
|
@@ -75,10 +75,10 @@
|
|
|
75
75
|
"markdown-it": "^13.0.1",
|
|
76
76
|
"rollup": "^3.9.1",
|
|
77
77
|
"rollup-plugin-filesize": "^9.1.2",
|
|
78
|
-
"rollup-plugin-your-function": "^0.4.
|
|
78
|
+
"rollup-plugin-your-function": "^0.4.7",
|
|
79
79
|
"terser": "^5.16.1",
|
|
80
80
|
"typescript": "^4.9.4",
|
|
81
81
|
"unplugin-element-plus": "^0.4.1",
|
|
82
|
-
"vitepress": "^1.0.0-alpha.
|
|
82
|
+
"vitepress": "^1.0.0-alpha.35"
|
|
83
83
|
}
|
|
84
84
|
}
|