zartui 3.1.19 → 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/README.md +23 -23
- 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/lazyload/vue-lazyload/index.d.ts +55 -55
- package/es/media-picker/MediaPicker.d.ts +14 -1
- package/es/media-picker/MediaPicker.mjs +45 -6
- package/es/media-picker/index.d.ts +10 -1
- package/es/media-picker/type.d.ts +1 -0
- 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/es/vue-sfc-shim.d.ts +6 -6
- package/es/vue-tsx-shim.d.ts +23 -23
- 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/lazyload/vue-lazyload/index.d.ts +55 -55
- package/lib/media-picker/MediaPicker.d.ts +14 -1
- package/lib/media-picker/MediaPicker.js +49 -10
- package/lib/media-picker/index.d.ts +10 -1
- package/lib/media-picker/type.d.ts +1 -0
- 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/vue-sfc-shim.d.ts +6 -6
- package/lib/vue-tsx-shim.d.ts +23 -23
- package/lib/web-types.json +1 -1
- package/lib/zartui.cjs.js +101 -1019
- package/lib/zartui.es.js +97 -1015
- package/lib/zartui.js +1159 -649
- 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
package/lib/zartui.es.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { unref, ref, reactive, defineComponent, computed, createVNode, watch, onActivated, onDeactivated, onBeforeUnmount, provide, watchEffect, inject, mergeProps, getCurrentInstance, Transition, withDirectives, vShow, nextTick, onMounted, Teleport, Fragment, resolveDirective, onBeforeUpdate, onUnmounted, createApp, createTextVNode, withKeys, onUpdated, h } from "vue";
|
|
2
2
|
import { useWindowSize, useRect, onMountedOrActivated, getScrollParent, useEventListener, useToggle, raf, useScrollParent, useChildren, usePageVisibility, doubleRaf, useParent, useCustomFieldValue, CUSTOM_FIELD_INJECTION_KEY, useClickAway, inBrowser as inBrowser$1 } from "@zartui/use";
|
|
3
|
-
import {
|
|
3
|
+
import { ResizeOptions, CompressOptions, checkWatermarkConfigSupported, ImageProcessor } from "@egova-mobile/app-media-utils";
|
|
4
4
|
import { autoUpdate, computePosition, offset, shift, limitShift, flip, hide, arrow } from "@floating-ui/vue";
|
|
5
5
|
import { offsetModifier, createPopper } from "@zartui/popperjs";
|
|
6
6
|
const isDef = (val) => val !== void 0 && val !== null;
|
|
@@ -9,20 +9,8 @@ const isObject = (val) => val !== null && typeof val === "object";
|
|
|
9
9
|
const isPromise = (val) => isObject(val) && isFunction(val.then) && isFunction(val.catch);
|
|
10
10
|
const isDate = (val) => Object.prototype.toString.call(val) === "[object Date]" && !Number.isNaN(val.getTime());
|
|
11
11
|
const isNumeric = (val) => typeof val === "number" || /^\d+(\.\d+)?$/.test(val);
|
|
12
|
-
const isString = (val) => typeof val === "string";
|
|
13
|
-
const isValidString = (val) => typeof val === "string" && val !== "";
|
|
14
|
-
const isRegExp = (val) => Object.prototype.toString.call(val).replace(/\[object (\w+)\]/, "$1").toLowerCase() === "regexp";
|
|
15
12
|
const isIOS$1 = () => inBrowser ? /ios|iphone|ipad|ipod/.test(navigator.userAgent.toLowerCase()) : false;
|
|
16
|
-
const isAndroid = () => inBrowser ? /android/.test(navigator.userAgent.toLowerCase()) : false;
|
|
17
13
|
const isWeixin = () => inBrowser ? /micromessenger/.test(navigator.userAgent.toLowerCase()) : false;
|
|
18
|
-
const getIosVersion = () => {
|
|
19
|
-
const reg = /CPU iPhone OS (.*?) like Mac OS/i;
|
|
20
|
-
const verStr = navigator.userAgent.match(reg);
|
|
21
|
-
if (verStr && verStr[1]) {
|
|
22
|
-
return verStr[1].replace(/_/g, ".");
|
|
23
|
-
}
|
|
24
|
-
return "";
|
|
25
|
-
};
|
|
26
14
|
function noop() {
|
|
27
15
|
}
|
|
28
16
|
const extend = Object.assign;
|
|
@@ -223,7 +211,7 @@ function padZero(num, targetLength = 2) {
|
|
|
223
211
|
}
|
|
224
212
|
return str;
|
|
225
213
|
}
|
|
226
|
-
const clamp
|
|
214
|
+
const clamp = (num, min, max) => Math.min(Math.max(num, min), max);
|
|
227
215
|
function trimExtraChar(value, char, regExp) {
|
|
228
216
|
const index = value.indexOf(char);
|
|
229
217
|
if (index === -1) {
|
|
@@ -1615,7 +1603,7 @@ var stdin_default$1I = defineComponent({
|
|
|
1615
1603
|
"style": style.value,
|
|
1616
1604
|
"src": props.src
|
|
1617
1605
|
}, {
|
|
1618
|
-
error: renderText()
|
|
1606
|
+
error: () => renderText()
|
|
1619
1607
|
});
|
|
1620
1608
|
};
|
|
1621
1609
|
}
|
|
@@ -3369,7 +3357,8 @@ var stdin_default$1z = defineComponent({
|
|
|
3369
3357
|
maxWidth: {
|
|
3370
3358
|
type: String,
|
|
3371
3359
|
default: "112px"
|
|
3372
|
-
}
|
|
3360
|
+
},
|
|
3361
|
+
setLine: Function
|
|
3373
3362
|
},
|
|
3374
3363
|
setup(props, {
|
|
3375
3364
|
slots
|
|
@@ -3429,9 +3418,30 @@ var stdin_default$1z = defineComponent({
|
|
|
3429
3418
|
}
|
|
3430
3419
|
return Text;
|
|
3431
3420
|
};
|
|
3421
|
+
const mutationObserver = ref();
|
|
3422
|
+
const dom = ref(null);
|
|
3423
|
+
function mutation() {
|
|
3424
|
+
props.setLine && props.setLine();
|
|
3425
|
+
}
|
|
3426
|
+
onMounted(() => {
|
|
3427
|
+
if (!dom.value) {
|
|
3428
|
+
return;
|
|
3429
|
+
}
|
|
3430
|
+
mutationObserver.value = new MutationObserver(mutation);
|
|
3431
|
+
mutationObserver.value.observe(dom.value, {
|
|
3432
|
+
characterData: true,
|
|
3433
|
+
childList: true,
|
|
3434
|
+
subtree: true
|
|
3435
|
+
});
|
|
3436
|
+
});
|
|
3437
|
+
onBeforeUnmount(() => {
|
|
3438
|
+
var _a, _b;
|
|
3439
|
+
(_b = (_a = mutationObserver.value) == null ? void 0 : _a.unobserve) == null ? void 0 : _b.call(_a, dom.value);
|
|
3440
|
+
});
|
|
3432
3441
|
return () => createVNode("div", {
|
|
3433
3442
|
"id": props.id,
|
|
3434
3443
|
"role": "tab",
|
|
3444
|
+
"ref": dom,
|
|
3435
3445
|
"class": [bem$18([props.type, {
|
|
3436
3446
|
grow: props.scrollable && !props.shrink,
|
|
3437
3447
|
shrink: props.shrink,
|
|
@@ -3524,9 +3534,9 @@ var stdin_default$1y = defineComponent({
|
|
|
3524
3534
|
} = state;
|
|
3525
3535
|
if (pace) {
|
|
3526
3536
|
if (props.loop) {
|
|
3527
|
-
return clamp
|
|
3537
|
+
return clamp(active + pace, -1, count.value);
|
|
3528
3538
|
}
|
|
3529
|
-
return clamp
|
|
3539
|
+
return clamp(active + pace, 0, maxCount.value);
|
|
3530
3540
|
}
|
|
3531
3541
|
return active;
|
|
3532
3542
|
};
|
|
@@ -3537,7 +3547,7 @@ var stdin_default$1y = defineComponent({
|
|
|
3537
3547
|
}
|
|
3538
3548
|
let targetOffset = offset2 - currentPosition;
|
|
3539
3549
|
if (!props.loop) {
|
|
3540
|
-
targetOffset = clamp
|
|
3550
|
+
targetOffset = clamp(targetOffset, minOffset.value, 0);
|
|
3541
3551
|
}
|
|
3542
3552
|
return targetOffset;
|
|
3543
3553
|
};
|
|
@@ -3650,7 +3660,7 @@ var stdin_default$1y = defineComponent({
|
|
|
3650
3660
|
cb();
|
|
3651
3661
|
}
|
|
3652
3662
|
};
|
|
3653
|
-
const
|
|
3663
|
+
const resize = () => initialize(state.active);
|
|
3654
3664
|
let touchStartTime;
|
|
3655
3665
|
const onTouchStart = (event) => {
|
|
3656
3666
|
if (!props.touchable || // avoid resetting position on multi-finger touch
|
|
@@ -3779,7 +3789,7 @@ var stdin_default$1y = defineComponent({
|
|
|
3779
3789
|
prev,
|
|
3780
3790
|
next,
|
|
3781
3791
|
state,
|
|
3782
|
-
resize
|
|
3792
|
+
resize,
|
|
3783
3793
|
swipeTo
|
|
3784
3794
|
});
|
|
3785
3795
|
linkChildren({
|
|
@@ -3791,7 +3801,7 @@ var stdin_default$1y = defineComponent({
|
|
|
3791
3801
|
watch(() => props.initialSwipe, (value) => initialize(+value));
|
|
3792
3802
|
watch(count, () => initialize(state.active));
|
|
3793
3803
|
watch(() => props.autoplay, autoplay);
|
|
3794
|
-
watch([windowWidth, windowHeight],
|
|
3804
|
+
watch([windowWidth, windowHeight], resize);
|
|
3795
3805
|
watch(usePageVisibility(), (visible) => {
|
|
3796
3806
|
if (visible === "visible") {
|
|
3797
3807
|
autoplay();
|
|
@@ -4116,6 +4126,7 @@ var stdin_default$1w = defineComponent({
|
|
|
4116
4126
|
"scrollable": scrollable.value,
|
|
4117
4127
|
"activeColor": props.titleActiveColor,
|
|
4118
4128
|
"inactiveColor": props.titleInactiveColor,
|
|
4129
|
+
"setLine": setLine,
|
|
4119
4130
|
"onClick": (event) => onClickTab(item, index, event)
|
|
4120
4131
|
}, pick(item, ["dot", "badge", "title", "disabled", "showZeroBadge"])), {
|
|
4121
4132
|
title: item.$slots.title,
|
|
@@ -5737,7 +5748,7 @@ function getColumnsType$1(columns, fields) {
|
|
|
5737
5748
|
return "default";
|
|
5738
5749
|
}
|
|
5739
5750
|
function findIndexOfEnabledOption$1(options, index) {
|
|
5740
|
-
index = clamp
|
|
5751
|
+
index = clamp(index, 0, options.length);
|
|
5741
5752
|
for (let i = index; i < options.length; i++) {
|
|
5742
5753
|
if (!options[i].disabled)
|
|
5743
5754
|
return i;
|
|
@@ -5849,7 +5860,7 @@ var stdin_default$1i = defineComponent({
|
|
|
5849
5860
|
updateValueByIndex(index);
|
|
5850
5861
|
emit("clickOption", props.options[index]);
|
|
5851
5862
|
};
|
|
5852
|
-
const getIndexByOffset = (offset2) => clamp
|
|
5863
|
+
const getIndexByOffset = (offset2) => clamp(Math.round(-offset2 / props.optionHeight), 0, count() - 1);
|
|
5853
5864
|
const momentum = (distance, duration) => {
|
|
5854
5865
|
const speed = Math.abs(distance / duration);
|
|
5855
5866
|
distance = currentOffset.value + speed / 3e-3 * (distance < 0 ? -1 : 1);
|
|
@@ -5889,7 +5900,7 @@ var stdin_default$1i = defineComponent({
|
|
|
5889
5900
|
moving = true;
|
|
5890
5901
|
preventDefault(event, true);
|
|
5891
5902
|
}
|
|
5892
|
-
currentOffset.value = clamp
|
|
5903
|
+
currentOffset.value = clamp(startOffset + touch.deltaY.value, -(count() * props.optionHeight), props.optionHeight);
|
|
5893
5904
|
const now = Date.now();
|
|
5894
5905
|
if (now - touchStartTime > MOMENTUM_TIME$2) {
|
|
5895
5906
|
touchStartTime = now;
|
|
@@ -6441,7 +6452,7 @@ const formatValueRange = (values, columns) => values.map((value, index) => {
|
|
|
6441
6452
|
if (column.length) {
|
|
6442
6453
|
const minValue = +column[0].value;
|
|
6443
6454
|
const maxValue = +column[column.length - 1].value;
|
|
6444
|
-
return padZero(clamp
|
|
6455
|
+
return padZero(clamp(+value, minValue, maxValue));
|
|
6445
6456
|
}
|
|
6446
6457
|
return value;
|
|
6447
6458
|
});
|
|
@@ -6528,7 +6539,7 @@ var stdin_default$1c = defineComponent({
|
|
|
6528
6539
|
updateValueByIndex(index);
|
|
6529
6540
|
emit("clickOption", props.options[index]);
|
|
6530
6541
|
};
|
|
6531
|
-
const getIndexByOffset = (offset2) => clamp
|
|
6542
|
+
const getIndexByOffset = (offset2) => clamp(Math.round(-offset2 / props.optionHeight), 0, count() - 1);
|
|
6532
6543
|
const momentum = (distance, duration) => {
|
|
6533
6544
|
const speed = Math.abs(distance / duration);
|
|
6534
6545
|
distance = currentOffset.value + speed / 15e-4 * (distance < 0 ? -1 : 1);
|
|
@@ -6568,7 +6579,7 @@ var stdin_default$1c = defineComponent({
|
|
|
6568
6579
|
moving = true;
|
|
6569
6580
|
preventDefault(event, true);
|
|
6570
6581
|
}
|
|
6571
|
-
currentOffset.value = clamp
|
|
6582
|
+
currentOffset.value = clamp(startOffset + touch.deltaY.value, -(count() * props.optionHeight), props.optionHeight);
|
|
6572
6583
|
const now = Date.now();
|
|
6573
6584
|
if (now - touchStartTime > MOMENTUM_TIME$1) {
|
|
6574
6585
|
touchStartTime = now;
|
|
@@ -8274,13 +8285,6 @@ const parseNumber = (obj, defaultValue = 0) => {
|
|
|
8274
8285
|
}
|
|
8275
8286
|
return result;
|
|
8276
8287
|
};
|
|
8277
|
-
const parseDecimal = (obj, defaultValue) => {
|
|
8278
|
-
let result = parseFloat(obj);
|
|
8279
|
-
if (isNaN(result)) {
|
|
8280
|
-
result = defaultValue || 0;
|
|
8281
|
-
}
|
|
8282
|
-
return result;
|
|
8283
|
-
};
|
|
8284
8288
|
const [name$K, bem$K] = createNamespace("tag");
|
|
8285
8289
|
const tagProps = {
|
|
8286
8290
|
mark: Boolean,
|
|
@@ -11423,7 +11427,7 @@ var stdin_default$R = defineComponent({
|
|
|
11423
11427
|
return 0;
|
|
11424
11428
|
});
|
|
11425
11429
|
const setScale = (scale) => {
|
|
11426
|
-
scale = clamp
|
|
11430
|
+
scale = clamp(scale, +props.minZoom, +props.maxZoom + 1);
|
|
11427
11431
|
if (scale !== state.scale) {
|
|
11428
11432
|
state.scale = scale;
|
|
11429
11433
|
emit("scale", {
|
|
@@ -11484,8 +11488,8 @@ var stdin_default$R = defineComponent({
|
|
|
11484
11488
|
} = touch;
|
|
11485
11489
|
const moveX = deltaX.value + startMoveX;
|
|
11486
11490
|
const moveY = deltaY.value + startMoveY;
|
|
11487
|
-
state.moveX = clamp
|
|
11488
|
-
state.moveY = clamp
|
|
11491
|
+
state.moveX = clamp(moveX, -maxMoveX.value, maxMoveX.value);
|
|
11492
|
+
state.moveY = clamp(moveY, -maxMoveY.value, maxMoveY.value);
|
|
11489
11493
|
}
|
|
11490
11494
|
if (state.zooming && touches.length === 2) {
|
|
11491
11495
|
const distance = getDistance(touches);
|
|
@@ -11534,8 +11538,8 @@ var stdin_default$R = defineComponent({
|
|
|
11534
11538
|
}
|
|
11535
11539
|
if (!event.touches.length) {
|
|
11536
11540
|
if (state.zooming) {
|
|
11537
|
-
state.moveX = clamp
|
|
11538
|
-
state.moveY = clamp
|
|
11541
|
+
state.moveX = clamp(state.moveX, -maxMoveX.value, maxMoveX.value);
|
|
11542
|
+
state.moveY = clamp(state.moveY, -maxMoveY.value, maxMoveY.value);
|
|
11539
11543
|
state.zooming = false;
|
|
11540
11544
|
}
|
|
11541
11545
|
state.moving = false;
|
|
@@ -11645,7 +11649,7 @@ var stdin_default$Q = defineComponent({
|
|
|
11645
11649
|
rootHeight: 0,
|
|
11646
11650
|
disableZoom: false
|
|
11647
11651
|
});
|
|
11648
|
-
const
|
|
11652
|
+
const resize = () => {
|
|
11649
11653
|
if (swipeRef.value) {
|
|
11650
11654
|
const rect = useRect(swipeRef.value.$el);
|
|
11651
11655
|
state.rootWidth = rect.width;
|
|
@@ -11755,8 +11759,8 @@ var stdin_default$Q = defineComponent({
|
|
|
11755
11759
|
useExpose({
|
|
11756
11760
|
swipeTo
|
|
11757
11761
|
});
|
|
11758
|
-
onMounted(
|
|
11759
|
-
watch([windowWidth, windowHeight],
|
|
11762
|
+
onMounted(resize);
|
|
11763
|
+
watch([windowWidth, windowHeight], resize);
|
|
11760
11764
|
watch(() => props.startPosition, (value) => setActive(+value));
|
|
11761
11765
|
watch(() => props.show, (value) => {
|
|
11762
11766
|
const {
|
|
@@ -11766,7 +11770,7 @@ var stdin_default$Q = defineComponent({
|
|
|
11766
11770
|
if (value) {
|
|
11767
11771
|
setActive(+startPosition);
|
|
11768
11772
|
nextTick(() => {
|
|
11769
|
-
|
|
11773
|
+
resize();
|
|
11770
11774
|
swipeTo(+startPosition, {
|
|
11771
11775
|
immediate: true
|
|
11772
11776
|
});
|
|
@@ -13006,9 +13010,6 @@ var stdin_default$C = defineComponent({
|
|
|
13006
13010
|
}, null)])])]);
|
|
13007
13011
|
}
|
|
13008
13012
|
});
|
|
13009
|
-
const MAX_SIDE_LENGTH = 1920;
|
|
13010
|
-
const MIN_SIDE_LENGTH = 480;
|
|
13011
|
-
const PHOTO_FILE_SIZE_LIMIT = 1e3;
|
|
13012
13013
|
function isImageType(file) {
|
|
13013
13014
|
return file.type.indexOf("image/") >= 0;
|
|
13014
13015
|
}
|
|
@@ -13032,47 +13033,6 @@ function getUniqueFileName(file, suffix = "") {
|
|
|
13032
13033
|
)}`;
|
|
13033
13034
|
return suffix ? name2 + "." + suffix : name2;
|
|
13034
13035
|
}
|
|
13035
|
-
function adjustImgOrientation(ctx, img, orientation, width, height) {
|
|
13036
|
-
switch (orientation) {
|
|
13037
|
-
case 3:
|
|
13038
|
-
ctx.rotate(180 * Math.PI / 180);
|
|
13039
|
-
ctx.drawImage(img, -width, -height, width, height);
|
|
13040
|
-
break;
|
|
13041
|
-
case 6:
|
|
13042
|
-
ctx.rotate(90 * Math.PI / 180);
|
|
13043
|
-
ctx.drawImage(img, 0, -width, height, width);
|
|
13044
|
-
break;
|
|
13045
|
-
case 8:
|
|
13046
|
-
ctx.rotate(270 * Math.PI / 180);
|
|
13047
|
-
ctx.drawImage(img, -height, 0, height, width);
|
|
13048
|
-
break;
|
|
13049
|
-
case 2:
|
|
13050
|
-
ctx.translate(width, 0);
|
|
13051
|
-
ctx.scale(-1, 1);
|
|
13052
|
-
ctx.drawImage(img, 0, 0, width, height);
|
|
13053
|
-
break;
|
|
13054
|
-
case 4:
|
|
13055
|
-
ctx.translate(width, 0);
|
|
13056
|
-
ctx.scale(-1, 1);
|
|
13057
|
-
ctx.rotate(180 * Math.PI / 180);
|
|
13058
|
-
ctx.drawImage(img, -width, -height, width, height);
|
|
13059
|
-
break;
|
|
13060
|
-
case 5:
|
|
13061
|
-
ctx.translate(width, 0);
|
|
13062
|
-
ctx.scale(-1, 1);
|
|
13063
|
-
ctx.rotate(90 * Math.PI / 180);
|
|
13064
|
-
ctx.drawImage(img, 0, -width, height, width);
|
|
13065
|
-
break;
|
|
13066
|
-
case 7:
|
|
13067
|
-
ctx.translate(width, 0);
|
|
13068
|
-
ctx.scale(-1, 1);
|
|
13069
|
-
ctx.rotate(270 * Math.PI / 180);
|
|
13070
|
-
ctx.drawImage(img, -height, 0, height, width);
|
|
13071
|
-
break;
|
|
13072
|
-
default:
|
|
13073
|
-
ctx.drawImage(img, 0, 0, width, height);
|
|
13074
|
-
}
|
|
13075
|
-
}
|
|
13076
13036
|
function file2DataURL(file) {
|
|
13077
13037
|
return new Promise((resolve, reject) => {
|
|
13078
13038
|
const a = new FileReader();
|
|
@@ -13086,39 +13046,6 @@ function file2DataURL(file) {
|
|
|
13086
13046
|
a.readAsDataURL(file);
|
|
13087
13047
|
});
|
|
13088
13048
|
}
|
|
13089
|
-
function file2Image(file) {
|
|
13090
|
-
return new Promise((resolve, reject) => {
|
|
13091
|
-
file2DataURL(file).then((url) => {
|
|
13092
|
-
const img = new Image();
|
|
13093
|
-
img.src = url;
|
|
13094
|
-
img.onload = function() {
|
|
13095
|
-
if (img.complete) {
|
|
13096
|
-
resolve(img);
|
|
13097
|
-
} else {
|
|
13098
|
-
reject(new Error("文件加载失败"));
|
|
13099
|
-
}
|
|
13100
|
-
};
|
|
13101
|
-
}).catch(reject);
|
|
13102
|
-
});
|
|
13103
|
-
}
|
|
13104
|
-
function image2Canvas(img, type, orientation, width, height) {
|
|
13105
|
-
const canvas = document.createElement("canvas");
|
|
13106
|
-
const _width = width || img.width;
|
|
13107
|
-
const _height = height || img.height;
|
|
13108
|
-
canvas.width = _width;
|
|
13109
|
-
canvas.height = _height;
|
|
13110
|
-
const ctx = canvas.getContext("2d");
|
|
13111
|
-
if (ctx) {
|
|
13112
|
-
ctx.fillStyle = "transparent";
|
|
13113
|
-
if (type === "image/jpeg") {
|
|
13114
|
-
ctx.fillStyle = "#fff";
|
|
13115
|
-
}
|
|
13116
|
-
ctx.fillRect(0, 0, _width, _height);
|
|
13117
|
-
adjustImgOrientation(ctx, img, orientation, _width, _height);
|
|
13118
|
-
return Promise.resolve(canvas);
|
|
13119
|
-
}
|
|
13120
|
-
return Promise.reject(new Error("canvas getContext return null"));
|
|
13121
|
-
}
|
|
13122
13049
|
function canvas2File(canvas, fileName, lastModified, type = "image/jpeg", quality = 0.8) {
|
|
13123
13050
|
return new Promise((resolve, reject) => {
|
|
13124
13051
|
canvas.toBlob(
|
|
@@ -13135,893 +13062,6 @@ function canvas2File(canvas, fileName, lastModified, type = "image/jpeg", qualit
|
|
|
13135
13062
|
);
|
|
13136
13063
|
});
|
|
13137
13064
|
}
|
|
13138
|
-
function canvas2Image(canvas, type = "image/jpeg", quality = 0.8) {
|
|
13139
|
-
const image = new Image();
|
|
13140
|
-
image.src = canvas.toDataURL(type, quality);
|
|
13141
|
-
return Promise.resolve(image);
|
|
13142
|
-
}
|
|
13143
|
-
function getStringFromCharCode(dataView, start, length) {
|
|
13144
|
-
let str = "";
|
|
13145
|
-
let i;
|
|
13146
|
-
length += start;
|
|
13147
|
-
for (i = start; i < length; i += 1) {
|
|
13148
|
-
str += String.fromCharCode(dataView.getUint8(i));
|
|
13149
|
-
}
|
|
13150
|
-
return str;
|
|
13151
|
-
}
|
|
13152
|
-
function getOrientation(arrayBuffer) {
|
|
13153
|
-
const dataView = new DataView(arrayBuffer);
|
|
13154
|
-
let orientation;
|
|
13155
|
-
try {
|
|
13156
|
-
let littleEndian;
|
|
13157
|
-
let app1Start;
|
|
13158
|
-
let ifdStart;
|
|
13159
|
-
if (dataView.getUint8(0) === 255 && dataView.getUint8(1) === 216) {
|
|
13160
|
-
const length = dataView.byteLength;
|
|
13161
|
-
let offset2 = 2;
|
|
13162
|
-
while (offset2 + 1 < length) {
|
|
13163
|
-
if (dataView.getUint8(offset2) === 255 && dataView.getUint8(offset2 + 1) === 225) {
|
|
13164
|
-
app1Start = offset2;
|
|
13165
|
-
break;
|
|
13166
|
-
}
|
|
13167
|
-
offset2 += 1;
|
|
13168
|
-
}
|
|
13169
|
-
}
|
|
13170
|
-
if (app1Start) {
|
|
13171
|
-
const exifIDCode = app1Start + 4;
|
|
13172
|
-
const tiffOffset = app1Start + 10;
|
|
13173
|
-
if (getStringFromCharCode(dataView, exifIDCode, 4) === "Exif") {
|
|
13174
|
-
const endianness = dataView.getUint16(tiffOffset);
|
|
13175
|
-
littleEndian = endianness === 18761;
|
|
13176
|
-
if (littleEndian || endianness === 19789) {
|
|
13177
|
-
if (dataView.getUint16(tiffOffset + 2, littleEndian) === 42) {
|
|
13178
|
-
const firstIFDOffset = dataView.getUint32(
|
|
13179
|
-
tiffOffset + 4,
|
|
13180
|
-
littleEndian
|
|
13181
|
-
);
|
|
13182
|
-
if (firstIFDOffset >= 8) {
|
|
13183
|
-
ifdStart = tiffOffset + firstIFDOffset;
|
|
13184
|
-
}
|
|
13185
|
-
}
|
|
13186
|
-
}
|
|
13187
|
-
}
|
|
13188
|
-
}
|
|
13189
|
-
if (ifdStart) {
|
|
13190
|
-
const _length = dataView.getUint16(ifdStart, littleEndian);
|
|
13191
|
-
let _offset;
|
|
13192
|
-
let i;
|
|
13193
|
-
for (i = 0; i < _length; i += 1) {
|
|
13194
|
-
_offset = ifdStart + i * 12 + 2;
|
|
13195
|
-
if (dataView.getUint16(_offset, littleEndian) === 274) {
|
|
13196
|
-
_offset += 8;
|
|
13197
|
-
orientation = dataView.getUint16(_offset, littleEndian);
|
|
13198
|
-
dataView.setUint16(_offset, 1, littleEndian);
|
|
13199
|
-
break;
|
|
13200
|
-
}
|
|
13201
|
-
}
|
|
13202
|
-
}
|
|
13203
|
-
} catch (e) {
|
|
13204
|
-
orientation = 1;
|
|
13205
|
-
}
|
|
13206
|
-
return orientation;
|
|
13207
|
-
}
|
|
13208
|
-
function resize(img, {
|
|
13209
|
-
inputType = "image/jpeg",
|
|
13210
|
-
orientation = 1,
|
|
13211
|
-
// 图片的方向
|
|
13212
|
-
imageWidth = -1,
|
|
13213
|
-
imageHeight = -1,
|
|
13214
|
-
// equalProportion = true, // 等比例拉伸
|
|
13215
|
-
sideLengthLimit = 640,
|
|
13216
|
-
baseOnShortSide = true,
|
|
13217
|
-
// 是否以短边为基准缩放
|
|
13218
|
-
resultType = "image"
|
|
13219
|
-
}) {
|
|
13220
|
-
let scale = 1;
|
|
13221
|
-
const scaleBaseFunc = baseOnShortSide ? Math.min : Math.max;
|
|
13222
|
-
if (imageWidth > 0 && imageHeight > 0) {
|
|
13223
|
-
scale = sideLengthLimit / scaleBaseFunc(imageWidth, imageHeight);
|
|
13224
|
-
} else if (img.width > 0 && img.height > 0) {
|
|
13225
|
-
scale = sideLengthLimit / scaleBaseFunc(img.width, img.height);
|
|
13226
|
-
imageWidth = img.width;
|
|
13227
|
-
imageHeight = img.height;
|
|
13228
|
-
} else {
|
|
13229
|
-
return Promise.reject(new Error("image width/height 无效"));
|
|
13230
|
-
}
|
|
13231
|
-
const targetWidth = scale > 1 ? imageWidth : imageWidth * scale;
|
|
13232
|
-
const targetHeight = scale > 1 ? imageHeight : imageHeight * scale;
|
|
13233
|
-
if (resultType === "image") {
|
|
13234
|
-
return image2Canvas(
|
|
13235
|
-
img,
|
|
13236
|
-
inputType,
|
|
13237
|
-
orientation,
|
|
13238
|
-
targetWidth,
|
|
13239
|
-
targetHeight
|
|
13240
|
-
).then((canvas) => canvas2Image(canvas));
|
|
13241
|
-
}
|
|
13242
|
-
return image2Canvas(img, inputType, orientation, targetWidth, targetHeight);
|
|
13243
|
-
}
|
|
13244
|
-
var __defProp$3 = Object.defineProperty;
|
|
13245
|
-
var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
13246
|
-
var __publicField$3 = (obj, key, value) => {
|
|
13247
|
-
__defNormalProp$3(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
13248
|
-
return value;
|
|
13249
|
-
};
|
|
13250
|
-
class ResizeOptions {
|
|
13251
|
-
// 最大边长
|
|
13252
|
-
constructor(maxSideLength) {
|
|
13253
|
-
__publicField$3(this, "maxSideLength");
|
|
13254
|
-
if (!isDef(maxSideLength)) {
|
|
13255
|
-
this.maxSideLength = MAX_SIDE_LENGTH;
|
|
13256
|
-
} else {
|
|
13257
|
-
this.maxSideLength = maxSideLength;
|
|
13258
|
-
if (this.maxSideLength > MAX_SIDE_LENGTH) {
|
|
13259
|
-
this.maxSideLength = MAX_SIDE_LENGTH;
|
|
13260
|
-
} else if (this.maxSideLength < MIN_SIDE_LENGTH) {
|
|
13261
|
-
this.maxSideLength = MIN_SIDE_LENGTH;
|
|
13262
|
-
}
|
|
13263
|
-
}
|
|
13264
|
-
}
|
|
13265
|
-
}
|
|
13266
|
-
var __defProp$2 = Object.defineProperty;
|
|
13267
|
-
var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
13268
|
-
var __publicField$2 = (obj, key, value) => {
|
|
13269
|
-
__defNormalProp$2(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
13270
|
-
return value;
|
|
13271
|
-
};
|
|
13272
|
-
class CompressOptions {
|
|
13273
|
-
constructor(photoFileSizeLimit) {
|
|
13274
|
-
__publicField$2(this, "photoFileSizeLimit");
|
|
13275
|
-
__publicField$2(this, "checkOrientation", true);
|
|
13276
|
-
if (!isDef(photoFileSizeLimit)) {
|
|
13277
|
-
this.photoFileSizeLimit = PHOTO_FILE_SIZE_LIMIT;
|
|
13278
|
-
} else {
|
|
13279
|
-
this.photoFileSizeLimit = photoFileSizeLimit;
|
|
13280
|
-
}
|
|
13281
|
-
}
|
|
13282
|
-
}
|
|
13283
|
-
var __defProp$1 = Object.defineProperty;
|
|
13284
|
-
var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
13285
|
-
var __publicField$1 = (obj, key, value) => {
|
|
13286
|
-
__defNormalProp$1(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
13287
|
-
return value;
|
|
13288
|
-
};
|
|
13289
|
-
const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
|
|
13290
|
-
const subString = (str, startIndex, length) => {
|
|
13291
|
-
if (!isDef(length)) {
|
|
13292
|
-
return str.substring(startIndex);
|
|
13293
|
-
}
|
|
13294
|
-
return str.substring(startIndex, startIndex + length);
|
|
13295
|
-
};
|
|
13296
|
-
const ColorMap = {
|
|
13297
|
-
transparent: "#00000000",
|
|
13298
|
-
white: "#FFFFFF",
|
|
13299
|
-
black: "#000000",
|
|
13300
|
-
darkgray: "#444444",
|
|
13301
|
-
gray: "#888888",
|
|
13302
|
-
lightgray: "#CCCCCC",
|
|
13303
|
-
darkgrey: "#444444",
|
|
13304
|
-
grey: "#888888",
|
|
13305
|
-
lightgrey: "#CCCCCC",
|
|
13306
|
-
red: "#FF0000",
|
|
13307
|
-
green: "#00FF00",
|
|
13308
|
-
blue: "#0000FF",
|
|
13309
|
-
yellow: "#FFFF00",
|
|
13310
|
-
cyan: "#00FFFF",
|
|
13311
|
-
magenta: "#FF00FF",
|
|
13312
|
-
aqua: "#00FFFF",
|
|
13313
|
-
fuchsia: "#FF00FF",
|
|
13314
|
-
lime: "#00FF00",
|
|
13315
|
-
maroon: "#800000",
|
|
13316
|
-
navy: "#000080",
|
|
13317
|
-
olive: "#808000",
|
|
13318
|
-
purple: "#800080",
|
|
13319
|
-
silver: "#C0C0C0",
|
|
13320
|
-
teal: "#008080",
|
|
13321
|
-
orange: "#FF9933"
|
|
13322
|
-
};
|
|
13323
|
-
function getColorValue(key) {
|
|
13324
|
-
for (const k of Object.getOwnPropertyNames(ColorMap)) {
|
|
13325
|
-
if (k === key) {
|
|
13326
|
-
return ColorMap[k];
|
|
13327
|
-
}
|
|
13328
|
-
}
|
|
13329
|
-
return null;
|
|
13330
|
-
}
|
|
13331
|
-
const CONTENT_PADDING = 10;
|
|
13332
|
-
const DEFAULT_PADDING = 2;
|
|
13333
|
-
const DEFAULT_FONT_SIZE = 25;
|
|
13334
|
-
const DEFAULT_CANVAS_SIZE = 480;
|
|
13335
|
-
const DEFAULT_BACKGROUND_OPACITY = 128;
|
|
13336
|
-
function getHeitiFontFamily() {
|
|
13337
|
-
if (isAndroid()) {
|
|
13338
|
-
return "'Roboto Black', 'Droid Sans'";
|
|
13339
|
-
} else if (isIOS$1()) {
|
|
13340
|
-
return "'PingFang SC Medium'";
|
|
13341
|
-
}
|
|
13342
|
-
return '"PingFang SC Medium", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif';
|
|
13343
|
-
}
|
|
13344
|
-
function parseWatermarkStyle(styleString, canvasSize) {
|
|
13345
|
-
if (!isValidString(styleString)) {
|
|
13346
|
-
return null;
|
|
13347
|
-
}
|
|
13348
|
-
const styleParts = styleString.split("$");
|
|
13349
|
-
if (styleParts.length <= 0) {
|
|
13350
|
-
return null;
|
|
13351
|
-
}
|
|
13352
|
-
const scale = Math.min(canvasSize.width, canvasSize.height) / DEFAULT_CANVAS_SIZE;
|
|
13353
|
-
if (parseNumber(styleParts[0], -1) !== -1) {
|
|
13354
|
-
const fontSize2 = Math.round(
|
|
13355
|
-
parseDecimal(styleParts[0], DEFAULT_FONT_SIZE) * scale
|
|
13356
|
-
);
|
|
13357
|
-
let position2 = "lefttop";
|
|
13358
|
-
if (styleParts[1]) {
|
|
13359
|
-
position2 = styleParts[1];
|
|
13360
|
-
}
|
|
13361
|
-
let paddingTop2 = DEFAULT_PADDING * scale;
|
|
13362
|
-
let paddingBottom2 = DEFAULT_PADDING * scale;
|
|
13363
|
-
if (styleParts[2]) {
|
|
13364
|
-
const paddingParts = styleParts[2].split("_");
|
|
13365
|
-
paddingTop2 = parseNumber(paddingParts[0], DEFAULT_PADDING) * scale;
|
|
13366
|
-
if (paddingParts[1]) {
|
|
13367
|
-
paddingBottom2 = parseNumber(paddingParts[1], DEFAULT_PADDING) * scale;
|
|
13368
|
-
}
|
|
13369
|
-
}
|
|
13370
|
-
const fontName2 = getHeitiFontFamily();
|
|
13371
|
-
const fontWeight2 = "normal";
|
|
13372
|
-
const fontColor2 = ColorMap.transparent;
|
|
13373
|
-
const backgroundColor2 = ColorMap.transparent;
|
|
13374
|
-
const backgroundOpacity2 = 128;
|
|
13375
|
-
return {
|
|
13376
|
-
fontName: fontName2,
|
|
13377
|
-
fontWeight: fontWeight2,
|
|
13378
|
-
fontColor: fontColor2,
|
|
13379
|
-
fontSize: fontSize2,
|
|
13380
|
-
backgroundColor: backgroundColor2,
|
|
13381
|
-
backgroundOpacity: backgroundOpacity2,
|
|
13382
|
-
paddingTop: paddingTop2,
|
|
13383
|
-
paddingBottom: paddingBottom2,
|
|
13384
|
-
position: position2,
|
|
13385
|
-
scale,
|
|
13386
|
-
simplified: true
|
|
13387
|
-
};
|
|
13388
|
-
}
|
|
13389
|
-
const fontName = styleParts[0] + ", " + getHeitiFontFamily();
|
|
13390
|
-
let fontWeight = "normal";
|
|
13391
|
-
if (styleParts[1]) {
|
|
13392
|
-
fontWeight = styleParts[1];
|
|
13393
|
-
}
|
|
13394
|
-
let fontColor = ColorMap.white;
|
|
13395
|
-
if (styleParts[2]) {
|
|
13396
|
-
const color = getColorValue(styleParts[2]);
|
|
13397
|
-
if (color) {
|
|
13398
|
-
fontColor = color;
|
|
13399
|
-
}
|
|
13400
|
-
}
|
|
13401
|
-
let fontSize = Math.round(DEFAULT_FONT_SIZE * scale);
|
|
13402
|
-
if (styleParts[3]) {
|
|
13403
|
-
fontSize = Math.round(
|
|
13404
|
-
parseDecimal(styleParts[3], DEFAULT_FONT_SIZE) * scale
|
|
13405
|
-
);
|
|
13406
|
-
}
|
|
13407
|
-
let backgroundColor = ColorMap.blue;
|
|
13408
|
-
if (styleParts[4]) {
|
|
13409
|
-
const color = getColorValue(styleParts[4]);
|
|
13410
|
-
if (color) {
|
|
13411
|
-
backgroundColor = color;
|
|
13412
|
-
}
|
|
13413
|
-
}
|
|
13414
|
-
let position = "lefttop";
|
|
13415
|
-
if (styleParts[5]) {
|
|
13416
|
-
position = styleParts[5];
|
|
13417
|
-
}
|
|
13418
|
-
let backgroundOpacity = 255;
|
|
13419
|
-
if (styleParts[6]) {
|
|
13420
|
-
let opacity = parseNumber(styleParts[6], DEFAULT_BACKGROUND_OPACITY);
|
|
13421
|
-
opacity = clamp(opacity, 0, 255);
|
|
13422
|
-
backgroundOpacity = opacity;
|
|
13423
|
-
}
|
|
13424
|
-
let paddingTop = DEFAULT_PADDING * scale;
|
|
13425
|
-
let paddingBottom = DEFAULT_PADDING * scale;
|
|
13426
|
-
if (styleParts[7]) {
|
|
13427
|
-
const paddingParts = styleParts[7].split("_");
|
|
13428
|
-
paddingTop = parseNumber(paddingParts[0], DEFAULT_PADDING) * scale;
|
|
13429
|
-
if (paddingParts[1]) {
|
|
13430
|
-
paddingBottom = parseNumber(paddingParts[1], DEFAULT_PADDING) * scale;
|
|
13431
|
-
}
|
|
13432
|
-
}
|
|
13433
|
-
return {
|
|
13434
|
-
fontName,
|
|
13435
|
-
fontWeight,
|
|
13436
|
-
fontColor,
|
|
13437
|
-
fontSize,
|
|
13438
|
-
backgroundColor,
|
|
13439
|
-
backgroundOpacity,
|
|
13440
|
-
paddingTop,
|
|
13441
|
-
paddingBottom,
|
|
13442
|
-
position,
|
|
13443
|
-
scale,
|
|
13444
|
-
simplified: false
|
|
13445
|
-
};
|
|
13446
|
-
}
|
|
13447
|
-
class TextScanner {
|
|
13448
|
-
/**
|
|
13449
|
-
* The content to scan
|
|
13450
|
-
* @param text
|
|
13451
|
-
*/
|
|
13452
|
-
constructor(text) {
|
|
13453
|
-
__publicField$1(this, "text");
|
|
13454
|
-
__publicField$1(this, "cursor");
|
|
13455
|
-
this.text = text;
|
|
13456
|
-
this.cursor = 0;
|
|
13457
|
-
}
|
|
13458
|
-
hasNext(obj) {
|
|
13459
|
-
if (!isDef(obj)) {
|
|
13460
|
-
return this.cursor < this.text.length;
|
|
13461
|
-
} else if (isString(obj)) {
|
|
13462
|
-
const str = obj;
|
|
13463
|
-
const current2 = subString(this.text, this.cursor, str.length);
|
|
13464
|
-
if (current2 === str) {
|
|
13465
|
-
return true;
|
|
13466
|
-
}
|
|
13467
|
-
} else if (isRegExp(obj)) {
|
|
13468
|
-
const regex = obj;
|
|
13469
|
-
const subText = subString(this.text, this.cursor);
|
|
13470
|
-
const matchResults = subText.match(regex);
|
|
13471
|
-
if (matchResults) {
|
|
13472
|
-
if (matchResults.index === 0) {
|
|
13473
|
-
return true;
|
|
13474
|
-
}
|
|
13475
|
-
}
|
|
13476
|
-
}
|
|
13477
|
-
return false;
|
|
13478
|
-
}
|
|
13479
|
-
next(obj) {
|
|
13480
|
-
if (!isDef(obj)) {
|
|
13481
|
-
return subString(this.text, this.cursor, 1);
|
|
13482
|
-
} else if (isString(obj)) {
|
|
13483
|
-
const str = obj;
|
|
13484
|
-
if (subString(this.text, this.cursor, str.length) === str) {
|
|
13485
|
-
return str;
|
|
13486
|
-
}
|
|
13487
|
-
} else if (isRegExp(obj)) {
|
|
13488
|
-
const regex = obj;
|
|
13489
|
-
const subText = subString(this.text, this.cursor);
|
|
13490
|
-
const matchResults = subText.match(regex);
|
|
13491
|
-
if (matchResults) {
|
|
13492
|
-
if (matchResults.index === 0) {
|
|
13493
|
-
return matchResults;
|
|
13494
|
-
}
|
|
13495
|
-
}
|
|
13496
|
-
}
|
|
13497
|
-
return null;
|
|
13498
|
-
}
|
|
13499
|
-
skip(obj) {
|
|
13500
|
-
if (!isDef(obj)) {
|
|
13501
|
-
this.cursor += 1;
|
|
13502
|
-
} else if (isValidString(obj)) {
|
|
13503
|
-
const str = obj;
|
|
13504
|
-
this.cursor += str.length;
|
|
13505
|
-
}
|
|
13506
|
-
return this;
|
|
13507
|
-
}
|
|
13508
|
-
}
|
|
13509
|
-
function buildContent(contentConfigString, watermarkContext) {
|
|
13510
|
-
let content = "";
|
|
13511
|
-
const scanner = new TextScanner(contentConfigString);
|
|
13512
|
-
let steps = 0;
|
|
13513
|
-
while (scanner.hasNext() && steps < contentConfigString.length) {
|
|
13514
|
-
const dateRegex = new RegExp(
|
|
13515
|
-
"date{(.*?)}|date"
|
|
13516
|
-
/* Date */
|
|
13517
|
-
);
|
|
13518
|
-
if (scanner.hasNext(dateRegex)) {
|
|
13519
|
-
const regexResult = scanner.next(dateRegex);
|
|
13520
|
-
if (regexResult) {
|
|
13521
|
-
const matchResults = regexResult;
|
|
13522
|
-
let format = DATE_FORMAT.FORMAT_YMD;
|
|
13523
|
-
if (matchResults && matchResults.length >= 2) {
|
|
13524
|
-
if (isValidString(matchResults[1])) {
|
|
13525
|
-
format = matchResults[1];
|
|
13526
|
-
}
|
|
13527
|
-
}
|
|
13528
|
-
if (watermarkContext) {
|
|
13529
|
-
content += formatDate(watermarkContext.watermarkTime, format);
|
|
13530
|
-
}
|
|
13531
|
-
scanner.skip(matchResults.input);
|
|
13532
|
-
}
|
|
13533
|
-
} else if (scanner.hasNext(
|
|
13534
|
-
"time"
|
|
13535
|
-
/* Time */
|
|
13536
|
-
)) {
|
|
13537
|
-
if (watermarkContext) {
|
|
13538
|
-
const value = formatDate(
|
|
13539
|
-
watermarkContext.watermarkTime,
|
|
13540
|
-
DATE_FORMAT.FORMAT_HM
|
|
13541
|
-
);
|
|
13542
|
-
content += value;
|
|
13543
|
-
}
|
|
13544
|
-
scanner.skip(
|
|
13545
|
-
"time"
|
|
13546
|
-
/* Time */
|
|
13547
|
-
);
|
|
13548
|
-
} else if (scanner.hasNext(
|
|
13549
|
-
"address"
|
|
13550
|
-
/* Address */
|
|
13551
|
-
)) {
|
|
13552
|
-
if (watermarkContext) {
|
|
13553
|
-
content += watermarkContext.address;
|
|
13554
|
-
}
|
|
13555
|
-
scanner.skip(
|
|
13556
|
-
"address"
|
|
13557
|
-
/* Address */
|
|
13558
|
-
);
|
|
13559
|
-
} else if (scanner.hasNext(
|
|
13560
|
-
"humanname"
|
|
13561
|
-
/* HumanName */
|
|
13562
|
-
)) {
|
|
13563
|
-
if (watermarkContext) {
|
|
13564
|
-
content += watermarkContext.humanName;
|
|
13565
|
-
}
|
|
13566
|
-
scanner.skip(
|
|
13567
|
-
"humanname"
|
|
13568
|
-
/* HumanName */
|
|
13569
|
-
);
|
|
13570
|
-
} else if (scanner.hasNext(
|
|
13571
|
-
"projectName"
|
|
13572
|
-
/* ProjectName */
|
|
13573
|
-
)) {
|
|
13574
|
-
if (watermarkContext) {
|
|
13575
|
-
content += watermarkContext.projectName;
|
|
13576
|
-
}
|
|
13577
|
-
scanner.skip(
|
|
13578
|
-
"projectName"
|
|
13579
|
-
/* ProjectName */
|
|
13580
|
-
);
|
|
13581
|
-
} else if (scanner.hasNext(
|
|
13582
|
-
"{logo}"
|
|
13583
|
-
/* Logo */
|
|
13584
|
-
)) {
|
|
13585
|
-
console.error("watermark logo ignored");
|
|
13586
|
-
scanner.skip(
|
|
13587
|
-
"{logo}"
|
|
13588
|
-
/* Logo */
|
|
13589
|
-
);
|
|
13590
|
-
} else {
|
|
13591
|
-
const nextChar = scanner.next();
|
|
13592
|
-
if (isString(nextChar)) {
|
|
13593
|
-
content += nextChar;
|
|
13594
|
-
}
|
|
13595
|
-
scanner.skip();
|
|
13596
|
-
}
|
|
13597
|
-
steps++;
|
|
13598
|
-
}
|
|
13599
|
-
return content;
|
|
13600
|
-
}
|
|
13601
|
-
function parseWatermarks(watermarkConfigString, canvasSize, watermarkContext) {
|
|
13602
|
-
const watermarks = [];
|
|
13603
|
-
const configStringArray = watermarkConfigString.split("###");
|
|
13604
|
-
for (let i = 0; i < configStringArray.length; i++) {
|
|
13605
|
-
const configString = configStringArray[i];
|
|
13606
|
-
const configParts = configString.split("*#*");
|
|
13607
|
-
if (configParts.length === 2) {
|
|
13608
|
-
const styleString = configParts[0];
|
|
13609
|
-
const contentString = configParts[1];
|
|
13610
|
-
const style = parseWatermarkStyle(styleString, canvasSize);
|
|
13611
|
-
const content = buildContent(contentString, watermarkContext);
|
|
13612
|
-
if (style && content) {
|
|
13613
|
-
const watermark = {
|
|
13614
|
-
content,
|
|
13615
|
-
style
|
|
13616
|
-
};
|
|
13617
|
-
watermarks.push(watermark);
|
|
13618
|
-
}
|
|
13619
|
-
}
|
|
13620
|
-
}
|
|
13621
|
-
return watermarks;
|
|
13622
|
-
}
|
|
13623
|
-
function getCanvasScale(canvas, len) {
|
|
13624
|
-
const min = Math.min(canvas.width, canvas.height);
|
|
13625
|
-
return min / DEFAULT_CANVAS_SIZE * len;
|
|
13626
|
-
}
|
|
13627
|
-
function buildTile(canvas, content, style) {
|
|
13628
|
-
const origin = {
|
|
13629
|
-
x: 0,
|
|
13630
|
-
y: 0
|
|
13631
|
-
};
|
|
13632
|
-
const size = {
|
|
13633
|
-
width: 0,
|
|
13634
|
-
height: 0
|
|
13635
|
-
};
|
|
13636
|
-
const lines = [];
|
|
13637
|
-
const ctx = canvas.getContext("2d");
|
|
13638
|
-
if (!ctx) {
|
|
13639
|
-
return null;
|
|
13640
|
-
}
|
|
13641
|
-
ctx.font = `${style.fontWeight} ${style.fontSize}px ${style.fontName}`;
|
|
13642
|
-
const contentPadding = getCanvasScale(canvas, CONTENT_PADDING);
|
|
13643
|
-
const contentWidth = canvas.width - contentPadding * 2;
|
|
13644
|
-
const lineHeight = ctx.measureText("M").width;
|
|
13645
|
-
const lineWidths = [];
|
|
13646
|
-
let temp = "";
|
|
13647
|
-
let lastWidth = 0;
|
|
13648
|
-
for (let i = 0; i < content.length; i++) {
|
|
13649
|
-
const lineWidth = ctx.measureText(temp).width;
|
|
13650
|
-
if (lineWidth >= contentWidth) {
|
|
13651
|
-
lines.push(temp);
|
|
13652
|
-
lineWidths.push(lineWidth);
|
|
13653
|
-
temp = "";
|
|
13654
|
-
}
|
|
13655
|
-
lastWidth = lineWidth;
|
|
13656
|
-
temp += content[i];
|
|
13657
|
-
}
|
|
13658
|
-
lines.push(temp);
|
|
13659
|
-
lineWidths.push(lastWidth);
|
|
13660
|
-
size.width = contentWidth;
|
|
13661
|
-
size.height = lines.length * lineHeight;
|
|
13662
|
-
return { origin, size, lineHeight, lineWidths, lines, style };
|
|
13663
|
-
}
|
|
13664
|
-
function getAxisPoint(canvasWidth, origin, style) {
|
|
13665
|
-
const padding = (CONTENT_PADDING + DEFAULT_PADDING) * style.scale;
|
|
13666
|
-
let axisPoint = { x: padding, y: origin.y };
|
|
13667
|
-
if (style.position.startsWith("center")) {
|
|
13668
|
-
axisPoint = { x: canvasWidth / 2, y: origin.y };
|
|
13669
|
-
} else if (style.position.startsWith("right")) {
|
|
13670
|
-
axisPoint = { x: canvasWidth - padding, y: origin.y };
|
|
13671
|
-
}
|
|
13672
|
-
return axisPoint;
|
|
13673
|
-
}
|
|
13674
|
-
function getTextAlign(style) {
|
|
13675
|
-
let align = "left";
|
|
13676
|
-
if (style.position.startsWith("center")) {
|
|
13677
|
-
align = "center";
|
|
13678
|
-
} else if (style.position.startsWith("right")) {
|
|
13679
|
-
align = "right";
|
|
13680
|
-
}
|
|
13681
|
-
return align;
|
|
13682
|
-
}
|
|
13683
|
-
function drawLine(canvas, line, origin, style) {
|
|
13684
|
-
const ctx = canvas.getContext("2d");
|
|
13685
|
-
if (!ctx) {
|
|
13686
|
-
return;
|
|
13687
|
-
}
|
|
13688
|
-
ctx.textBaseline = "top";
|
|
13689
|
-
ctx.font = `${style.fontWeight} ${style.fontSize}px ${style.fontName}`;
|
|
13690
|
-
const axisPoint = getAxisPoint(canvas.width, origin, style);
|
|
13691
|
-
ctx.textAlign = getTextAlign(style);
|
|
13692
|
-
if (style.simplified) {
|
|
13693
|
-
ctx.shadowBlur = 4;
|
|
13694
|
-
ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
|
|
13695
|
-
const offset2 = clamp(style.fontSize / 40, 2, 4);
|
|
13696
|
-
ctx.shadowOffsetY = offset2;
|
|
13697
|
-
ctx.shadowOffsetX = offset2;
|
|
13698
|
-
ctx.fillStyle = "rgba(255,255,255, 0.5)";
|
|
13699
|
-
} else {
|
|
13700
|
-
ctx.fillStyle = style.fontColor;
|
|
13701
|
-
}
|
|
13702
|
-
ctx.fillText(line, Math.round(axisPoint.x), Math.round(axisPoint.y));
|
|
13703
|
-
}
|
|
13704
|
-
function hexToRGB(hex, alpha) {
|
|
13705
|
-
const r = parseInt(hex.slice(1, 3), 16);
|
|
13706
|
-
const g = parseInt(hex.slice(3, 5), 16);
|
|
13707
|
-
const b = parseInt(hex.slice(5, 7), 16);
|
|
13708
|
-
if (alpha) {
|
|
13709
|
-
return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")";
|
|
13710
|
-
}
|
|
13711
|
-
return "rgb(" + r + ", " + g + ", " + b + ")";
|
|
13712
|
-
}
|
|
13713
|
-
function drawBackground(canvas, tile) {
|
|
13714
|
-
const ctx = canvas.getContext("2d");
|
|
13715
|
-
if (!ctx) {
|
|
13716
|
-
return;
|
|
13717
|
-
}
|
|
13718
|
-
let { backgroundColor } = tile.style;
|
|
13719
|
-
let backgroundOpacity = parseDecimal(
|
|
13720
|
-
String(tile.style.backgroundOpacity),
|
|
13721
|
-
-1
|
|
13722
|
-
);
|
|
13723
|
-
if (backgroundOpacity > 255) {
|
|
13724
|
-
backgroundOpacity = 255;
|
|
13725
|
-
}
|
|
13726
|
-
const paddingTop = 2;
|
|
13727
|
-
const paddingBottom = 10;
|
|
13728
|
-
if (backgroundColor !== "transparent") {
|
|
13729
|
-
if (backgroundColor.startsWith("#") && backgroundOpacity >= 0) {
|
|
13730
|
-
backgroundColor = hexToRGB(backgroundColor, backgroundOpacity / 255);
|
|
13731
|
-
}
|
|
13732
|
-
ctx.fillStyle = backgroundColor;
|
|
13733
|
-
const { style } = tile;
|
|
13734
|
-
const padding = (CONTENT_PADDING + DEFAULT_PADDING) * style.scale;
|
|
13735
|
-
const paddingScale = tile.style.fontSize / DEFAULT_FONT_SIZE;
|
|
13736
|
-
for (let j = 0; j < tile.lineWidths.length; j++) {
|
|
13737
|
-
const { lineHeight } = tile;
|
|
13738
|
-
const lineWidth = tile.lineWidths[j];
|
|
13739
|
-
let paddingRight = 30 * paddingScale;
|
|
13740
|
-
let paddingLeft = 10 * paddingScale;
|
|
13741
|
-
let axisPoint = {
|
|
13742
|
-
x: padding - paddingLeft,
|
|
13743
|
-
y: tile.origin.y
|
|
13744
|
-
};
|
|
13745
|
-
if (style.position.startsWith("center")) {
|
|
13746
|
-
paddingLeft = 20 * paddingScale;
|
|
13747
|
-
paddingRight = 20 * paddingScale;
|
|
13748
|
-
axisPoint = {
|
|
13749
|
-
x: (canvas.width - lineWidth) / 2 - paddingLeft,
|
|
13750
|
-
y: tile.origin.y
|
|
13751
|
-
};
|
|
13752
|
-
} else if (style.position.startsWith("right")) {
|
|
13753
|
-
paddingLeft = 30 * paddingScale;
|
|
13754
|
-
paddingRight = 10 * paddingScale;
|
|
13755
|
-
axisPoint = {
|
|
13756
|
-
x: canvas.width - lineWidth - padding - paddingLeft,
|
|
13757
|
-
y: tile.origin.y
|
|
13758
|
-
};
|
|
13759
|
-
}
|
|
13760
|
-
if (j === 0) {
|
|
13761
|
-
ctx.fillRect(
|
|
13762
|
-
axisPoint.x,
|
|
13763
|
-
axisPoint.y - paddingTop > 0 ? axisPoint.y - paddingTop : 0,
|
|
13764
|
-
paddingLeft + lineWidth + paddingRight,
|
|
13765
|
-
paddingTop
|
|
13766
|
-
);
|
|
13767
|
-
}
|
|
13768
|
-
ctx.fillRect(
|
|
13769
|
-
axisPoint.x,
|
|
13770
|
-
axisPoint.y + j * lineHeight,
|
|
13771
|
-
paddingLeft + lineWidth + paddingRight,
|
|
13772
|
-
lineHeight
|
|
13773
|
-
);
|
|
13774
|
-
if (j === tile.lineWidths.length - 1) {
|
|
13775
|
-
ctx.fillRect(
|
|
13776
|
-
axisPoint.x,
|
|
13777
|
-
axisPoint.y + (j + 1) * lineHeight,
|
|
13778
|
-
paddingLeft + lineWidth + paddingRight,
|
|
13779
|
-
paddingBottom
|
|
13780
|
-
);
|
|
13781
|
-
}
|
|
13782
|
-
}
|
|
13783
|
-
}
|
|
13784
|
-
}
|
|
13785
|
-
function drawTile(canvas, tile) {
|
|
13786
|
-
if (!tile.style.simplified) {
|
|
13787
|
-
drawBackground(canvas, tile);
|
|
13788
|
-
}
|
|
13789
|
-
for (let i = 0; i < tile.lines.length; i++) {
|
|
13790
|
-
const origin = {
|
|
13791
|
-
x: tile.origin.x,
|
|
13792
|
-
y: i * tile.lineHeight + tile.origin.y
|
|
13793
|
-
};
|
|
13794
|
-
drawLine(canvas, tile.lines[i], origin, tile.style);
|
|
13795
|
-
}
|
|
13796
|
-
}
|
|
13797
|
-
function drawGroupedWatermarks(canvas, watermarks, groupPosition) {
|
|
13798
|
-
if (!watermarks || watermarks.length === 0) {
|
|
13799
|
-
return;
|
|
13800
|
-
}
|
|
13801
|
-
const tiles = [];
|
|
13802
|
-
let totalHeight = 0;
|
|
13803
|
-
for (let i = 0; i < watermarks.length; i++) {
|
|
13804
|
-
const watermark = watermarks[i];
|
|
13805
|
-
const tile = buildTile(canvas, watermark.content, watermark.style);
|
|
13806
|
-
if (tile) {
|
|
13807
|
-
tiles.push(tile);
|
|
13808
|
-
totalHeight += tile.size.height;
|
|
13809
|
-
}
|
|
13810
|
-
}
|
|
13811
|
-
if (totalHeight <= 0) {
|
|
13812
|
-
console.error("watermarks height " + totalHeight);
|
|
13813
|
-
console.error(JSON.stringify(watermarks));
|
|
13814
|
-
return;
|
|
13815
|
-
}
|
|
13816
|
-
const contentPadding = getCanvasScale(canvas, CONTENT_PADDING);
|
|
13817
|
-
let baseOrigin = { x: contentPadding, y: contentPadding };
|
|
13818
|
-
if (groupPosition === "center") {
|
|
13819
|
-
baseOrigin = {
|
|
13820
|
-
x: contentPadding,
|
|
13821
|
-
y: Math.round((canvas.height - totalHeight) / 2)
|
|
13822
|
-
};
|
|
13823
|
-
} else if (groupPosition === "bottom") {
|
|
13824
|
-
baseOrigin = {
|
|
13825
|
-
x: contentPadding,
|
|
13826
|
-
y: canvas.height - totalHeight - contentPadding
|
|
13827
|
-
};
|
|
13828
|
-
} else if (groupPosition === "top") {
|
|
13829
|
-
baseOrigin = { x: contentPadding, y: contentPadding };
|
|
13830
|
-
}
|
|
13831
|
-
let lastMarginTop = 0;
|
|
13832
|
-
for (let i = 0; i < tiles.length; i++) {
|
|
13833
|
-
const tile = tiles[i];
|
|
13834
|
-
lastMarginTop += tile.style.paddingTop;
|
|
13835
|
-
tile.origin = {
|
|
13836
|
-
x: tile.origin.x + baseOrigin.x,
|
|
13837
|
-
y: lastMarginTop + baseOrigin.y
|
|
13838
|
-
};
|
|
13839
|
-
lastMarginTop += tile.size.height;
|
|
13840
|
-
lastMarginTop += tile.style.paddingBottom;
|
|
13841
|
-
}
|
|
13842
|
-
for (let i = 0; i < tiles.length; i++) {
|
|
13843
|
-
const tile = tiles[i];
|
|
13844
|
-
drawTile(canvas, tile);
|
|
13845
|
-
}
|
|
13846
|
-
}
|
|
13847
|
-
function groupingWatermarks(watermarks) {
|
|
13848
|
-
const topList = [];
|
|
13849
|
-
const centerList = [];
|
|
13850
|
-
const bottomList = [];
|
|
13851
|
-
for (let i = 0; i < watermarks.length; i++) {
|
|
13852
|
-
const watermark = watermarks[i];
|
|
13853
|
-
if (watermark.style.position.endsWith("top")) {
|
|
13854
|
-
topList.push(watermark);
|
|
13855
|
-
} else if (watermark.style.position.endsWith("center")) {
|
|
13856
|
-
centerList.push(watermark);
|
|
13857
|
-
} else if (watermark.style.position.endsWith("bottom")) {
|
|
13858
|
-
bottomList.push(watermark);
|
|
13859
|
-
}
|
|
13860
|
-
}
|
|
13861
|
-
return {
|
|
13862
|
-
[
|
|
13863
|
-
"top"
|
|
13864
|
-
/* Top */
|
|
13865
|
-
]: topList,
|
|
13866
|
-
[
|
|
13867
|
-
"center"
|
|
13868
|
-
/* Center */
|
|
13869
|
-
]: centerList,
|
|
13870
|
-
[
|
|
13871
|
-
"bottom"
|
|
13872
|
-
/* Bottom */
|
|
13873
|
-
]: bottomList
|
|
13874
|
-
};
|
|
13875
|
-
}
|
|
13876
|
-
function renderWatermark(canvas, options) {
|
|
13877
|
-
if (!options.enabled || options.watermarkConfigString === "no") {
|
|
13878
|
-
return Promise.resolve(canvas);
|
|
13879
|
-
}
|
|
13880
|
-
let { watermarkConfigString } = options;
|
|
13881
|
-
if (!isDef(watermarkConfigString) || watermarkConfigString === "default") {
|
|
13882
|
-
watermarkConfigString = "50$lefttop$50*#*time###25$lefttop*#*date";
|
|
13883
|
-
}
|
|
13884
|
-
const watermarks = parseWatermarks(
|
|
13885
|
-
watermarkConfigString,
|
|
13886
|
-
{
|
|
13887
|
-
width: canvas.width,
|
|
13888
|
-
height: canvas.height
|
|
13889
|
-
},
|
|
13890
|
-
options.context
|
|
13891
|
-
);
|
|
13892
|
-
const groupedWatermarks = groupingWatermarks(watermarks);
|
|
13893
|
-
drawGroupedWatermarks(
|
|
13894
|
-
canvas,
|
|
13895
|
-
groupedWatermarks[
|
|
13896
|
-
"top"
|
|
13897
|
-
/* Top */
|
|
13898
|
-
],
|
|
13899
|
-
"top"
|
|
13900
|
-
/* Top */
|
|
13901
|
-
);
|
|
13902
|
-
drawGroupedWatermarks(
|
|
13903
|
-
canvas,
|
|
13904
|
-
groupedWatermarks[
|
|
13905
|
-
"center"
|
|
13906
|
-
/* Center */
|
|
13907
|
-
],
|
|
13908
|
-
"center"
|
|
13909
|
-
/* Center */
|
|
13910
|
-
);
|
|
13911
|
-
drawGroupedWatermarks(
|
|
13912
|
-
canvas,
|
|
13913
|
-
groupedWatermarks[
|
|
13914
|
-
"bottom"
|
|
13915
|
-
/* Bottom */
|
|
13916
|
-
],
|
|
13917
|
-
"bottom"
|
|
13918
|
-
/* Bottom */
|
|
13919
|
-
);
|
|
13920
|
-
return Promise.resolve(canvas);
|
|
13921
|
-
}
|
|
13922
|
-
function checkWatermarkConfigSupported(watermarkConfigString) {
|
|
13923
|
-
if (watermarkConfigString.indexOf("{logo}") > -1) {
|
|
13924
|
-
console.error("水印不支持logo");
|
|
13925
|
-
return false;
|
|
13926
|
-
}
|
|
13927
|
-
const configStringArray = watermarkConfigString.split("###");
|
|
13928
|
-
for (let i = 0; i < configStringArray.length; i++) {
|
|
13929
|
-
const configString = configStringArray[i];
|
|
13930
|
-
const configParts = configString.split("*#*");
|
|
13931
|
-
if (configParts.length === 2) {
|
|
13932
|
-
const styleString = configParts[0];
|
|
13933
|
-
const styleParts = styleString.split("$");
|
|
13934
|
-
if (styleParts.length <= 0) {
|
|
13935
|
-
console.error("水印配置不合法");
|
|
13936
|
-
return false;
|
|
13937
|
-
}
|
|
13938
|
-
}
|
|
13939
|
-
}
|
|
13940
|
-
return true;
|
|
13941
|
-
}
|
|
13942
|
-
var __defProp = Object.defineProperty;
|
|
13943
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
13944
|
-
var __publicField = (obj, key, value) => {
|
|
13945
|
-
__defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
13946
|
-
return value;
|
|
13947
|
-
};
|
|
13948
|
-
const DEFAULT_JPEG_QUALITY = 0.8;
|
|
13949
|
-
const MIN_JPEG_QUALITY = 0.1;
|
|
13950
|
-
const JPEG_QUALITY_STEP = 0.05;
|
|
13951
|
-
class ImageProcessor {
|
|
13952
|
-
// 压缩图片的配置
|
|
13953
|
-
constructor(file, resizeOptions, watermarkOptions, compressOptions) {
|
|
13954
|
-
__publicField(this, "file");
|
|
13955
|
-
__publicField(this, "resizeOptions");
|
|
13956
|
-
__publicField(this, "watermarkOptions");
|
|
13957
|
-
__publicField(this, "compressOptions");
|
|
13958
|
-
this.file = file;
|
|
13959
|
-
this.resizeOptions = resizeOptions;
|
|
13960
|
-
this.watermarkOptions = watermarkOptions;
|
|
13961
|
-
this.compressOptions = compressOptions;
|
|
13962
|
-
}
|
|
13963
|
-
process() {
|
|
13964
|
-
const filename = this.file.name;
|
|
13965
|
-
let fileType = this.file.type;
|
|
13966
|
-
const { lastModified } = this.file;
|
|
13967
|
-
let orientation = 1;
|
|
13968
|
-
if (this.file.size > this.compressOptions.photoFileSizeLimit * 1024) {
|
|
13969
|
-
fileType = "image/jpeg";
|
|
13970
|
-
}
|
|
13971
|
-
if (isIOS$1() && fileType === "image/jpeg" && getIosVersion() < "13.4") {
|
|
13972
|
-
const reader = new FileReader();
|
|
13973
|
-
reader.readAsArrayBuffer(this.file);
|
|
13974
|
-
reader.onload = function(_ref) {
|
|
13975
|
-
const { target } = _ref;
|
|
13976
|
-
if (target == null ? void 0 : target.result) {
|
|
13977
|
-
orientation = getOrientation(target == null ? void 0 : target.result);
|
|
13978
|
-
}
|
|
13979
|
-
};
|
|
13980
|
-
}
|
|
13981
|
-
if (fileType === "image/gif") {
|
|
13982
|
-
fileType = "image/png";
|
|
13983
|
-
}
|
|
13984
|
-
return file2Image(this.file).then(
|
|
13985
|
-
(img) => (
|
|
13986
|
-
// 第一步 resize image
|
|
13987
|
-
resize(img, {
|
|
13988
|
-
inputType: fileType,
|
|
13989
|
-
orientation,
|
|
13990
|
-
sideLengthLimit: this.resizeOptions.maxSideLength,
|
|
13991
|
-
resultType: "canvas"
|
|
13992
|
-
})
|
|
13993
|
-
)
|
|
13994
|
-
).then((result) => {
|
|
13995
|
-
const canvas = result;
|
|
13996
|
-
return renderWatermark(canvas, this.watermarkOptions);
|
|
13997
|
-
}).then((canvas) => {
|
|
13998
|
-
const exportFilename = filename.replace(/\./g, "-") + ".jpg";
|
|
13999
|
-
return this.compress(
|
|
14000
|
-
canvas,
|
|
14001
|
-
exportFilename,
|
|
14002
|
-
lastModified,
|
|
14003
|
-
fileType,
|
|
14004
|
-
DEFAULT_JPEG_QUALITY
|
|
14005
|
-
);
|
|
14006
|
-
});
|
|
14007
|
-
}
|
|
14008
|
-
compress(canvas, filename, lastModified, type, quality) {
|
|
14009
|
-
return canvas2File(canvas, filename, lastModified, type, quality).then(
|
|
14010
|
-
(file) => {
|
|
14011
|
-
if (file.size > this.compressOptions.photoFileSizeLimit * 1024 && quality - JPEG_QUALITY_STEP > MIN_JPEG_QUALITY) {
|
|
14012
|
-
return this.compress(
|
|
14013
|
-
canvas,
|
|
14014
|
-
filename,
|
|
14015
|
-
lastModified,
|
|
14016
|
-
type,
|
|
14017
|
-
quality - JPEG_QUALITY_STEP
|
|
14018
|
-
);
|
|
14019
|
-
}
|
|
14020
|
-
return Promise.resolve(file);
|
|
14021
|
-
}
|
|
14022
|
-
);
|
|
14023
|
-
}
|
|
14024
|
-
}
|
|
14025
13065
|
const chooseImage = (type) => {
|
|
14026
13066
|
return new Promise((resolve, reject) => {
|
|
14027
13067
|
window.wx.chooseImage({
|
|
@@ -14135,7 +13175,8 @@ const mediaPickerProps = {
|
|
|
14135
13175
|
// 文件删除前的回调函数,返回 false 可终止文件读取,支持返回 Promise
|
|
14136
13176
|
beforeDelete: Function,
|
|
14137
13177
|
// 是否强制使用微信
|
|
14138
|
-
useWx: Boolean
|
|
13178
|
+
useWx: Boolean,
|
|
13179
|
+
imageSizeType: makeStringProp("compressed")
|
|
14139
13180
|
};
|
|
14140
13181
|
var stdin_default$B = defineComponent({
|
|
14141
13182
|
name: name$u,
|
|
@@ -14343,6 +13384,47 @@ var stdin_default$B = defineComponent({
|
|
|
14343
13384
|
message: ""
|
|
14344
13385
|
};
|
|
14345
13386
|
};
|
|
13387
|
+
const transformImageFilesWithoutCompress = (files) => {
|
|
13388
|
+
const mediaList = files.map((file) => {
|
|
13389
|
+
return file2DataURL(file).then((base64) => {
|
|
13390
|
+
const media = {
|
|
13391
|
+
showSrc: base64,
|
|
13392
|
+
type: "photo",
|
|
13393
|
+
file,
|
|
13394
|
+
// 需要以原始file的信息作为唯一标识
|
|
13395
|
+
uniqueCode: getFileUniqueCode(file),
|
|
13396
|
+
lastModified: file.lastModified,
|
|
13397
|
+
fileSize: file.size,
|
|
13398
|
+
// 修改后大小,水印,压缩等
|
|
13399
|
+
fileName: file.name,
|
|
13400
|
+
// 修改后名称
|
|
13401
|
+
deletable: true,
|
|
13402
|
+
message: "",
|
|
13403
|
+
originalName: file.name,
|
|
13404
|
+
// 原始名称
|
|
13405
|
+
originalSize: file.size
|
|
13406
|
+
// 原始大小
|
|
13407
|
+
};
|
|
13408
|
+
return media;
|
|
13409
|
+
});
|
|
13410
|
+
});
|
|
13411
|
+
showLoadingToast({
|
|
13412
|
+
message: "处理中...",
|
|
13413
|
+
forbidClick: true,
|
|
13414
|
+
duration: 0
|
|
13415
|
+
});
|
|
13416
|
+
return Promise.all(mediaList).then((medias) => {
|
|
13417
|
+
const _medias = [];
|
|
13418
|
+
medias.forEach((media) => {
|
|
13419
|
+
if (isDef(media)) {
|
|
13420
|
+
_medias.push(media);
|
|
13421
|
+
}
|
|
13422
|
+
});
|
|
13423
|
+
return _medias;
|
|
13424
|
+
}).finally(() => {
|
|
13425
|
+
closeToast();
|
|
13426
|
+
});
|
|
13427
|
+
};
|
|
14346
13428
|
const transformImageFiles = (files) => {
|
|
14347
13429
|
const promisesTodo = [];
|
|
14348
13430
|
const resizeOptions = new ResizeOptions(props.maxImageSideLength);
|
|
@@ -14427,7 +13509,7 @@ var stdin_default$B = defineComponent({
|
|
|
14427
13509
|
if (imageFiles.length === 0) {
|
|
14428
13510
|
promise = Promise.resolve([]);
|
|
14429
13511
|
} else {
|
|
14430
|
-
promise = transformImageFiles(imageFiles);
|
|
13512
|
+
promise = props.imageSizeType === "original" ? transformImageFilesWithoutCompress(imageFiles) : transformImageFiles(imageFiles);
|
|
14431
13513
|
}
|
|
14432
13514
|
promise.then((medias) => {
|
|
14433
13515
|
if (medias && medias.length > 0) {
|
|
@@ -16359,7 +15441,7 @@ function getColumnsType(columns, fields) {
|
|
|
16359
15441
|
return "default";
|
|
16360
15442
|
}
|
|
16361
15443
|
function findIndexOfEnabledOption(options, index) {
|
|
16362
|
-
index = clamp
|
|
15444
|
+
index = clamp(index, 0, options.length);
|
|
16363
15445
|
for (let i = index; i < options.length; i++) {
|
|
16364
15446
|
if (!options[i].disabled)
|
|
16365
15447
|
return i;
|
|
@@ -16446,7 +15528,7 @@ var stdin_default$o = defineComponent({
|
|
|
16446
15528
|
const baseOffset = () => 0;
|
|
16447
15529
|
const setRangeOffset = (distance) => {
|
|
16448
15530
|
const maxOffsetVal = wrapper.value.clientHeight - props.wrapHeight;
|
|
16449
|
-
currentOffset.value = clamp
|
|
15531
|
+
currentOffset.value = clamp(distance, -maxOffsetVal, 0);
|
|
16450
15532
|
};
|
|
16451
15533
|
const isSearchEmpty = computed(() => {
|
|
16452
15534
|
return !props.options.some((option) => {
|
|
@@ -17705,7 +16787,7 @@ var stdin_default$i = defineComponent({
|
|
|
17705
16787
|
const min = +props.min;
|
|
17706
16788
|
const max = +props.max;
|
|
17707
16789
|
const step = +props.step;
|
|
17708
|
-
value = clamp
|
|
16790
|
+
value = clamp(value, min, max);
|
|
17709
16791
|
const diff = Math.round((value - min) / step) * step;
|
|
17710
16792
|
return addNumber(min, diff);
|
|
17711
16793
|
};
|
|
@@ -18451,7 +17533,7 @@ var stdin_default$e = defineComponent({
|
|
|
18451
17533
|
if (isEdge) {
|
|
18452
17534
|
preventDefault(event, props.stopPropagation);
|
|
18453
17535
|
}
|
|
18454
|
-
state.offset = clamp
|
|
17536
|
+
state.offset = clamp(deltaX.value + startOffset, -rightWidth.value, leftWidth.value);
|
|
18455
17537
|
}
|
|
18456
17538
|
};
|
|
18457
17539
|
const onTouchEnd = () => {
|
|
@@ -20765,7 +19847,7 @@ const Lazyload = {
|
|
|
20765
19847
|
});
|
|
20766
19848
|
}
|
|
20767
19849
|
};
|
|
20768
|
-
const version = "3.1.
|
|
19850
|
+
const version = "3.1.21";
|
|
20769
19851
|
function install(app) {
|
|
20770
19852
|
const components = [
|
|
20771
19853
|
ActionSheet,
|