1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 | (function (global, factory) {
|
11 | typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
|
12 | typeof define === 'function' && define.amd ? define(factory) :
|
13 | (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Watermark = factory());
|
14 | })(this, (function () { 'use strict';
|
15 |
|
16 | |
17 |
|
18 |
|
19 |
|
20 |
|
21 | const getPixelRatio = (context) => {
|
22 | if (!context) {
|
23 | return 1;
|
24 | }
|
25 | const backingStore = context.backingStorePixelRatio ||
|
26 | context.webkitBackingStorePixelRatio ||
|
27 | context.mozBackingStorePixelRatio ||
|
28 | context.msBackingStorePixelRatio ||
|
29 | context.oBackingStorePixelRatio ||
|
30 | context.backingStorePixelRatio ||
|
31 | 1;
|
32 | return (window.devicePixelRatio || 1) / backingStore;
|
33 | };
|
34 | class Watermark {
|
35 | constructor(options) {
|
36 | this.option = {
|
37 | gapX: 212,
|
38 | gapY: 222,
|
39 | width: 120,
|
40 | height: 64,
|
41 | rotate: -22,
|
42 | fontStyle: 'normal',
|
43 | fontWeight: 'normal',
|
44 | fontColor: 'rgba(0,0,0,.15)',
|
45 | fontSize: 16,
|
46 | fontFamily: 'sans-serif',
|
47 | };
|
48 | this.option = Object.assign(Object.assign({}, this.option), options);
|
49 | }
|
50 | async create() {
|
51 | const { image = '', content = '', gapX = 212, gapY = 222, width = 120, height = 64, rotate = -22, fontStyle = 'normal', fontWeight = 'normal', fontColor = 'rgba(0,0,0,.15)', fontSize = 16, fontFamily = 'sans-serif', offsetLeft, offsetTop, } = this.option;
|
52 | const canvas = document.createElement('canvas');
|
53 | const ctx = canvas.getContext('2d');
|
54 | const ratio = getPixelRatio(ctx);
|
55 | const canvasWidth = `${(gapX + width) * ratio}px`;
|
56 | const canvasHeight = `${(gapY + height) * ratio}px`;
|
57 | const canvasOffsetLeft = offsetLeft || gapX / 2;
|
58 | const canvasOffsetTop = offsetTop || gapY / 2;
|
59 | canvas.setAttribute('width', canvasWidth);
|
60 | canvas.setAttribute('height', canvasHeight);
|
61 | return new Promise(async (resolve, reject) => {
|
62 | if (ctx) {
|
63 | ctx.translate(canvasOffsetLeft * ratio, canvasOffsetTop * ratio);
|
64 | ctx.rotate((Math.PI / 180) * Number(rotate));
|
65 | const markWidth = width * ratio;
|
66 | const markHeight = height * ratio;
|
67 | if (image) {
|
68 | const img = new Image();
|
69 | img.crossOrigin = 'anonymous';
|
70 | img.referrerPolicy = 'no-referrer';
|
71 | img.src = image;
|
72 | img.onload = async () => {
|
73 | ctx.drawImage(img, 0, 0, markWidth, markHeight);
|
74 | return resolve(canvas.toDataURL());
|
75 | };
|
76 | img.onerror = (error) => {
|
77 | return reject(error);
|
78 | };
|
79 | }
|
80 | else if (content) {
|
81 | const markSize = Number(fontSize) * ratio;
|
82 | ctx.font = `${fontStyle} normal ${fontWeight} ${markSize}px/${markHeight}px ${fontFamily}`;
|
83 | ctx.fillStyle = fontColor;
|
84 | if (Array.isArray(content)) {
|
85 | content === null || content === void 0 ? void 0 : content.forEach((item, index) => ctx.fillText(item, 0, index * 50));
|
86 | }
|
87 | else {
|
88 | ctx.fillText(content, 0, 0);
|
89 | }
|
90 | return resolve(canvas.toDataURL());
|
91 | }
|
92 | }
|
93 | else {
|
94 | return reject('Error: Canvas is not supported in the current environment');
|
95 | }
|
96 | });
|
97 | }
|
98 | }
|
99 |
|
100 | return Watermark;
|
101 |
|
102 | }));
|
103 |
|