zartui 3.1.20 → 3.1.21
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/es/avatar/Avatar.mjs +1 -1
- package/es/icon/index.css +1 -1
- package/es/index.d.ts +1 -1
- package/es/index.mjs +1 -1
- package/es/media-picker/MediaPicker.mjs +1 -4
- package/es/media-picker/util/media-util.d.ts +0 -55
- package/es/media-picker/util/media-util.mjs +1 -203
- package/es/tabs/Tabs.mjs +1 -0
- package/es/tabs/TabsTitle.d.ts +2 -0
- package/es/tabs/TabsTitle.mjs +24 -2
- package/es/uploader/Uploader.d.ts +1 -1
- package/es/uploader/index.d.ts +1 -1
- package/lib/avatar/Avatar.js +1 -1
- package/lib/icon/index.css +1 -1
- package/lib/index.css +1 -1
- package/lib/index.d.ts +1 -1
- package/lib/index.js +1 -1
- package/lib/media-picker/MediaPicker.js +5 -8
- package/lib/media-picker/util/media-util.d.ts +0 -55
- package/lib/media-picker/util/media-util.js +1 -203
- package/lib/tabs/Tabs.js +1 -0
- package/lib/tabs/TabsTitle.d.ts +2 -0
- package/lib/tabs/TabsTitle.js +23 -1
- package/lib/uploader/Uploader.d.ts +1 -1
- package/lib/uploader/index.d.ts +1 -1
- package/lib/web-types.json +1 -1
- package/lib/zartui.cjs.js +57 -1017
- package/lib/zartui.es.js +53 -1013
- package/lib/zartui.js +1116 -648
- package/lib/zartui.min.js +1 -1
- package/package.json +7 -6
- package/es/media-picker/watermark/compress-options.d.ts +0 -5
- package/es/media-picker/watermark/compress-options.mjs +0 -23
- package/es/media-picker/watermark/image-processor.d.ts +0 -12
- package/es/media-picker/watermark/image-processor.mjs +0 -97
- package/es/media-picker/watermark/resize-options.d.ts +0 -4
- package/es/media-picker/watermark/resize-options.mjs +0 -27
- package/es/media-picker/watermark/watermark.d.ts +0 -42
- package/es/media-picker/watermark/watermark.mjs +0 -653
- package/lib/media-picker/watermark/compress-options.d.ts +0 -5
- package/lib/media-picker/watermark/compress-options.js +0 -41
- package/lib/media-picker/watermark/image-processor.d.ts +0 -12
- package/lib/media-picker/watermark/image-processor.js +0 -110
- package/lib/media-picker/watermark/resize-options.d.ts +0 -4
- package/lib/media-picker/watermark/resize-options.js +0 -45
- package/lib/media-picker/watermark/watermark.d.ts +0 -42
- package/lib/media-picker/watermark/watermark.js +0 -664
|
@@ -1,653 +0,0 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
3
|
-
var __publicField = (obj, key, value) => {
|
|
4
|
-
__defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
5
|
-
return value;
|
|
6
|
-
};
|
|
7
|
-
import {
|
|
8
|
-
isAndroid,
|
|
9
|
-
isDef,
|
|
10
|
-
isIOS,
|
|
11
|
-
isRegExp,
|
|
12
|
-
isString,
|
|
13
|
-
isValidString
|
|
14
|
-
} from "../../utils/index.mjs";
|
|
15
|
-
import { parseDecimal, parseNumber } from "../../utils/parse.mjs";
|
|
16
|
-
import { DATE_FORMAT, formatDate } from "@zartui/date-utils";
|
|
17
|
-
const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
|
|
18
|
-
const subString = (str, startIndex, length) => {
|
|
19
|
-
if (!isDef(length)) {
|
|
20
|
-
return str.substring(startIndex);
|
|
21
|
-
}
|
|
22
|
-
return str.substring(startIndex, startIndex + length);
|
|
23
|
-
};
|
|
24
|
-
var WatermarkPosition = /* @__PURE__ */ ((WatermarkPosition2) => {
|
|
25
|
-
WatermarkPosition2["LeftTop"] = "lefttop";
|
|
26
|
-
WatermarkPosition2["CenterTop"] = "centertop";
|
|
27
|
-
WatermarkPosition2["RightTop"] = "righttop";
|
|
28
|
-
WatermarkPosition2["LeftCenter"] = "leftcenter";
|
|
29
|
-
WatermarkPosition2["Center"] = "center";
|
|
30
|
-
WatermarkPosition2["RightCenter"] = "rightcenter";
|
|
31
|
-
WatermarkPosition2["LeftBottom"] = "leftbottom";
|
|
32
|
-
WatermarkPosition2["CenterBottom"] = "centerbottom";
|
|
33
|
-
WatermarkPosition2["RightBottom"] = "rightbottom";
|
|
34
|
-
return WatermarkPosition2;
|
|
35
|
-
})(WatermarkPosition || {});
|
|
36
|
-
var WatermarkFontWeight = /* @__PURE__ */ ((WatermarkFontWeight2) => {
|
|
37
|
-
WatermarkFontWeight2["Normal"] = "normal";
|
|
38
|
-
WatermarkFontWeight2["Bold"] = "bold";
|
|
39
|
-
return WatermarkFontWeight2;
|
|
40
|
-
})(WatermarkFontWeight || {});
|
|
41
|
-
var WatermarkContent = /* @__PURE__ */ ((WatermarkContent2) => {
|
|
42
|
-
WatermarkContent2["Raw"] = "";
|
|
43
|
-
WatermarkContent2["Date"] = "date{(.*?)}|date";
|
|
44
|
-
WatermarkContent2["Time"] = "time";
|
|
45
|
-
WatermarkContent2["Address"] = "address";
|
|
46
|
-
WatermarkContent2["HumanName"] = "humanname";
|
|
47
|
-
WatermarkContent2["ProjectName"] = "projectName";
|
|
48
|
-
WatermarkContent2["Logo"] = "{logo}";
|
|
49
|
-
return WatermarkContent2;
|
|
50
|
-
})(WatermarkContent || {});
|
|
51
|
-
const ColorMap = {
|
|
52
|
-
transparent: "#00000000",
|
|
53
|
-
white: "#FFFFFF",
|
|
54
|
-
black: "#000000",
|
|
55
|
-
darkgray: "#444444",
|
|
56
|
-
gray: "#888888",
|
|
57
|
-
lightgray: "#CCCCCC",
|
|
58
|
-
darkgrey: "#444444",
|
|
59
|
-
grey: "#888888",
|
|
60
|
-
lightgrey: "#CCCCCC",
|
|
61
|
-
red: "#FF0000",
|
|
62
|
-
green: "#00FF00",
|
|
63
|
-
blue: "#0000FF",
|
|
64
|
-
yellow: "#FFFF00",
|
|
65
|
-
cyan: "#00FFFF",
|
|
66
|
-
magenta: "#FF00FF",
|
|
67
|
-
aqua: "#00FFFF",
|
|
68
|
-
fuchsia: "#FF00FF",
|
|
69
|
-
lime: "#00FF00",
|
|
70
|
-
maroon: "#800000",
|
|
71
|
-
navy: "#000080",
|
|
72
|
-
olive: "#808000",
|
|
73
|
-
purple: "#800080",
|
|
74
|
-
silver: "#C0C0C0",
|
|
75
|
-
teal: "#008080",
|
|
76
|
-
orange: "#FF9933"
|
|
77
|
-
};
|
|
78
|
-
function getColorValue(key) {
|
|
79
|
-
for (const k of Object.getOwnPropertyNames(ColorMap)) {
|
|
80
|
-
if (k === key) {
|
|
81
|
-
return ColorMap[k];
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
return null;
|
|
85
|
-
}
|
|
86
|
-
const CONTENT_PADDING = 10;
|
|
87
|
-
const DEFAULT_PADDING = 2;
|
|
88
|
-
const DEFAULT_FONT_SIZE = 25;
|
|
89
|
-
const DEFAULT_CANVAS_SIZE = 480;
|
|
90
|
-
const DEFAULT_BACKGROUND_OPACITY = 128;
|
|
91
|
-
function getHeitiFontFamily() {
|
|
92
|
-
if (isAndroid()) {
|
|
93
|
-
return "'Roboto Black', 'Droid Sans'";
|
|
94
|
-
} else if (isIOS()) {
|
|
95
|
-
return "'PingFang SC Medium'";
|
|
96
|
-
}
|
|
97
|
-
return '"PingFang SC Medium", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif';
|
|
98
|
-
}
|
|
99
|
-
function parseWatermarkStyle(styleString, canvasSize) {
|
|
100
|
-
if (!isValidString(styleString)) {
|
|
101
|
-
return null;
|
|
102
|
-
}
|
|
103
|
-
const styleParts = styleString.split("$");
|
|
104
|
-
if (styleParts.length <= 0) {
|
|
105
|
-
return null;
|
|
106
|
-
}
|
|
107
|
-
const scale = Math.min(canvasSize.width, canvasSize.height) / DEFAULT_CANVAS_SIZE;
|
|
108
|
-
if (parseNumber(styleParts[0], -1) !== -1) {
|
|
109
|
-
const fontSize2 = Math.round(
|
|
110
|
-
parseDecimal(styleParts[0], DEFAULT_FONT_SIZE) * scale
|
|
111
|
-
);
|
|
112
|
-
let position2 = "lefttop" /* LeftTop */;
|
|
113
|
-
if (styleParts[1]) {
|
|
114
|
-
position2 = styleParts[1];
|
|
115
|
-
}
|
|
116
|
-
let paddingTop2 = DEFAULT_PADDING * scale;
|
|
117
|
-
let paddingBottom2 = DEFAULT_PADDING * scale;
|
|
118
|
-
if (styleParts[2]) {
|
|
119
|
-
const paddingParts = styleParts[2].split("_");
|
|
120
|
-
paddingTop2 = parseNumber(paddingParts[0], DEFAULT_PADDING) * scale;
|
|
121
|
-
if (paddingParts[1]) {
|
|
122
|
-
paddingBottom2 = parseNumber(paddingParts[1], DEFAULT_PADDING) * scale;
|
|
123
|
-
}
|
|
124
|
-
}
|
|
125
|
-
const fontName2 = getHeitiFontFamily();
|
|
126
|
-
const fontWeight2 = "normal" /* Normal */;
|
|
127
|
-
const fontColor2 = ColorMap.transparent;
|
|
128
|
-
const backgroundColor2 = ColorMap.transparent;
|
|
129
|
-
const backgroundOpacity2 = 128;
|
|
130
|
-
return {
|
|
131
|
-
fontName: fontName2,
|
|
132
|
-
fontWeight: fontWeight2,
|
|
133
|
-
fontColor: fontColor2,
|
|
134
|
-
fontSize: fontSize2,
|
|
135
|
-
backgroundColor: backgroundColor2,
|
|
136
|
-
backgroundOpacity: backgroundOpacity2,
|
|
137
|
-
paddingTop: paddingTop2,
|
|
138
|
-
paddingBottom: paddingBottom2,
|
|
139
|
-
position: position2,
|
|
140
|
-
scale,
|
|
141
|
-
simplified: true
|
|
142
|
-
};
|
|
143
|
-
}
|
|
144
|
-
const fontName = styleParts[0] + ", " + getHeitiFontFamily();
|
|
145
|
-
let fontWeight = "normal" /* Normal */;
|
|
146
|
-
if (styleParts[1]) {
|
|
147
|
-
fontWeight = styleParts[1];
|
|
148
|
-
}
|
|
149
|
-
let fontColor = ColorMap.white;
|
|
150
|
-
if (styleParts[2]) {
|
|
151
|
-
const color = getColorValue(styleParts[2]);
|
|
152
|
-
if (color) {
|
|
153
|
-
fontColor = color;
|
|
154
|
-
}
|
|
155
|
-
}
|
|
156
|
-
let fontSize = Math.round(DEFAULT_FONT_SIZE * scale);
|
|
157
|
-
if (styleParts[3]) {
|
|
158
|
-
fontSize = Math.round(
|
|
159
|
-
parseDecimal(styleParts[3], DEFAULT_FONT_SIZE) * scale
|
|
160
|
-
);
|
|
161
|
-
}
|
|
162
|
-
let backgroundColor = ColorMap.blue;
|
|
163
|
-
if (styleParts[4]) {
|
|
164
|
-
const color = getColorValue(styleParts[4]);
|
|
165
|
-
if (color) {
|
|
166
|
-
backgroundColor = color;
|
|
167
|
-
}
|
|
168
|
-
}
|
|
169
|
-
let position = "lefttop" /* LeftTop */;
|
|
170
|
-
if (styleParts[5]) {
|
|
171
|
-
position = styleParts[5];
|
|
172
|
-
}
|
|
173
|
-
let backgroundOpacity = 255;
|
|
174
|
-
if (styleParts[6]) {
|
|
175
|
-
let opacity = parseNumber(styleParts[6], DEFAULT_BACKGROUND_OPACITY);
|
|
176
|
-
opacity = clamp(opacity, 0, 255);
|
|
177
|
-
backgroundOpacity = opacity;
|
|
178
|
-
}
|
|
179
|
-
let paddingTop = DEFAULT_PADDING * scale;
|
|
180
|
-
let paddingBottom = DEFAULT_PADDING * scale;
|
|
181
|
-
if (styleParts[7]) {
|
|
182
|
-
const paddingParts = styleParts[7].split("_");
|
|
183
|
-
paddingTop = parseNumber(paddingParts[0], DEFAULT_PADDING) * scale;
|
|
184
|
-
if (paddingParts[1]) {
|
|
185
|
-
paddingBottom = parseNumber(paddingParts[1], DEFAULT_PADDING) * scale;
|
|
186
|
-
}
|
|
187
|
-
}
|
|
188
|
-
return {
|
|
189
|
-
fontName,
|
|
190
|
-
fontWeight,
|
|
191
|
-
fontColor,
|
|
192
|
-
fontSize,
|
|
193
|
-
backgroundColor,
|
|
194
|
-
backgroundOpacity,
|
|
195
|
-
paddingTop,
|
|
196
|
-
paddingBottom,
|
|
197
|
-
position,
|
|
198
|
-
scale,
|
|
199
|
-
simplified: false
|
|
200
|
-
};
|
|
201
|
-
}
|
|
202
|
-
class TextScanner {
|
|
203
|
-
/**
|
|
204
|
-
* The content to scan
|
|
205
|
-
* @param text
|
|
206
|
-
*/
|
|
207
|
-
constructor(text) {
|
|
208
|
-
__publicField(this, "text");
|
|
209
|
-
__publicField(this, "cursor");
|
|
210
|
-
this.text = text;
|
|
211
|
-
this.cursor = 0;
|
|
212
|
-
}
|
|
213
|
-
hasNext(obj) {
|
|
214
|
-
if (!isDef(obj)) {
|
|
215
|
-
return this.cursor < this.text.length;
|
|
216
|
-
} else if (isString(obj)) {
|
|
217
|
-
const str = obj;
|
|
218
|
-
const current = subString(this.text, this.cursor, str.length);
|
|
219
|
-
if (current === str) {
|
|
220
|
-
return true;
|
|
221
|
-
}
|
|
222
|
-
} else if (isRegExp(obj)) {
|
|
223
|
-
const regex = obj;
|
|
224
|
-
const subText = subString(this.text, this.cursor);
|
|
225
|
-
const matchResults = subText.match(regex);
|
|
226
|
-
if (matchResults) {
|
|
227
|
-
if (matchResults.index === 0) {
|
|
228
|
-
return true;
|
|
229
|
-
}
|
|
230
|
-
}
|
|
231
|
-
}
|
|
232
|
-
return false;
|
|
233
|
-
}
|
|
234
|
-
next(obj) {
|
|
235
|
-
if (!isDef(obj)) {
|
|
236
|
-
return subString(this.text, this.cursor, 1);
|
|
237
|
-
} else if (isString(obj)) {
|
|
238
|
-
const str = obj;
|
|
239
|
-
if (subString(this.text, this.cursor, str.length) === str) {
|
|
240
|
-
return str;
|
|
241
|
-
}
|
|
242
|
-
} else if (isRegExp(obj)) {
|
|
243
|
-
const regex = obj;
|
|
244
|
-
const subText = subString(this.text, this.cursor);
|
|
245
|
-
const matchResults = subText.match(regex);
|
|
246
|
-
if (matchResults) {
|
|
247
|
-
if (matchResults.index === 0) {
|
|
248
|
-
return matchResults;
|
|
249
|
-
}
|
|
250
|
-
}
|
|
251
|
-
}
|
|
252
|
-
return null;
|
|
253
|
-
}
|
|
254
|
-
skip(obj) {
|
|
255
|
-
if (!isDef(obj)) {
|
|
256
|
-
this.cursor += 1;
|
|
257
|
-
} else if (isValidString(obj)) {
|
|
258
|
-
const str = obj;
|
|
259
|
-
this.cursor += str.length;
|
|
260
|
-
}
|
|
261
|
-
return this;
|
|
262
|
-
}
|
|
263
|
-
}
|
|
264
|
-
function buildContent(contentConfigString, watermarkContext) {
|
|
265
|
-
let content = "";
|
|
266
|
-
const scanner = new TextScanner(contentConfigString);
|
|
267
|
-
let steps = 0;
|
|
268
|
-
while (scanner.hasNext() && steps < contentConfigString.length) {
|
|
269
|
-
const dateRegex = new RegExp("date{(.*?)}|date" /* Date */);
|
|
270
|
-
if (scanner.hasNext(dateRegex)) {
|
|
271
|
-
const regexResult = scanner.next(dateRegex);
|
|
272
|
-
if (regexResult) {
|
|
273
|
-
const matchResults = regexResult;
|
|
274
|
-
let format = DATE_FORMAT.FORMAT_YMD;
|
|
275
|
-
if (matchResults && matchResults.length >= 2) {
|
|
276
|
-
if (isValidString(matchResults[1])) {
|
|
277
|
-
format = matchResults[1];
|
|
278
|
-
}
|
|
279
|
-
}
|
|
280
|
-
if (watermarkContext) {
|
|
281
|
-
content += formatDate(watermarkContext.watermarkTime, format);
|
|
282
|
-
}
|
|
283
|
-
scanner.skip(matchResults.input);
|
|
284
|
-
}
|
|
285
|
-
} else if (scanner.hasNext("time" /* Time */)) {
|
|
286
|
-
if (watermarkContext) {
|
|
287
|
-
const value = formatDate(
|
|
288
|
-
watermarkContext.watermarkTime,
|
|
289
|
-
DATE_FORMAT.FORMAT_HM
|
|
290
|
-
);
|
|
291
|
-
content += value;
|
|
292
|
-
}
|
|
293
|
-
scanner.skip("time" /* Time */);
|
|
294
|
-
} else if (scanner.hasNext("address" /* Address */)) {
|
|
295
|
-
if (watermarkContext) {
|
|
296
|
-
content += watermarkContext.address;
|
|
297
|
-
}
|
|
298
|
-
scanner.skip("address" /* Address */);
|
|
299
|
-
} else if (scanner.hasNext("humanname" /* HumanName */)) {
|
|
300
|
-
if (watermarkContext) {
|
|
301
|
-
content += watermarkContext.humanName;
|
|
302
|
-
}
|
|
303
|
-
scanner.skip("humanname" /* HumanName */);
|
|
304
|
-
} else if (scanner.hasNext("projectName" /* ProjectName */)) {
|
|
305
|
-
if (watermarkContext) {
|
|
306
|
-
content += watermarkContext.projectName;
|
|
307
|
-
}
|
|
308
|
-
scanner.skip("projectName" /* ProjectName */);
|
|
309
|
-
} else if (scanner.hasNext("{logo}" /* Logo */)) {
|
|
310
|
-
console.error("watermark logo ignored");
|
|
311
|
-
scanner.skip("{logo}" /* Logo */);
|
|
312
|
-
} else {
|
|
313
|
-
const nextChar = scanner.next();
|
|
314
|
-
if (isString(nextChar)) {
|
|
315
|
-
content += nextChar;
|
|
316
|
-
}
|
|
317
|
-
scanner.skip();
|
|
318
|
-
}
|
|
319
|
-
steps++;
|
|
320
|
-
}
|
|
321
|
-
return content;
|
|
322
|
-
}
|
|
323
|
-
function parseWatermarks(watermarkConfigString, canvasSize, watermarkContext) {
|
|
324
|
-
const watermarks = [];
|
|
325
|
-
const configStringArray = watermarkConfigString.split("###");
|
|
326
|
-
for (let i = 0; i < configStringArray.length; i++) {
|
|
327
|
-
const configString = configStringArray[i];
|
|
328
|
-
const configParts = configString.split("*#*");
|
|
329
|
-
if (configParts.length === 2) {
|
|
330
|
-
const styleString = configParts[0];
|
|
331
|
-
const contentString = configParts[1];
|
|
332
|
-
const style = parseWatermarkStyle(styleString, canvasSize);
|
|
333
|
-
const content = buildContent(contentString, watermarkContext);
|
|
334
|
-
if (style && content) {
|
|
335
|
-
const watermark = {
|
|
336
|
-
content,
|
|
337
|
-
style
|
|
338
|
-
};
|
|
339
|
-
watermarks.push(watermark);
|
|
340
|
-
}
|
|
341
|
-
}
|
|
342
|
-
}
|
|
343
|
-
return watermarks;
|
|
344
|
-
}
|
|
345
|
-
function getCanvasScale(canvas, len) {
|
|
346
|
-
const min = Math.min(canvas.width, canvas.height);
|
|
347
|
-
return min / DEFAULT_CANVAS_SIZE * len;
|
|
348
|
-
}
|
|
349
|
-
function buildTile(canvas, content, style) {
|
|
350
|
-
const origin = {
|
|
351
|
-
x: 0,
|
|
352
|
-
y: 0
|
|
353
|
-
};
|
|
354
|
-
const size = {
|
|
355
|
-
width: 0,
|
|
356
|
-
height: 0
|
|
357
|
-
};
|
|
358
|
-
const lines = [];
|
|
359
|
-
const ctx = canvas.getContext("2d");
|
|
360
|
-
if (!ctx) {
|
|
361
|
-
return null;
|
|
362
|
-
}
|
|
363
|
-
ctx.font = `${style.fontWeight} ${style.fontSize}px ${style.fontName}`;
|
|
364
|
-
const contentPadding = getCanvasScale(canvas, CONTENT_PADDING);
|
|
365
|
-
const contentWidth = canvas.width - contentPadding * 2;
|
|
366
|
-
const lineHeight = ctx.measureText("M").width;
|
|
367
|
-
const lineWidths = [];
|
|
368
|
-
let temp = "";
|
|
369
|
-
let lastWidth = 0;
|
|
370
|
-
for (let i = 0; i < content.length; i++) {
|
|
371
|
-
const lineWidth = ctx.measureText(temp).width;
|
|
372
|
-
if (lineWidth >= contentWidth) {
|
|
373
|
-
lines.push(temp);
|
|
374
|
-
lineWidths.push(lineWidth);
|
|
375
|
-
temp = "";
|
|
376
|
-
}
|
|
377
|
-
lastWidth = lineWidth;
|
|
378
|
-
temp += content[i];
|
|
379
|
-
}
|
|
380
|
-
lines.push(temp);
|
|
381
|
-
lineWidths.push(lastWidth);
|
|
382
|
-
size.width = contentWidth;
|
|
383
|
-
size.height = lines.length * lineHeight;
|
|
384
|
-
return { origin, size, lineHeight, lineWidths, lines, style };
|
|
385
|
-
}
|
|
386
|
-
function getAxisPoint(canvasWidth, origin, style) {
|
|
387
|
-
const padding = (CONTENT_PADDING + DEFAULT_PADDING) * style.scale;
|
|
388
|
-
let axisPoint = { x: padding, y: origin.y };
|
|
389
|
-
if (style.position.startsWith("center")) {
|
|
390
|
-
axisPoint = { x: canvasWidth / 2, y: origin.y };
|
|
391
|
-
} else if (style.position.startsWith("right")) {
|
|
392
|
-
axisPoint = { x: canvasWidth - padding, y: origin.y };
|
|
393
|
-
}
|
|
394
|
-
return axisPoint;
|
|
395
|
-
}
|
|
396
|
-
function getTextAlign(style) {
|
|
397
|
-
let align = "left";
|
|
398
|
-
if (style.position.startsWith("center")) {
|
|
399
|
-
align = "center";
|
|
400
|
-
} else if (style.position.startsWith("right")) {
|
|
401
|
-
align = "right";
|
|
402
|
-
}
|
|
403
|
-
return align;
|
|
404
|
-
}
|
|
405
|
-
function drawLine(canvas, line, origin, style) {
|
|
406
|
-
const ctx = canvas.getContext("2d");
|
|
407
|
-
if (!ctx) {
|
|
408
|
-
return;
|
|
409
|
-
}
|
|
410
|
-
ctx.textBaseline = "top";
|
|
411
|
-
ctx.font = `${style.fontWeight} ${style.fontSize}px ${style.fontName}`;
|
|
412
|
-
const axisPoint = getAxisPoint(canvas.width, origin, style);
|
|
413
|
-
ctx.textAlign = getTextAlign(style);
|
|
414
|
-
if (style.simplified) {
|
|
415
|
-
ctx.shadowBlur = 4;
|
|
416
|
-
ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
|
|
417
|
-
const offset = clamp(style.fontSize / 40, 2, 4);
|
|
418
|
-
ctx.shadowOffsetY = offset;
|
|
419
|
-
ctx.shadowOffsetX = offset;
|
|
420
|
-
ctx.fillStyle = "rgba(255,255,255, 0.5)";
|
|
421
|
-
} else {
|
|
422
|
-
ctx.fillStyle = style.fontColor;
|
|
423
|
-
}
|
|
424
|
-
ctx.fillText(line, Math.round(axisPoint.x), Math.round(axisPoint.y));
|
|
425
|
-
}
|
|
426
|
-
function hexToRGB(hex, alpha) {
|
|
427
|
-
const r = parseInt(hex.slice(1, 3), 16);
|
|
428
|
-
const g = parseInt(hex.slice(3, 5), 16);
|
|
429
|
-
const b = parseInt(hex.slice(5, 7), 16);
|
|
430
|
-
if (alpha) {
|
|
431
|
-
return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")";
|
|
432
|
-
}
|
|
433
|
-
return "rgb(" + r + ", " + g + ", " + b + ")";
|
|
434
|
-
}
|
|
435
|
-
function drawBackground(canvas, tile) {
|
|
436
|
-
const ctx = canvas.getContext("2d");
|
|
437
|
-
if (!ctx) {
|
|
438
|
-
return;
|
|
439
|
-
}
|
|
440
|
-
let { backgroundColor } = tile.style;
|
|
441
|
-
let backgroundOpacity = parseDecimal(
|
|
442
|
-
String(tile.style.backgroundOpacity),
|
|
443
|
-
-1
|
|
444
|
-
);
|
|
445
|
-
if (backgroundOpacity > 255) {
|
|
446
|
-
backgroundOpacity = 255;
|
|
447
|
-
}
|
|
448
|
-
const paddingTop = 2;
|
|
449
|
-
const paddingBottom = 10;
|
|
450
|
-
if (backgroundColor !== "transparent") {
|
|
451
|
-
if (backgroundColor.startsWith("#") && backgroundOpacity >= 0) {
|
|
452
|
-
backgroundColor = hexToRGB(backgroundColor, backgroundOpacity / 255);
|
|
453
|
-
}
|
|
454
|
-
ctx.fillStyle = backgroundColor;
|
|
455
|
-
const { style } = tile;
|
|
456
|
-
const padding = (CONTENT_PADDING + DEFAULT_PADDING) * style.scale;
|
|
457
|
-
const paddingScale = tile.style.fontSize / DEFAULT_FONT_SIZE;
|
|
458
|
-
for (let j = 0; j < tile.lineWidths.length; j++) {
|
|
459
|
-
const { lineHeight } = tile;
|
|
460
|
-
const lineWidth = tile.lineWidths[j];
|
|
461
|
-
let paddingRight = 30 * paddingScale;
|
|
462
|
-
let paddingLeft = 10 * paddingScale;
|
|
463
|
-
let axisPoint = {
|
|
464
|
-
x: padding - paddingLeft,
|
|
465
|
-
y: tile.origin.y
|
|
466
|
-
};
|
|
467
|
-
if (style.position.startsWith("center")) {
|
|
468
|
-
paddingLeft = 20 * paddingScale;
|
|
469
|
-
paddingRight = 20 * paddingScale;
|
|
470
|
-
axisPoint = {
|
|
471
|
-
x: (canvas.width - lineWidth) / 2 - paddingLeft,
|
|
472
|
-
y: tile.origin.y
|
|
473
|
-
};
|
|
474
|
-
} else if (style.position.startsWith("right")) {
|
|
475
|
-
paddingLeft = 30 * paddingScale;
|
|
476
|
-
paddingRight = 10 * paddingScale;
|
|
477
|
-
axisPoint = {
|
|
478
|
-
x: canvas.width - lineWidth - padding - paddingLeft,
|
|
479
|
-
y: tile.origin.y
|
|
480
|
-
};
|
|
481
|
-
}
|
|
482
|
-
if (j === 0) {
|
|
483
|
-
ctx.fillRect(
|
|
484
|
-
axisPoint.x,
|
|
485
|
-
axisPoint.y - paddingTop > 0 ? axisPoint.y - paddingTop : 0,
|
|
486
|
-
paddingLeft + lineWidth + paddingRight,
|
|
487
|
-
paddingTop
|
|
488
|
-
);
|
|
489
|
-
}
|
|
490
|
-
ctx.fillRect(
|
|
491
|
-
axisPoint.x,
|
|
492
|
-
axisPoint.y + j * lineHeight,
|
|
493
|
-
paddingLeft + lineWidth + paddingRight,
|
|
494
|
-
lineHeight
|
|
495
|
-
);
|
|
496
|
-
if (j === tile.lineWidths.length - 1) {
|
|
497
|
-
ctx.fillRect(
|
|
498
|
-
axisPoint.x,
|
|
499
|
-
axisPoint.y + (j + 1) * lineHeight,
|
|
500
|
-
paddingLeft + lineWidth + paddingRight,
|
|
501
|
-
paddingBottom
|
|
502
|
-
);
|
|
503
|
-
}
|
|
504
|
-
}
|
|
505
|
-
}
|
|
506
|
-
}
|
|
507
|
-
function drawTile(canvas, tile) {
|
|
508
|
-
if (!tile.style.simplified) {
|
|
509
|
-
drawBackground(canvas, tile);
|
|
510
|
-
}
|
|
511
|
-
for (let i = 0; i < tile.lines.length; i++) {
|
|
512
|
-
const origin = {
|
|
513
|
-
x: tile.origin.x,
|
|
514
|
-
y: i * tile.lineHeight + tile.origin.y
|
|
515
|
-
};
|
|
516
|
-
drawLine(canvas, tile.lines[i], origin, tile.style);
|
|
517
|
-
}
|
|
518
|
-
}
|
|
519
|
-
var GroupPosition = /* @__PURE__ */ ((GroupPosition2) => {
|
|
520
|
-
GroupPosition2["Top"] = "top";
|
|
521
|
-
GroupPosition2["Center"] = "center";
|
|
522
|
-
GroupPosition2["Bottom"] = "bottom";
|
|
523
|
-
return GroupPosition2;
|
|
524
|
-
})(GroupPosition || {});
|
|
525
|
-
function drawGroupedWatermarks(canvas, watermarks, groupPosition) {
|
|
526
|
-
if (!watermarks || watermarks.length === 0) {
|
|
527
|
-
return;
|
|
528
|
-
}
|
|
529
|
-
const tiles = [];
|
|
530
|
-
let totalHeight = 0;
|
|
531
|
-
for (let i = 0; i < watermarks.length; i++) {
|
|
532
|
-
const watermark = watermarks[i];
|
|
533
|
-
const tile = buildTile(canvas, watermark.content, watermark.style);
|
|
534
|
-
if (tile) {
|
|
535
|
-
tiles.push(tile);
|
|
536
|
-
totalHeight += tile.size.height;
|
|
537
|
-
}
|
|
538
|
-
}
|
|
539
|
-
if (totalHeight <= 0) {
|
|
540
|
-
console.error("watermarks height " + totalHeight);
|
|
541
|
-
console.error(JSON.stringify(watermarks));
|
|
542
|
-
return;
|
|
543
|
-
}
|
|
544
|
-
const contentPadding = getCanvasScale(canvas, CONTENT_PADDING);
|
|
545
|
-
let baseOrigin = { x: contentPadding, y: contentPadding };
|
|
546
|
-
if (groupPosition === "center" /* Center */) {
|
|
547
|
-
baseOrigin = {
|
|
548
|
-
x: contentPadding,
|
|
549
|
-
y: Math.round((canvas.height - totalHeight) / 2)
|
|
550
|
-
};
|
|
551
|
-
} else if (groupPosition === "bottom" /* Bottom */) {
|
|
552
|
-
baseOrigin = {
|
|
553
|
-
x: contentPadding,
|
|
554
|
-
y: canvas.height - totalHeight - contentPadding
|
|
555
|
-
};
|
|
556
|
-
} else if (groupPosition === "top" /* Top */) {
|
|
557
|
-
baseOrigin = { x: contentPadding, y: contentPadding };
|
|
558
|
-
}
|
|
559
|
-
let lastMarginTop = 0;
|
|
560
|
-
for (let i = 0; i < tiles.length; i++) {
|
|
561
|
-
const tile = tiles[i];
|
|
562
|
-
lastMarginTop += tile.style.paddingTop;
|
|
563
|
-
tile.origin = {
|
|
564
|
-
x: tile.origin.x + baseOrigin.x,
|
|
565
|
-
y: lastMarginTop + baseOrigin.y
|
|
566
|
-
};
|
|
567
|
-
lastMarginTop += tile.size.height;
|
|
568
|
-
lastMarginTop += tile.style.paddingBottom;
|
|
569
|
-
}
|
|
570
|
-
for (let i = 0; i < tiles.length; i++) {
|
|
571
|
-
const tile = tiles[i];
|
|
572
|
-
drawTile(canvas, tile);
|
|
573
|
-
}
|
|
574
|
-
}
|
|
575
|
-
function groupingWatermarks(watermarks) {
|
|
576
|
-
const topList = [];
|
|
577
|
-
const centerList = [];
|
|
578
|
-
const bottomList = [];
|
|
579
|
-
for (let i = 0; i < watermarks.length; i++) {
|
|
580
|
-
const watermark = watermarks[i];
|
|
581
|
-
if (watermark.style.position.endsWith("top")) {
|
|
582
|
-
topList.push(watermark);
|
|
583
|
-
} else if (watermark.style.position.endsWith("center")) {
|
|
584
|
-
centerList.push(watermark);
|
|
585
|
-
} else if (watermark.style.position.endsWith("bottom")) {
|
|
586
|
-
bottomList.push(watermark);
|
|
587
|
-
}
|
|
588
|
-
}
|
|
589
|
-
return {
|
|
590
|
-
["top" /* Top */]: topList,
|
|
591
|
-
["center" /* Center */]: centerList,
|
|
592
|
-
["bottom" /* Bottom */]: bottomList
|
|
593
|
-
};
|
|
594
|
-
}
|
|
595
|
-
function renderWatermark(canvas, options) {
|
|
596
|
-
if (!options.enabled || options.watermarkConfigString === "no") {
|
|
597
|
-
return Promise.resolve(canvas);
|
|
598
|
-
}
|
|
599
|
-
let { watermarkConfigString } = options;
|
|
600
|
-
if (!isDef(watermarkConfigString) || watermarkConfigString === "default") {
|
|
601
|
-
watermarkConfigString = "50$lefttop$50*#*time###25$lefttop*#*date";
|
|
602
|
-
}
|
|
603
|
-
const watermarks = parseWatermarks(
|
|
604
|
-
watermarkConfigString,
|
|
605
|
-
{
|
|
606
|
-
width: canvas.width,
|
|
607
|
-
height: canvas.height
|
|
608
|
-
},
|
|
609
|
-
options.context
|
|
610
|
-
);
|
|
611
|
-
const groupedWatermarks = groupingWatermarks(watermarks);
|
|
612
|
-
drawGroupedWatermarks(
|
|
613
|
-
canvas,
|
|
614
|
-
groupedWatermarks["top" /* Top */],
|
|
615
|
-
"top" /* Top */
|
|
616
|
-
);
|
|
617
|
-
drawGroupedWatermarks(
|
|
618
|
-
canvas,
|
|
619
|
-
groupedWatermarks["center" /* Center */],
|
|
620
|
-
"center" /* Center */
|
|
621
|
-
);
|
|
622
|
-
drawGroupedWatermarks(
|
|
623
|
-
canvas,
|
|
624
|
-
groupedWatermarks["bottom" /* Bottom */],
|
|
625
|
-
"bottom" /* Bottom */
|
|
626
|
-
);
|
|
627
|
-
return Promise.resolve(canvas);
|
|
628
|
-
}
|
|
629
|
-
function checkWatermarkConfigSupported(watermarkConfigString) {
|
|
630
|
-
if (watermarkConfigString.indexOf("{logo}") > -1) {
|
|
631
|
-
console.error("\u6C34\u5370\u4E0D\u652F\u6301logo");
|
|
632
|
-
return false;
|
|
633
|
-
}
|
|
634
|
-
const configStringArray = watermarkConfigString.split("###");
|
|
635
|
-
for (let i = 0; i < configStringArray.length; i++) {
|
|
636
|
-
const configString = configStringArray[i];
|
|
637
|
-
const configParts = configString.split("*#*");
|
|
638
|
-
if (configParts.length === 2) {
|
|
639
|
-
const styleString = configParts[0];
|
|
640
|
-
const styleParts = styleString.split("$");
|
|
641
|
-
if (styleParts.length <= 0) {
|
|
642
|
-
console.error("\u6C34\u5370\u914D\u7F6E\u4E0D\u5408\u6CD5");
|
|
643
|
-
return false;
|
|
644
|
-
}
|
|
645
|
-
}
|
|
646
|
-
}
|
|
647
|
-
return true;
|
|
648
|
-
}
|
|
649
|
-
export {
|
|
650
|
-
TextScanner,
|
|
651
|
-
checkWatermarkConfigSupported,
|
|
652
|
-
renderWatermark
|
|
653
|
-
};
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
6
|
-
var __export = (target, all) => {
|
|
7
|
-
for (var name in all)
|
|
8
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
-
};
|
|
10
|
-
var __copyProps = (to, from, except, desc) => {
|
|
11
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
-
for (let key of __getOwnPropNames(from))
|
|
13
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
-
}
|
|
16
|
-
return to;
|
|
17
|
-
};
|
|
18
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
-
var __publicField = (obj, key, value) => {
|
|
20
|
-
__defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
21
|
-
return value;
|
|
22
|
-
};
|
|
23
|
-
var stdin_exports = {};
|
|
24
|
-
__export(stdin_exports, {
|
|
25
|
-
CompressOptions: () => CompressOptions
|
|
26
|
-
});
|
|
27
|
-
module.exports = __toCommonJS(stdin_exports);
|
|
28
|
-
var import_utils = require("../../utils");
|
|
29
|
-
var import_media_util = require("../util/media-util");
|
|
30
|
-
class CompressOptions {
|
|
31
|
-
constructor(photoFileSizeLimit) {
|
|
32
|
-
// 图片大小限制,单位kb
|
|
33
|
-
__publicField(this, "photoFileSizeLimit");
|
|
34
|
-
__publicField(this, "checkOrientation", true);
|
|
35
|
-
if (!(0, import_utils.isDef)(photoFileSizeLimit)) {
|
|
36
|
-
this.photoFileSizeLimit = import_media_util.PHOTO_FILE_SIZE_LIMIT;
|
|
37
|
-
} else {
|
|
38
|
-
this.photoFileSizeLimit = photoFileSizeLimit;
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { ResizeOptions } from './resize-options';
|
|
2
|
-
import { WatermarkOptions } from './watermark';
|
|
3
|
-
import { CompressOptions } from './compress-options';
|
|
4
|
-
export declare class ImageProcessor {
|
|
5
|
-
private file;
|
|
6
|
-
private resizeOptions;
|
|
7
|
-
private watermarkOptions;
|
|
8
|
-
private compressOptions;
|
|
9
|
-
constructor(file: File, resizeOptions: ResizeOptions, watermarkOptions: WatermarkOptions, compressOptions: CompressOptions);
|
|
10
|
-
process(): Promise<void | File>;
|
|
11
|
-
compress(canvas: HTMLCanvasElement, filename: string, lastModified: number, type: string, quality: number): Promise<File>;
|
|
12
|
-
}
|