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/index.d.ts
CHANGED
package/lib/index.js
CHANGED
|
@@ -176,7 +176,7 @@ __reExport(stdin_exports, require("./time-picker"), module.exports);
|
|
|
176
176
|
__reExport(stdin_exports, require("./timeline"), module.exports);
|
|
177
177
|
__reExport(stdin_exports, require("./toast"), module.exports);
|
|
178
178
|
__reExport(stdin_exports, require("./uploader"), module.exports);
|
|
179
|
-
const version = "3.1.
|
|
179
|
+
const version = "3.1.21";
|
|
180
180
|
function install(app) {
|
|
181
181
|
const components = [
|
|
182
182
|
import_action_sheet.ActionSheet,
|
|
@@ -1,55 +1,55 @@
|
|
|
1
|
-
import type { App } from 'vue';
|
|
2
|
-
|
|
3
|
-
declare type ListenEvent =
|
|
4
|
-
| 'scroll'
|
|
5
|
-
| 'wheel'
|
|
6
|
-
| 'mousewheel'
|
|
7
|
-
| 'resize'
|
|
8
|
-
| 'animationend'
|
|
9
|
-
| 'transitionend'
|
|
10
|
-
| 'touchmove';
|
|
11
|
-
|
|
12
|
-
// eslint-disable-next-line
|
|
13
|
-
declare type Callback = (listener: any, options: LazyloadOptions) => void;
|
|
14
|
-
|
|
15
|
-
declare type Filter = {
|
|
16
|
-
webp?: Callback;
|
|
17
|
-
progressive?: Callback;
|
|
18
|
-
};
|
|
19
|
-
|
|
20
|
-
declare type Adapter = {
|
|
21
|
-
error?: Callback;
|
|
22
|
-
loaded?: Callback;
|
|
23
|
-
loading?: Callback;
|
|
24
|
-
};
|
|
25
|
-
|
|
26
|
-
export declare type LazyloadOptions = {
|
|
27
|
-
error?: string;
|
|
28
|
-
filter?: Filter;
|
|
29
|
-
silent?: boolean;
|
|
30
|
-
adapter?: Adapter;
|
|
31
|
-
loading?: string;
|
|
32
|
-
attempt?: number;
|
|
33
|
-
preLoad?: number;
|
|
34
|
-
observer?: boolean;
|
|
35
|
-
lazyImage?: boolean;
|
|
36
|
-
throttleWait?: number;
|
|
37
|
-
listenEvents?: ListenEvent[];
|
|
38
|
-
dispatchEvent?: boolean;
|
|
39
|
-
lazyComponent?: boolean;
|
|
40
|
-
observerOptions?: IntersectionObserverInit;
|
|
41
|
-
};
|
|
42
|
-
|
|
43
|
-
export declare const Lazyload: {
|
|
44
|
-
install(app: App, options?: LazyloadOptions): void;
|
|
45
|
-
};
|
|
46
|
-
|
|
47
|
-
declare module '@vue/runtime-core' {
|
|
48
|
-
interface ComponentCustomProperties {
|
|
49
|
-
$Lazyload: {
|
|
50
|
-
$on: (event: string, handler: Callback) => void;
|
|
51
|
-
$off: (event: string, handler?: Callback) => void;
|
|
52
|
-
$once: (event: string, handler: Callback) => void;
|
|
53
|
-
};
|
|
54
|
-
}
|
|
55
|
-
}
|
|
1
|
+
import type { App } from 'vue';
|
|
2
|
+
|
|
3
|
+
declare type ListenEvent =
|
|
4
|
+
| 'scroll'
|
|
5
|
+
| 'wheel'
|
|
6
|
+
| 'mousewheel'
|
|
7
|
+
| 'resize'
|
|
8
|
+
| 'animationend'
|
|
9
|
+
| 'transitionend'
|
|
10
|
+
| 'touchmove';
|
|
11
|
+
|
|
12
|
+
// eslint-disable-next-line
|
|
13
|
+
declare type Callback = (listener: any, options: LazyloadOptions) => void;
|
|
14
|
+
|
|
15
|
+
declare type Filter = {
|
|
16
|
+
webp?: Callback;
|
|
17
|
+
progressive?: Callback;
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
declare type Adapter = {
|
|
21
|
+
error?: Callback;
|
|
22
|
+
loaded?: Callback;
|
|
23
|
+
loading?: Callback;
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
export declare type LazyloadOptions = {
|
|
27
|
+
error?: string;
|
|
28
|
+
filter?: Filter;
|
|
29
|
+
silent?: boolean;
|
|
30
|
+
adapter?: Adapter;
|
|
31
|
+
loading?: string;
|
|
32
|
+
attempt?: number;
|
|
33
|
+
preLoad?: number;
|
|
34
|
+
observer?: boolean;
|
|
35
|
+
lazyImage?: boolean;
|
|
36
|
+
throttleWait?: number;
|
|
37
|
+
listenEvents?: ListenEvent[];
|
|
38
|
+
dispatchEvent?: boolean;
|
|
39
|
+
lazyComponent?: boolean;
|
|
40
|
+
observerOptions?: IntersectionObserverInit;
|
|
41
|
+
};
|
|
42
|
+
|
|
43
|
+
export declare const Lazyload: {
|
|
44
|
+
install(app: App, options?: LazyloadOptions): void;
|
|
45
|
+
};
|
|
46
|
+
|
|
47
|
+
declare module '@vue/runtime-core' {
|
|
48
|
+
interface ComponentCustomProperties {
|
|
49
|
+
$Lazyload: {
|
|
50
|
+
$on: (event: string, handler: Callback) => void;
|
|
51
|
+
$off: (event: string, handler?: Callback) => void;
|
|
52
|
+
$once: (event: string, handler: Callback) => void;
|
|
53
|
+
};
|
|
54
|
+
}
|
|
55
|
+
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ExtractPropTypes, PropType } from 'vue';
|
|
2
|
-
import type { Media, MediaAfterRead, MediaBeforeDelete, MediaBeforeRead, MediaPick, MediaPreview } from './type';
|
|
2
|
+
import type { Media, MediaAfterRead, MediaBeforeDelete, MediaBeforeRead, MediaPick, MediaPreview, MediaSizeType } from './type';
|
|
3
3
|
declare const mediaPickerProps: {
|
|
4
4
|
disabled: BooleanConstructor;
|
|
5
5
|
showTitle: BooleanConstructor;
|
|
@@ -73,6 +73,10 @@ declare const mediaPickerProps: {
|
|
|
73
73
|
afterRead: PropType<MediaAfterRead>;
|
|
74
74
|
beforeDelete: PropType<MediaBeforeDelete>;
|
|
75
75
|
useWx: BooleanConstructor;
|
|
76
|
+
imageSizeType: {
|
|
77
|
+
type: PropType<MediaSizeType>;
|
|
78
|
+
default: MediaSizeType;
|
|
79
|
+
};
|
|
76
80
|
};
|
|
77
81
|
export type MediaPickerProps = ExtractPropTypes<typeof mediaPickerProps>;
|
|
78
82
|
declare const _default: import("vue").DefineComponent<{
|
|
@@ -148,6 +152,10 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
148
152
|
afterRead: PropType<MediaAfterRead>;
|
|
149
153
|
beforeDelete: PropType<MediaBeforeDelete>;
|
|
150
154
|
useWx: BooleanConstructor;
|
|
155
|
+
imageSizeType: {
|
|
156
|
+
type: PropType<MediaSizeType>;
|
|
157
|
+
default: MediaSizeType;
|
|
158
|
+
};
|
|
151
159
|
}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:mediaList" | "delete")[], "update:mediaList" | "delete", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
|
|
152
160
|
disabled: BooleanConstructor;
|
|
153
161
|
showTitle: BooleanConstructor;
|
|
@@ -221,6 +229,10 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
221
229
|
afterRead: PropType<MediaAfterRead>;
|
|
222
230
|
beforeDelete: PropType<MediaBeforeDelete>;
|
|
223
231
|
useWx: BooleanConstructor;
|
|
232
|
+
imageSizeType: {
|
|
233
|
+
type: PropType<MediaSizeType>;
|
|
234
|
+
default: MediaSizeType;
|
|
235
|
+
};
|
|
224
236
|
}>> & {
|
|
225
237
|
"onUpdate:mediaList"?: ((...args: any[]) => any) | undefined;
|
|
226
238
|
onDelete?: ((...args: any[]) => any) | undefined;
|
|
@@ -246,5 +258,6 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
246
258
|
allowPickAudio: boolean;
|
|
247
259
|
allowPickFile: boolean;
|
|
248
260
|
useWx: boolean;
|
|
261
|
+
imageSizeType: MediaSizeType;
|
|
249
262
|
}, {}>;
|
|
250
263
|
export default _default;
|
|
@@ -52,10 +52,7 @@ var import_TakeAudioIcon = __toESM(require("./image/TakeAudioIcon"));
|
|
|
52
52
|
var import_PickFileIcon = __toESM(require("./image/PickFileIcon"));
|
|
53
53
|
var import_media_util = require("./util/media-util");
|
|
54
54
|
var import_image_preview = require("../image-preview");
|
|
55
|
-
var
|
|
56
|
-
var import_compress_options = require("./watermark/compress-options");
|
|
57
|
-
var import_watermark = require("./watermark/watermark");
|
|
58
|
-
var import_image_processor = require("./watermark/image-processor");
|
|
55
|
+
var import_app_media_utils = require("@egova-mobile/app-media-utils");
|
|
59
56
|
var import_utils2 = require("../field/utils");
|
|
60
57
|
var import_wx_util = require("./util/wx-util");
|
|
61
58
|
const [name, bem] = (0, import_utils.createNamespace)("media-picker");
|
|
@@ -109,7 +106,8 @@ const mediaPickerProps = {
|
|
|
109
106
|
// 文件删除前的回调函数,返回 false 可终止文件读取,支持返回 Promise
|
|
110
107
|
beforeDelete: Function,
|
|
111
108
|
// 是否强制使用微信
|
|
112
|
-
useWx: Boolean
|
|
109
|
+
useWx: Boolean,
|
|
110
|
+
imageSizeType: (0, import_utils.makeStringProp)("compressed")
|
|
113
111
|
};
|
|
114
112
|
var stdin_default = (0, import_vue2.defineComponent)({
|
|
115
113
|
name,
|
|
@@ -317,13 +315,54 @@ var stdin_default = (0, import_vue2.defineComponent)({
|
|
|
317
315
|
message: ""
|
|
318
316
|
};
|
|
319
317
|
};
|
|
318
|
+
const transformImageFilesWithoutCompress = (files) => {
|
|
319
|
+
const mediaList = files.map((file) => {
|
|
320
|
+
return (0, import_media_util.file2DataURL)(file).then((base64) => {
|
|
321
|
+
const media = {
|
|
322
|
+
showSrc: base64,
|
|
323
|
+
type: "photo",
|
|
324
|
+
file,
|
|
325
|
+
// 需要以原始file的信息作为唯一标识
|
|
326
|
+
uniqueCode: (0, import_media_util.getFileUniqueCode)(file),
|
|
327
|
+
lastModified: file.lastModified,
|
|
328
|
+
fileSize: file.size,
|
|
329
|
+
// 修改后大小,水印,压缩等
|
|
330
|
+
fileName: file.name,
|
|
331
|
+
// 修改后名称
|
|
332
|
+
deletable: true,
|
|
333
|
+
message: "",
|
|
334
|
+
originalName: file.name,
|
|
335
|
+
// 原始名称
|
|
336
|
+
originalSize: file.size
|
|
337
|
+
// 原始大小
|
|
338
|
+
};
|
|
339
|
+
return media;
|
|
340
|
+
});
|
|
341
|
+
});
|
|
342
|
+
(0, import_toast.showLoadingToast)({
|
|
343
|
+
message: "\u5904\u7406\u4E2D...",
|
|
344
|
+
forbidClick: true,
|
|
345
|
+
duration: 0
|
|
346
|
+
});
|
|
347
|
+
return Promise.all(mediaList).then((medias) => {
|
|
348
|
+
const _medias = [];
|
|
349
|
+
medias.forEach((media) => {
|
|
350
|
+
if ((0, import_utils.isDef)(media)) {
|
|
351
|
+
_medias.push(media);
|
|
352
|
+
}
|
|
353
|
+
});
|
|
354
|
+
return _medias;
|
|
355
|
+
}).finally(() => {
|
|
356
|
+
(0, import_toast.closeToast)();
|
|
357
|
+
});
|
|
358
|
+
};
|
|
320
359
|
const transformImageFiles = (files) => {
|
|
321
360
|
const promisesTodo = [];
|
|
322
|
-
const resizeOptions = new
|
|
323
|
-
const compressOptions = new
|
|
361
|
+
const resizeOptions = new import_app_media_utils.ResizeOptions(props.maxImageSideLength);
|
|
362
|
+
const compressOptions = new import_app_media_utils.CompressOptions(props.maxImageFileSize);
|
|
324
363
|
for (let i = 0; i < files.length; i++) {
|
|
325
364
|
const file = files[i];
|
|
326
|
-
const watermarkEnabled = props.watermarkOptions && props.watermarkOptions.watermarkConfigString && (0,
|
|
365
|
+
const watermarkEnabled = props.watermarkOptions && props.watermarkOptions.watermarkConfigString && (0, import_app_media_utils.checkWatermarkConfigSupported)(props.watermarkOptions.watermarkConfigString);
|
|
327
366
|
let watermarkOpt;
|
|
328
367
|
if (watermarkEnabled) {
|
|
329
368
|
watermarkOpt = {
|
|
@@ -341,7 +380,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
|
|
|
341
380
|
enabled: false
|
|
342
381
|
};
|
|
343
382
|
}
|
|
344
|
-
const promise = new
|
|
383
|
+
const promise = new import_app_media_utils.ImageProcessor(file, resizeOptions, watermarkOpt, compressOptions).process().then((f) => {
|
|
345
384
|
if (!f) {
|
|
346
385
|
return Promise.resolve(null);
|
|
347
386
|
}
|
|
@@ -401,7 +440,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
|
|
|
401
440
|
if (imageFiles.length === 0) {
|
|
402
441
|
promise = Promise.resolve([]);
|
|
403
442
|
} else {
|
|
404
|
-
promise = transformImageFiles(imageFiles);
|
|
443
|
+
promise = props.imageSizeType === "original" ? transformImageFilesWithoutCompress(imageFiles) : transformImageFiles(imageFiles);
|
|
405
444
|
}
|
|
406
445
|
promise.then((medias) => {
|
|
407
446
|
if (medias && medias.length > 0) {
|
|
@@ -61,6 +61,10 @@ export declare const MediaPicker: import("../utils").WithInstall<import("vue").D
|
|
|
61
61
|
afterRead: import("vue").PropType<import("./type").MediaAfterRead>;
|
|
62
62
|
beforeDelete: import("vue").PropType<import("./type").MediaBeforeDelete>;
|
|
63
63
|
useWx: BooleanConstructor;
|
|
64
|
+
imageSizeType: {
|
|
65
|
+
type: import("vue").PropType<import("./type").MediaSizeType>;
|
|
66
|
+
default: import("./type").MediaSizeType;
|
|
67
|
+
};
|
|
64
68
|
}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:mediaList" | "delete")[], "update:mediaList" | "delete", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
|
65
69
|
disabled: BooleanConstructor;
|
|
66
70
|
showTitle: BooleanConstructor;
|
|
@@ -124,6 +128,10 @@ export declare const MediaPicker: import("../utils").WithInstall<import("vue").D
|
|
|
124
128
|
afterRead: import("vue").PropType<import("./type").MediaAfterRead>;
|
|
125
129
|
beforeDelete: import("vue").PropType<import("./type").MediaBeforeDelete>;
|
|
126
130
|
useWx: BooleanConstructor;
|
|
131
|
+
imageSizeType: {
|
|
132
|
+
type: import("vue").PropType<import("./type").MediaSizeType>;
|
|
133
|
+
default: import("./type").MediaSizeType;
|
|
134
|
+
};
|
|
127
135
|
}>> & {
|
|
128
136
|
"onUpdate:mediaList"?: ((...args: any[]) => any) | undefined;
|
|
129
137
|
onDelete?: ((...args: any[]) => any) | undefined;
|
|
@@ -149,10 +157,11 @@ export declare const MediaPicker: import("../utils").WithInstall<import("vue").D
|
|
|
149
157
|
allowPickAudio: boolean;
|
|
150
158
|
allowPickFile: boolean;
|
|
151
159
|
useWx: boolean;
|
|
160
|
+
imageSizeType: import("./type").MediaSizeType;
|
|
152
161
|
}, {}>>;
|
|
153
162
|
export default MediaPicker;
|
|
154
163
|
export type { MediaPickerProps } from './MediaPicker';
|
|
155
|
-
export type { Media, MediaType, MediaAddType, MediaUploadStatus, MediaPreview, MediaPick, MediaBeforeRead, MediaAfterRead, MediaBeforeDelete, MediaPickerThemeVars, } from './type';
|
|
164
|
+
export type { Media, MediaType, MediaAddType, MediaUploadStatus, MediaPreview, MediaPick, MediaBeforeRead, MediaAfterRead, MediaBeforeDelete, MediaPickerThemeVars, MediaSizeType, } from './type';
|
|
156
165
|
export { defaultMedia } from './type';
|
|
157
166
|
declare module 'vue' {
|
|
158
167
|
interface GlobalComponents {
|
|
@@ -2,6 +2,7 @@ export type MediaType = 'photo' | 'audio' | 'video' | 'file';
|
|
|
2
2
|
export type MediaAddType = 'take' | 'pick' | 'take_and_pick';
|
|
3
3
|
export type MediaUploadStatus = 'uploading' | 'done' | 'failed';
|
|
4
4
|
export type WxMediaType = 'camera' | 'album';
|
|
5
|
+
export type MediaSizeType = 'original' | 'compressed';
|
|
5
6
|
export type Media = {
|
|
6
7
|
file?: File;
|
|
7
8
|
url?: string;
|
|
@@ -19,20 +19,6 @@ export declare function getUniqueFileName(file: File, suffix?: string): string;
|
|
|
19
19
|
* @param file
|
|
20
20
|
*/
|
|
21
21
|
export declare function file2DataURL(file: File): Promise<string>;
|
|
22
|
-
/**
|
|
23
|
-
* Convert file to image
|
|
24
|
-
* @param file
|
|
25
|
-
*/
|
|
26
|
-
export declare function file2Image(file: File): Promise<HTMLImageElement>;
|
|
27
|
-
/**
|
|
28
|
-
* Draw image on canvas
|
|
29
|
-
* @param img
|
|
30
|
-
* @param type
|
|
31
|
-
* @param orientation
|
|
32
|
-
* @param width
|
|
33
|
-
* @param height
|
|
34
|
-
*/
|
|
35
|
-
export declare function image2Canvas(img: HTMLImageElement, type: string, orientation?: number, width?: number, height?: number): Promise<HTMLCanvasElement>;
|
|
36
22
|
/**
|
|
37
23
|
* Export File from canvas
|
|
38
24
|
* @param canvas
|
|
@@ -43,44 +29,3 @@ export declare function image2Canvas(img: HTMLImageElement, type: string, orient
|
|
|
43
29
|
* @see {@link https://meshworld.in/convert-canvas-to-an-image-using-javascript/}
|
|
44
30
|
*/
|
|
45
31
|
export declare function canvas2File(canvas: HTMLCanvasElement, fileName: string, lastModified: number, type?: string, quality?: number): Promise<File>;
|
|
46
|
-
export declare function image2file(img: HTMLImageElement, fileName: string, lastModified: number, type?: string, quality?: number): Promise<File>;
|
|
47
|
-
/**
|
|
48
|
-
* Export Image from canvas
|
|
49
|
-
* @param canvas
|
|
50
|
-
* @param type
|
|
51
|
-
* @param quality
|
|
52
|
-
* @see {@link https://meshworld.in/convert-canvas-to-an-image-using-javascript/}
|
|
53
|
-
*/
|
|
54
|
-
export declare function canvas2Image(canvas: HTMLCanvasElement, type?: string, quality?: number): Promise<HTMLImageElement>;
|
|
55
|
-
export type ResizeResultType = 'image' | 'canvas';
|
|
56
|
-
/**
|
|
57
|
-
* Get orientation value from given array buffer.
|
|
58
|
-
* @param {ArrayBuffer} arrayBuffer - The array buffer to read.
|
|
59
|
-
* @returns {number} The read orientation value.
|
|
60
|
-
* Source:https://github.com/fengyuanchen/compressorjs/blob/main/src/utilities.js
|
|
61
|
-
* 99行,resetAndGetOrientation方法
|
|
62
|
-
*/
|
|
63
|
-
export declare function getOrientation(arrayBuffer: ArrayBuffer): number | undefined;
|
|
64
|
-
/**
|
|
65
|
-
* 缩放图片
|
|
66
|
-
* @param img:HTMLImageElement 图片对象
|
|
67
|
-
* @param inputType 图片类型
|
|
68
|
-
* @param orientation
|
|
69
|
-
* @param imageWidth 图片宽度
|
|
70
|
-
* @param imageHeight 图片高度
|
|
71
|
-
// * @param equalProportion 是否等比例拉伸,默认是,目前只支持等比例拉伸
|
|
72
|
-
* @param sideLengthLimit 图片边长限制
|
|
73
|
-
* @param baseOnShortSide 是否以短边为限制
|
|
74
|
-
* @param resultType: ResizeResultType, "image" | "canvas"
|
|
75
|
-
*/
|
|
76
|
-
export declare function resize(img: HTMLImageElement, { inputType, orientation, // 图片的方向
|
|
77
|
-
imageWidth, imageHeight, sideLengthLimit, baseOnShortSide, // 是否以短边为基准缩放
|
|
78
|
-
resultType, }: {
|
|
79
|
-
inputType?: string | undefined;
|
|
80
|
-
orientation?: number | undefined;
|
|
81
|
-
imageWidth?: number | undefined;
|
|
82
|
-
imageHeight?: number | undefined;
|
|
83
|
-
sideLengthLimit?: number | undefined;
|
|
84
|
-
baseOnShortSide?: boolean | undefined;
|
|
85
|
-
resultType?: string | undefined;
|
|
86
|
-
}): Promise<HTMLImageElement | HTMLCanvasElement>;
|
|
@@ -21,34 +21,17 @@ __export(stdin_exports, {
|
|
|
21
21
|
MIN_SIDE_LENGTH: () => MIN_SIDE_LENGTH,
|
|
22
22
|
PHOTO_FILE_SIZE_LIMIT: () => PHOTO_FILE_SIZE_LIMIT,
|
|
23
23
|
canvas2File: () => canvas2File,
|
|
24
|
-
canvas2Image: () => canvas2Image,
|
|
25
24
|
file2DataURL: () => file2DataURL,
|
|
26
|
-
file2Image: () => file2Image,
|
|
27
25
|
getFileUniqueCode: () => getFileUniqueCode,
|
|
28
|
-
getOrientation: () => getOrientation,
|
|
29
26
|
getUniqueFileName: () => getUniqueFileName,
|
|
30
|
-
image2Canvas: () => image2Canvas,
|
|
31
|
-
image2file: () => image2file,
|
|
32
27
|
isAudioType: () => isAudioType,
|
|
33
28
|
isImageType: () => isImageType,
|
|
34
|
-
isVideoType: () => isVideoType
|
|
35
|
-
resize: () => resize
|
|
29
|
+
isVideoType: () => isVideoType
|
|
36
30
|
});
|
|
37
31
|
module.exports = __toCommonJS(stdin_exports);
|
|
38
32
|
const MAX_SIDE_LENGTH = 1920;
|
|
39
33
|
const MIN_SIDE_LENGTH = 480;
|
|
40
34
|
const PHOTO_FILE_SIZE_LIMIT = 1e3;
|
|
41
|
-
var Orientation = /* @__PURE__ */ ((Orientation2) => {
|
|
42
|
-
Orientation2[Orientation2["TOP_AND_LEFT"] = 1] = "TOP_AND_LEFT";
|
|
43
|
-
Orientation2[Orientation2["TOP_AND_RIGHT"] = 2] = "TOP_AND_RIGHT";
|
|
44
|
-
Orientation2[Orientation2["BOTTOM_AND_RIGHT"] = 3] = "BOTTOM_AND_RIGHT";
|
|
45
|
-
Orientation2[Orientation2["BOTTOM_AND_LEFT"] = 4] = "BOTTOM_AND_LEFT";
|
|
46
|
-
Orientation2[Orientation2["LEFT_AND_TOP"] = 5] = "LEFT_AND_TOP";
|
|
47
|
-
Orientation2[Orientation2["RIGHT_AND_TOP"] = 6] = "RIGHT_AND_TOP";
|
|
48
|
-
Orientation2[Orientation2["RIGHT_AND_BOTTOM"] = 7] = "RIGHT_AND_BOTTOM";
|
|
49
|
-
Orientation2[Orientation2["LEFT_AND_BOTTOM"] = 8] = "LEFT_AND_BOTTOM";
|
|
50
|
-
return Orientation2;
|
|
51
|
-
})(Orientation || {});
|
|
52
35
|
function isImageType(file) {
|
|
53
36
|
return file.type.indexOf("image/") >= 0;
|
|
54
37
|
}
|
|
@@ -72,47 +55,6 @@ function getUniqueFileName(file, suffix = "") {
|
|
|
72
55
|
)}`;
|
|
73
56
|
return suffix ? name + "." + suffix : name;
|
|
74
57
|
}
|
|
75
|
-
function adjustImgOrientation(ctx, img, orientation, width, height) {
|
|
76
|
-
switch (orientation) {
|
|
77
|
-
case 3 /* BOTTOM_AND_RIGHT */:
|
|
78
|
-
ctx.rotate(180 * Math.PI / 180);
|
|
79
|
-
ctx.drawImage(img, -width, -height, width, height);
|
|
80
|
-
break;
|
|
81
|
-
case 6 /* RIGHT_AND_TOP */:
|
|
82
|
-
ctx.rotate(90 * Math.PI / 180);
|
|
83
|
-
ctx.drawImage(img, 0, -width, height, width);
|
|
84
|
-
break;
|
|
85
|
-
case 8 /* LEFT_AND_BOTTOM */:
|
|
86
|
-
ctx.rotate(270 * Math.PI / 180);
|
|
87
|
-
ctx.drawImage(img, -height, 0, height, width);
|
|
88
|
-
break;
|
|
89
|
-
case 2 /* TOP_AND_RIGHT */:
|
|
90
|
-
ctx.translate(width, 0);
|
|
91
|
-
ctx.scale(-1, 1);
|
|
92
|
-
ctx.drawImage(img, 0, 0, width, height);
|
|
93
|
-
break;
|
|
94
|
-
case 4 /* BOTTOM_AND_LEFT */:
|
|
95
|
-
ctx.translate(width, 0);
|
|
96
|
-
ctx.scale(-1, 1);
|
|
97
|
-
ctx.rotate(180 * Math.PI / 180);
|
|
98
|
-
ctx.drawImage(img, -width, -height, width, height);
|
|
99
|
-
break;
|
|
100
|
-
case 5 /* LEFT_AND_TOP */:
|
|
101
|
-
ctx.translate(width, 0);
|
|
102
|
-
ctx.scale(-1, 1);
|
|
103
|
-
ctx.rotate(90 * Math.PI / 180);
|
|
104
|
-
ctx.drawImage(img, 0, -width, height, width);
|
|
105
|
-
break;
|
|
106
|
-
case 7 /* RIGHT_AND_BOTTOM */:
|
|
107
|
-
ctx.translate(width, 0);
|
|
108
|
-
ctx.scale(-1, 1);
|
|
109
|
-
ctx.rotate(270 * Math.PI / 180);
|
|
110
|
-
ctx.drawImage(img, -height, 0, height, width);
|
|
111
|
-
break;
|
|
112
|
-
default:
|
|
113
|
-
ctx.drawImage(img, 0, 0, width, height);
|
|
114
|
-
}
|
|
115
|
-
}
|
|
116
58
|
function file2DataURL(file) {
|
|
117
59
|
return new Promise((resolve, reject) => {
|
|
118
60
|
const a = new FileReader();
|
|
@@ -126,39 +68,6 @@ function file2DataURL(file) {
|
|
|
126
68
|
a.readAsDataURL(file);
|
|
127
69
|
});
|
|
128
70
|
}
|
|
129
|
-
function file2Image(file) {
|
|
130
|
-
return new Promise((resolve, reject) => {
|
|
131
|
-
file2DataURL(file).then((url) => {
|
|
132
|
-
const img = new Image();
|
|
133
|
-
img.src = url;
|
|
134
|
-
img.onload = function() {
|
|
135
|
-
if (img.complete) {
|
|
136
|
-
resolve(img);
|
|
137
|
-
} else {
|
|
138
|
-
reject(new Error("\u6587\u4EF6\u52A0\u8F7D\u5931\u8D25"));
|
|
139
|
-
}
|
|
140
|
-
};
|
|
141
|
-
}).catch(reject);
|
|
142
|
-
});
|
|
143
|
-
}
|
|
144
|
-
function image2Canvas(img, type, orientation, width, height) {
|
|
145
|
-
const canvas = document.createElement("canvas");
|
|
146
|
-
const _width = width || img.width;
|
|
147
|
-
const _height = height || img.height;
|
|
148
|
-
canvas.width = _width;
|
|
149
|
-
canvas.height = _height;
|
|
150
|
-
const ctx = canvas.getContext("2d");
|
|
151
|
-
if (ctx) {
|
|
152
|
-
ctx.fillStyle = "transparent";
|
|
153
|
-
if (type === "image/jpeg") {
|
|
154
|
-
ctx.fillStyle = "#fff";
|
|
155
|
-
}
|
|
156
|
-
ctx.fillRect(0, 0, _width, _height);
|
|
157
|
-
adjustImgOrientation(ctx, img, orientation, _width, _height);
|
|
158
|
-
return Promise.resolve(canvas);
|
|
159
|
-
}
|
|
160
|
-
return Promise.reject(new Error("canvas getContext return null"));
|
|
161
|
-
}
|
|
162
71
|
function canvas2File(canvas, fileName, lastModified, type = "image/jpeg", quality = 0.8) {
|
|
163
72
|
return new Promise((resolve, reject) => {
|
|
164
73
|
canvas.toBlob(
|
|
@@ -175,114 +84,3 @@ function canvas2File(canvas, fileName, lastModified, type = "image/jpeg", qualit
|
|
|
175
84
|
);
|
|
176
85
|
});
|
|
177
86
|
}
|
|
178
|
-
function image2file(img, fileName, lastModified, type = "image/jpeg", quality = 0.8) {
|
|
179
|
-
return image2Canvas(img, type).then(
|
|
180
|
-
(canvas) => canvas2File(canvas, fileName, lastModified, type, quality)
|
|
181
|
-
);
|
|
182
|
-
}
|
|
183
|
-
function canvas2Image(canvas, type = "image/jpeg", quality = 0.8) {
|
|
184
|
-
const image = new Image();
|
|
185
|
-
image.src = canvas.toDataURL(type, quality);
|
|
186
|
-
return Promise.resolve(image);
|
|
187
|
-
}
|
|
188
|
-
function getStringFromCharCode(dataView, start, length) {
|
|
189
|
-
let str = "";
|
|
190
|
-
let i;
|
|
191
|
-
length += start;
|
|
192
|
-
for (i = start; i < length; i += 1) {
|
|
193
|
-
str += String.fromCharCode(dataView.getUint8(i));
|
|
194
|
-
}
|
|
195
|
-
return str;
|
|
196
|
-
}
|
|
197
|
-
function getOrientation(arrayBuffer) {
|
|
198
|
-
const dataView = new DataView(arrayBuffer);
|
|
199
|
-
let orientation;
|
|
200
|
-
try {
|
|
201
|
-
let littleEndian;
|
|
202
|
-
let app1Start;
|
|
203
|
-
let ifdStart;
|
|
204
|
-
if (dataView.getUint8(0) === 255 && dataView.getUint8(1) === 216) {
|
|
205
|
-
const length = dataView.byteLength;
|
|
206
|
-
let offset = 2;
|
|
207
|
-
while (offset + 1 < length) {
|
|
208
|
-
if (dataView.getUint8(offset) === 255 && dataView.getUint8(offset + 1) === 225) {
|
|
209
|
-
app1Start = offset;
|
|
210
|
-
break;
|
|
211
|
-
}
|
|
212
|
-
offset += 1;
|
|
213
|
-
}
|
|
214
|
-
}
|
|
215
|
-
if (app1Start) {
|
|
216
|
-
const exifIDCode = app1Start + 4;
|
|
217
|
-
const tiffOffset = app1Start + 10;
|
|
218
|
-
if (getStringFromCharCode(dataView, exifIDCode, 4) === "Exif") {
|
|
219
|
-
const endianness = dataView.getUint16(tiffOffset);
|
|
220
|
-
littleEndian = endianness === 18761;
|
|
221
|
-
if (littleEndian || endianness === 19789) {
|
|
222
|
-
if (dataView.getUint16(tiffOffset + 2, littleEndian) === 42) {
|
|
223
|
-
const firstIFDOffset = dataView.getUint32(
|
|
224
|
-
tiffOffset + 4,
|
|
225
|
-
littleEndian
|
|
226
|
-
);
|
|
227
|
-
if (firstIFDOffset >= 8) {
|
|
228
|
-
ifdStart = tiffOffset + firstIFDOffset;
|
|
229
|
-
}
|
|
230
|
-
}
|
|
231
|
-
}
|
|
232
|
-
}
|
|
233
|
-
}
|
|
234
|
-
if (ifdStart) {
|
|
235
|
-
const _length = dataView.getUint16(ifdStart, littleEndian);
|
|
236
|
-
let _offset;
|
|
237
|
-
let i;
|
|
238
|
-
for (i = 0; i < _length; i += 1) {
|
|
239
|
-
_offset = ifdStart + i * 12 + 2;
|
|
240
|
-
if (dataView.getUint16(_offset, littleEndian) === 274) {
|
|
241
|
-
_offset += 8;
|
|
242
|
-
orientation = dataView.getUint16(_offset, littleEndian);
|
|
243
|
-
dataView.setUint16(_offset, 1, littleEndian);
|
|
244
|
-
break;
|
|
245
|
-
}
|
|
246
|
-
}
|
|
247
|
-
}
|
|
248
|
-
} catch (e) {
|
|
249
|
-
orientation = 1;
|
|
250
|
-
}
|
|
251
|
-
return orientation;
|
|
252
|
-
}
|
|
253
|
-
function resize(img, {
|
|
254
|
-
inputType = "image/jpeg",
|
|
255
|
-
orientation = 1,
|
|
256
|
-
// 图片的方向
|
|
257
|
-
imageWidth = -1,
|
|
258
|
-
imageHeight = -1,
|
|
259
|
-
// equalProportion = true, // 等比例拉伸
|
|
260
|
-
sideLengthLimit = 640,
|
|
261
|
-
baseOnShortSide = true,
|
|
262
|
-
// 是否以短边为基准缩放
|
|
263
|
-
resultType = "image"
|
|
264
|
-
}) {
|
|
265
|
-
let scale = 1;
|
|
266
|
-
const scaleBaseFunc = baseOnShortSide ? Math.min : Math.max;
|
|
267
|
-
if (imageWidth > 0 && imageHeight > 0) {
|
|
268
|
-
scale = sideLengthLimit / scaleBaseFunc(imageWidth, imageHeight);
|
|
269
|
-
} else if (img.width > 0 && img.height > 0) {
|
|
270
|
-
scale = sideLengthLimit / scaleBaseFunc(img.width, img.height);
|
|
271
|
-
imageWidth = img.width;
|
|
272
|
-
imageHeight = img.height;
|
|
273
|
-
} else {
|
|
274
|
-
return Promise.reject(new Error("image width/height \u65E0\u6548"));
|
|
275
|
-
}
|
|
276
|
-
const targetWidth = scale > 1 ? imageWidth : imageWidth * scale;
|
|
277
|
-
const targetHeight = scale > 1 ? imageHeight : imageHeight * scale;
|
|
278
|
-
if (resultType === "image") {
|
|
279
|
-
return image2Canvas(
|
|
280
|
-
img,
|
|
281
|
-
inputType,
|
|
282
|
-
orientation,
|
|
283
|
-
targetWidth,
|
|
284
|
-
targetHeight
|
|
285
|
-
).then((canvas) => canvas2Image(canvas));
|
|
286
|
-
}
|
|
287
|
-
return image2Canvas(img, inputType, orientation, targetWidth, targetHeight);
|
|
288
|
-
}
|
package/lib/tabs/Tabs.js
CHANGED
|
@@ -279,6 +279,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
|
|
|
279
279
|
"scrollable": scrollable.value,
|
|
280
280
|
"activeColor": props.titleActiveColor,
|
|
281
281
|
"inactiveColor": props.titleInactiveColor,
|
|
282
|
+
"setLine": setLine,
|
|
282
283
|
"onClick": (event) => onClickTab(item, index, event)
|
|
283
284
|
}, (0, import_utils.pick)(item, ["dot", "badge", "title", "disabled", "showZeroBadge"])), {
|
|
284
285
|
title: item.$slots.title,
|
package/lib/tabs/TabsTitle.d.ts
CHANGED
|
@@ -20,6 +20,7 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
20
20
|
type: StringConstructor;
|
|
21
21
|
default: string;
|
|
22
22
|
};
|
|
23
|
+
setLine: FunctionConstructor;
|
|
23
24
|
}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
|
24
25
|
id: StringConstructor;
|
|
25
26
|
dot: BooleanConstructor;
|
|
@@ -42,6 +43,7 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
42
43
|
type: StringConstructor;
|
|
43
44
|
default: string;
|
|
44
45
|
};
|
|
46
|
+
setLine: FunctionConstructor;
|
|
45
47
|
}>>, {
|
|
46
48
|
dot: boolean;
|
|
47
49
|
disabled: boolean;
|