@uxda/appkit 4.3.30 → 4.3.33

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.
Files changed (141) hide show
  1. package/.cursor/skills/appkit-build-update-component-rules/SKILL.md +54 -54
  2. package/.cursor/skills/appkit-sync-component-rules/SKILL.md +60 -60
  3. package/.eslintrc.mjs +7 -7
  4. package/Appkit/347/273/204/344/273/266/344/275/277/347/224/250/350/247/204/345/210/231.md +2002 -2002
  5. package/PROJECT_DOCS.md +142 -142
  6. package/README.md +194 -194
  7. package/babel.config.js +12 -12
  8. package/dist/appkit.css +3 -3
  9. package/dist/assets/asset-3B_CoPto +1 -0
  10. package/dist/assets/asset-DcH8Kg-2 +1 -0
  11. package/dist/index.js +320 -83
  12. package/package.json +82 -82
  13. package/project.config.json +15 -15
  14. package/project.tt.json +13 -13
  15. package/rollup.config.mjs +81 -81
  16. package/src/Appkit.ts +72 -72
  17. package/src/balance/api/endpoints.ts +134 -133
  18. package/src/balance/api/index.ts +118 -118
  19. package/src/balance/components/AccountView.vue +834 -770
  20. package/src/balance/components/BalanceCard.vue +210 -210
  21. package/src/balance/components/BalanceReminder.vue +84 -84
  22. package/src/balance/components/ConsumptionFilter.vue +218 -218
  23. package/src/balance/components/ConsumptionRules.vue +68 -68
  24. package/src/balance/components/DateFilter.vue +259 -259
  25. package/src/balance/components/DateRange.vue +111 -111
  26. package/src/balance/components/ListFilter.vue +62 -62
  27. package/src/balance/components/ListFilterPicker.vue +191 -191
  28. package/src/balance/components/PromoterCard.vue +308 -308
  29. package/src/balance/components/SecondBalance.vue +77 -77
  30. package/src/balance/components/Tip.vue +45 -45
  31. package/src/balance/components/index.ts +8 -8
  32. package/src/balance/types.ts +99 -99
  33. package/src/components/bt-cropper/index.vue +730 -730
  34. package/src/components/bt-cropper/utils/calcCropper.js +42 -42
  35. package/src/components/bt-cropper/utils/calcImagePosition.js +23 -23
  36. package/src/components/bt-cropper/utils/calcImageSize.js +37 -37
  37. package/src/components/bt-cropper/utils/calcPointDistance.js +12 -12
  38. package/src/components/bt-cropper/utils/calcRightAndBottom.js +7 -7
  39. package/src/components/bt-cropper/utils/ratio.js +3 -3
  40. package/src/components/bt-cropper/utils/tools.js +25 -25
  41. package/src/components/dd-area/index.vue +225 -225
  42. package/src/components/dd-icon/doc.md +21 -21
  43. package/src/components/dd-icon/index.vue +23 -23
  44. package/src/components/dd-notice-bar/index.vue +78 -78
  45. package/src/components/dd-search/doc.md +34 -34
  46. package/src/components/dd-search/index.vue +168 -168
  47. package/src/components/dd-selector/index.vue +124 -124
  48. package/src/components/dd-skeleton/doc.md +19 -19
  49. package/src/components/dd-skeleton/index.vue +36 -36
  50. package/src/global.ts +6 -6
  51. package/src/index.ts +101 -101
  52. package/src/main.scss +1 -1
  53. package/src/notice/api/endpoints.ts +54 -54
  54. package/src/notice/api/index.ts +121 -121
  55. package/src/notice/components/NoticeBanner.vue +247 -247
  56. package/src/notice/components/NoticeEntry.vue +99 -99
  57. package/src/notice/components/NoticeList.vue +311 -311
  58. package/src/notice/components/NoticeList2.vue +401 -401
  59. package/src/notice/components/NoticePopup.vue +163 -163
  60. package/src/notice/components/index.ts +6 -6
  61. package/src/notice/components/useCommonList.ts +87 -87
  62. package/src/notice/components/useNotice.ts +35 -35
  63. package/src/notice/index.ts +1 -1
  64. package/src/notice/types.ts +25 -25
  65. package/src/payment/api/config.ts +7 -7
  66. package/src/payment/api/endpoints.ts +112 -112
  67. package/src/payment/api/index.ts +108 -108
  68. package/src/payment/components/AmountPicker.vue +56 -56
  69. package/src/payment/components/RechargeResult.vue +68 -68
  70. package/src/payment/components/RechargeView.vue +389 -389
  71. package/src/payment/components/RightsPicker.vue +105 -105
  72. package/src/payment/components/TradeView.vue +627 -616
  73. package/src/payment/components/UserAgreement.vue +234 -234
  74. package/src/payment/components/index.ts +22 -22
  75. package/src/payment/components/recharge-amount.spec.ts +3 -0
  76. package/src/payment/components/recharge-amount.ts +5 -1
  77. package/src/payment/index.ts +5 -5
  78. package/src/payment/services/index.ts +16 -16
  79. package/src/payment/services/invoke-recharge.ts +25 -25
  80. package/src/payment/services/request-payment.ts +136 -136
  81. package/src/payment/types.ts +34 -34
  82. package/src/register/components/SelfRegistration.vue +233 -233
  83. package/src/register/components/index.ts +2 -2
  84. package/src/scenarios/components/SharePoster.vue +364 -364
  85. package/src/scenarios/components/index.ts +2 -2
  86. package/src/scenarios/components/poster-paste.vue +93 -93
  87. package/src/scenarios/components/share-poster.md +273 -273
  88. package/src/shared/components/AppDrawer.vue +53 -53
  89. package/src/shared/components/AppVerify.vue +137 -137
  90. package/src/shared/components/DeviceVersion.vue +78 -78
  91. package/src/shared/components/EmptyView.vue +33 -33
  92. package/src/shared/components/OcrBank.vue +202 -202
  93. package/src/shared/components/OcrBusinessLicense.vue +120 -120
  94. package/src/shared/components/OcrIcon.vue +267 -267
  95. package/src/shared/components/OcrInvoice.vue +323 -323
  96. package/src/shared/components/OfficeDocx.vue +33 -33
  97. package/src/shared/components/OfficePdf.vue +35 -35
  98. package/src/shared/components/PageHeader.vue +84 -84
  99. package/src/shared/components/index.ts +12 -12
  100. package/src/shared/composables/index.ts +10 -10
  101. package/src/shared/composables/useAmount.ts +46 -46
  102. package/src/shared/composables/useCompress.ts +64 -64
  103. package/src/shared/composables/useCountdown.ts +46 -46
  104. package/src/shared/composables/useCrypto.ts +76 -76
  105. package/src/shared/composables/useDeviceEnv.ts +61 -61
  106. package/src/shared/composables/useDragBox.ts +97 -97
  107. package/src/shared/composables/useEncode.ts +43 -43
  108. package/src/shared/composables/useLogger.ts +149 -149
  109. package/src/shared/composables/useSafeArea.ts +46 -46
  110. package/src/shared/composables/useTabbar.ts +24 -24
  111. package/src/shared/composables/useUpload.ts +106 -106
  112. package/src/shared/composables/useValidator.ts +32 -32
  113. package/src/shared/composables/useWxAuth.ts +49 -49
  114. package/src/shared/http/Http.ts +149 -149
  115. package/src/shared/http/index.ts +1 -1
  116. package/src/shared/http/types.ts +163 -163
  117. package/src/shared/index.ts +9 -9
  118. package/src/shared/tracking/directives/index.ts +40 -40
  119. package/src/shared/tracking/examples/page-tracking-template.vue +27 -27
  120. package/src/shared/weixin/index.ts +9 -9
  121. package/src/shared/weixin/jssdk.ts +104 -104
  122. package/src/shared/weixin/payment.ts +38 -38
  123. package/src/styles/vars.scss +3 -3
  124. package/src/user/api/endpoints.ts +17 -17
  125. package/src/user/api/index.ts +123 -123
  126. package/src/user/components/LoginSetting.vue +114 -114
  127. package/src/user/components/UserAuth.vue +218 -218
  128. package/src/user/components/UserBinding.vue +277 -277
  129. package/src/user/components/UserBindingSuccess.vue +80 -80
  130. package/src/user/components/UserEntry.vue +139 -139
  131. package/src/user/components/UserFeedback.vue +428 -428
  132. package/src/user/components/UserFeedbackEntry.vue +175 -175
  133. package/src/user/components/UserHeadCrop.vue +65 -65
  134. package/src/user/components/UserInfo.vue +711 -711
  135. package/src/user/components/UserResourceEmpty.vue +75 -75
  136. package/src/user/components/index.ts +23 -23
  137. package/src/user/index.ts +1 -1
  138. package/src/utils/utils.ts +33 -33
  139. package/tsconfig.json +30 -30
  140. package/types/global.d.ts +23 -23
  141. package/types/vue.d.ts +10 -10
@@ -1,149 +1,149 @@
1
- /**
2
- * 记录阿里日志
3
- * 生产: https://sls.console.aliyun.com/lognext/project/ddyk-prod/logsearch/ddjf-internet-web
4
- */
5
- import qs from 'qs'
6
- import { useAppKitOptions } from '../../Appkit'
7
- import Taro, { getSystemInfoSync, request } from '@tarojs/taro'
8
-
9
- interface LogType {
10
- projectName?: string
11
- logStore?: string
12
- topic?: string
13
- APIVersion?: string
14
- baseUrl?: string
15
- alislsURL?: string
16
- systemInfo?: string
17
- enable?: boolean
18
- enableDebug?: boolean
19
- }
20
-
21
- const defaultLogOptions: LogType = {
22
- projectName: 'ddyk-dev',
23
- logStore: 'ddjf-internet-web',
24
- topic: 'appkit',
25
- enable: true,
26
- enableDebug: false,
27
- }
28
-
29
- // 使用时间戳生成唯一标识
30
- export function generateUniqueId(pre?: string) {
31
- return `${pre ? pre + '-' : ''}${Date.now().toString(16)}-${Math.random().toString(36).substr(2)}`
32
- }
33
-
34
- export function useLogger(options?: LogType) {
35
- const appkitOptions = useAppKitOptions()
36
- const url = appkitOptions.baseUrl()
37
-
38
- if (Taro.getEnv() === 'WEB') {
39
- if (location.origin.includes('ytech.ddjf.com')) {
40
- defaultLogOptions.projectName = 'ddyk-prod'
41
- }
42
- } else {
43
- if (url.includes('ytech.ddjf.com')) {
44
- defaultLogOptions.projectName = 'ddyk-prod'
45
- }
46
- }
47
-
48
- if (options) {
49
- options = Object.assign(defaultLogOptions, options)
50
- } else {
51
- options = defaultLogOptions
52
- }
53
-
54
- const projectName = options.projectName
55
- const logStore = options.logStore
56
- const topic = options.topic || ''
57
- const APIVersion = '0.6.0'
58
- const baseUrl = `https://${projectName}.cn-shenzhen.log.aliyuncs.com/logstores/${logStore}/track?APIVersion=${APIVersion}`
59
- const alislsURL = topic ? `${baseUrl}&__topic__=${topic}` : baseUrl
60
- const enable = options.enable === undefined ? true : options.enable
61
- const enableDebug = options.enableDebug === undefined ? false : options.enableDebug
62
-
63
- const { miniProgram } =
64
- Taro.getEnv() === 'WEAPP' ? Taro.getAccountInfoSync() : { miniProgram: { version: '' } }
65
- const systemInfo =
66
- JSON.stringify({
67
- ...getSystemInfoSync(),
68
- appVersion: miniProgram?.version,
69
- }) || '未知'
70
-
71
- function send(params: Record<string, any>) {
72
- if (!enable) return
73
-
74
- params.systemInfo = systemInfo
75
- const token = appkitOptions.tempToken() || appkitOptions.token()
76
- if (token) {
77
- params.userInfo = token
78
- }
79
- if (params.msg && !params.send) {
80
- params.send = params.msg
81
- }
82
- if (params.send) {
83
- params.send = params.send.slice(0, 1024)
84
- }
85
- if (params.receive) {
86
- params.receive = params.receive.slice(0, 1024)
87
- }
88
- if (params.duration) {
89
- params.duration = params.duration
90
- }
91
-
92
- // 记录页面栈信息
93
- const pages = Taro.getCurrentPages()
94
- const currentPage = pages?.[pages.length - 1]
95
- const lastPage = pages?.[pages.length - 2]
96
- const taroParams = currentPage.$taroParams
97
- if (taroParams) {
98
- delete taroParams.stamp
99
- delete taroParams.$taroTimestamp
100
- }
101
- const laseTaroParams = lastPage?.$taroParams
102
- if (laseTaroParams) {
103
- delete laseTaroParams.stamp
104
- delete laseTaroParams.$taroTimestamp
105
- }
106
- params.pages = JSON.stringify({
107
- current: `${currentPage?.route}?${qs.stringify(taroParams)}`,
108
- last: lastPage
109
- ? `${lastPage?.route}?${qs.stringify(laseTaroParams)}`
110
- : '',
111
- }).slice(0, 1024)
112
-
113
- if (enableDebug) {
114
- console.log(params)
115
- }
116
-
117
- const tmpStr = Object.keys(params)
118
- .map((key) => `${key}=${encodeURIComponent(params[key])}`)
119
- .join('&')
120
- const url = `${alislsURL}&${tmpStr}`
121
- request({ url })
122
- }
123
-
124
- function info(params: any) {
125
- if (!enable) return
126
- send({
127
- send: params.send ?? '',
128
- receive: params.receive ?? '',
129
- duration: params.duration ?? '',
130
- traceId: params.traceId as string,
131
- level: 'info',
132
- })
133
- }
134
-
135
- function error(params: any) {
136
- if (!enable) return
137
- send({
138
- send: params.send ?? '',
139
- receive: params.receive ?? '',
140
- traceId: params.traceId as string,
141
- level: 'error',
142
- })
143
- }
144
-
145
- return {
146
- info,
147
- error,
148
- }
149
- }
1
+ /**
2
+ * 记录阿里日志
3
+ * 生产: https://sls.console.aliyun.com/lognext/project/ddyk-prod/logsearch/ddjf-internet-web
4
+ */
5
+ import qs from 'qs'
6
+ import { useAppKitOptions } from '../../Appkit'
7
+ import Taro, { getSystemInfoSync, request } from '@tarojs/taro'
8
+
9
+ interface LogType {
10
+ projectName?: string
11
+ logStore?: string
12
+ topic?: string
13
+ APIVersion?: string
14
+ baseUrl?: string
15
+ alislsURL?: string
16
+ systemInfo?: string
17
+ enable?: boolean
18
+ enableDebug?: boolean
19
+ }
20
+
21
+ const defaultLogOptions: LogType = {
22
+ projectName: 'ddyk-dev',
23
+ logStore: 'ddjf-internet-web',
24
+ topic: 'appkit',
25
+ enable: true,
26
+ enableDebug: false,
27
+ }
28
+
29
+ // 使用时间戳生成唯一标识
30
+ export function generateUniqueId(pre?: string) {
31
+ return `${pre ? pre + '-' : ''}${Date.now().toString(16)}-${Math.random().toString(36).substr(2)}`
32
+ }
33
+
34
+ export function useLogger(options?: LogType) {
35
+ const appkitOptions = useAppKitOptions()
36
+ const url = appkitOptions.baseUrl()
37
+
38
+ if (Taro.getEnv() === 'WEB') {
39
+ if (location.origin.includes('ytech.ddjf.com')) {
40
+ defaultLogOptions.projectName = 'ddyk-prod'
41
+ }
42
+ } else {
43
+ if (url.includes('ytech.ddjf.com')) {
44
+ defaultLogOptions.projectName = 'ddyk-prod'
45
+ }
46
+ }
47
+
48
+ if (options) {
49
+ options = Object.assign(defaultLogOptions, options)
50
+ } else {
51
+ options = defaultLogOptions
52
+ }
53
+
54
+ const projectName = options.projectName
55
+ const logStore = options.logStore
56
+ const topic = options.topic || ''
57
+ const APIVersion = '0.6.0'
58
+ const baseUrl = `https://${projectName}.cn-shenzhen.log.aliyuncs.com/logstores/${logStore}/track?APIVersion=${APIVersion}`
59
+ const alislsURL = topic ? `${baseUrl}&__topic__=${topic}` : baseUrl
60
+ const enable = options.enable === undefined ? true : options.enable
61
+ const enableDebug = options.enableDebug === undefined ? false : options.enableDebug
62
+
63
+ const { miniProgram } =
64
+ Taro.getEnv() === 'WEAPP' ? Taro.getAccountInfoSync() : { miniProgram: { version: '' } }
65
+ const systemInfo =
66
+ JSON.stringify({
67
+ ...getSystemInfoSync(),
68
+ appVersion: miniProgram?.version,
69
+ }) || '未知'
70
+
71
+ function send(params: Record<string, any>) {
72
+ if (!enable) return
73
+
74
+ params.systemInfo = systemInfo
75
+ const token = appkitOptions.tempToken() || appkitOptions.token()
76
+ if (token) {
77
+ params.userInfo = token
78
+ }
79
+ if (params.msg && !params.send) {
80
+ params.send = params.msg
81
+ }
82
+ if (params.send) {
83
+ params.send = params.send.slice(0, 1024)
84
+ }
85
+ if (params.receive) {
86
+ params.receive = params.receive.slice(0, 1024)
87
+ }
88
+ if (params.duration) {
89
+ params.duration = params.duration
90
+ }
91
+
92
+ // 记录页面栈信息
93
+ const pages = Taro.getCurrentPages()
94
+ const currentPage = pages?.[pages.length - 1]
95
+ const lastPage = pages?.[pages.length - 2]
96
+ const taroParams = currentPage.$taroParams
97
+ if (taroParams) {
98
+ delete taroParams.stamp
99
+ delete taroParams.$taroTimestamp
100
+ }
101
+ const laseTaroParams = lastPage?.$taroParams
102
+ if (laseTaroParams) {
103
+ delete laseTaroParams.stamp
104
+ delete laseTaroParams.$taroTimestamp
105
+ }
106
+ params.pages = JSON.stringify({
107
+ current: `${currentPage?.route}?${qs.stringify(taroParams)}`,
108
+ last: lastPage
109
+ ? `${lastPage?.route}?${qs.stringify(laseTaroParams)}`
110
+ : '',
111
+ }).slice(0, 1024)
112
+
113
+ if (enableDebug) {
114
+ console.log(params)
115
+ }
116
+
117
+ const tmpStr = Object.keys(params)
118
+ .map((key) => `${key}=${encodeURIComponent(params[key])}`)
119
+ .join('&')
120
+ const url = `${alislsURL}&${tmpStr}`
121
+ request({ url })
122
+ }
123
+
124
+ function info(params: any) {
125
+ if (!enable) return
126
+ send({
127
+ send: params.send ?? '',
128
+ receive: params.receive ?? '',
129
+ duration: params.duration ?? '',
130
+ traceId: params.traceId as string,
131
+ level: 'info',
132
+ })
133
+ }
134
+
135
+ function error(params: any) {
136
+ if (!enable) return
137
+ send({
138
+ send: params.send ?? '',
139
+ receive: params.receive ?? '',
140
+ traceId: params.traceId as string,
141
+ level: 'error',
142
+ })
143
+ }
144
+
145
+ return {
146
+ info,
147
+ error,
148
+ }
149
+ }
@@ -1,46 +1,46 @@
1
- import Taro, { getSystemInfoSync, getMenuButtonBoundingClientRect } from '@tarojs/taro'
2
- /**
3
- * 屏幕安全区域
4
- */
5
- export type SafeArea = {
6
- /**
7
- * 状态条高度
8
- */
9
- status: number
10
- /**
11
- * 导航条区域(胶囊)
12
- */
13
- nav: number
14
- /**
15
- * 屏幕底部范围
16
- */
17
- bottom: number
18
- menuRect: any
19
- }
20
-
21
- /**
22
- * 获取屏幕安全区域
23
- * 从系统 API 获取
24
- * @returns
25
- */
26
- export function useSafeArea(): SafeArea {
27
- const systemInfo = getSystemInfoSync(),
28
- capsule = Taro.getEnv() === 'WEAPP' ? getMenuButtonBoundingClientRect() : { top: 0, height: 0 }
29
- /**
30
- * 状态条高度
31
- */
32
- const status = systemInfo.statusBarHeight || 0,
33
- /**
34
- * 据说是胶囊上下间距
35
- */
36
- gap = capsule.top - status,
37
- nav = capsule.height + gap * 2,
38
- safeAreaBottom = (systemInfo.safeArea || {}).bottom || 0,
39
- bottom = systemInfo.screenHeight - safeAreaBottom
40
- return {
41
- status,
42
- nav,
43
- bottom,
44
- menuRect: capsule,
45
- }
46
- }
1
+ import Taro, { getSystemInfoSync, getMenuButtonBoundingClientRect } from '@tarojs/taro'
2
+ /**
3
+ * 屏幕安全区域
4
+ */
5
+ export type SafeArea = {
6
+ /**
7
+ * 状态条高度
8
+ */
9
+ status: number
10
+ /**
11
+ * 导航条区域(胶囊)
12
+ */
13
+ nav: number
14
+ /**
15
+ * 屏幕底部范围
16
+ */
17
+ bottom: number
18
+ menuRect: any
19
+ }
20
+
21
+ /**
22
+ * 获取屏幕安全区域
23
+ * 从系统 API 获取
24
+ * @returns
25
+ */
26
+ export function useSafeArea(): SafeArea {
27
+ const systemInfo = getSystemInfoSync(),
28
+ capsule = Taro.getEnv() === 'WEAPP' ? getMenuButtonBoundingClientRect() : { top: 0, height: 0 }
29
+ /**
30
+ * 状态条高度
31
+ */
32
+ const status = systemInfo.statusBarHeight || 0,
33
+ /**
34
+ * 据说是胶囊上下间距
35
+ */
36
+ gap = capsule.top - status,
37
+ nav = capsule.height + gap * 2,
38
+ safeAreaBottom = (systemInfo.safeArea || {}).bottom || 0,
39
+ bottom = systemInfo.screenHeight - safeAreaBottom
40
+ return {
41
+ status,
42
+ nav,
43
+ bottom,
44
+ menuRect: capsule,
45
+ }
46
+ }
@@ -1,24 +1,24 @@
1
- import { ref } from 'vue'
2
-
3
- const tab = ref<string>(''),
4
- changeCallback = ref<(value: string) => void>(
5
- (value: string) => {
6
- console.log('ORIGINAL changeCallback===', value)
7
- }
8
- )
9
-
10
- const setTab = (value: string) => {
11
- tab.value = value
12
- changeCallback.value(value)
13
- }
14
-
15
- const onTabChange = (callback: (value: string) => void) => {
16
- changeCallback.value = callback
17
- }
18
-
19
- export function useTabbar () {
20
- return {
21
- onTabChange,
22
- setTab
23
- }
24
- }
1
+ import { ref } from 'vue'
2
+
3
+ const tab = ref<string>(''),
4
+ changeCallback = ref<(value: string) => void>(
5
+ (value: string) => {
6
+ console.log('ORIGINAL changeCallback===', value)
7
+ }
8
+ )
9
+
10
+ const setTab = (value: string) => {
11
+ tab.value = value
12
+ changeCallback.value(value)
13
+ }
14
+
15
+ const onTabChange = (callback: (value: string) => void) => {
16
+ changeCallback.value = callback
17
+ }
18
+
19
+ export function useTabbar () {
20
+ return {
21
+ onTabChange,
22
+ setTab
23
+ }
24
+ }
@@ -1,106 +1,106 @@
1
- import Taro from "@tarojs/taro";
2
-
3
- /**
4
- * 使用 canvas 压缩图片(Web 端)
5
- */
6
- export const compressImageWithCanvas = (
7
- src: string,
8
- quality: number
9
- ): Promise<string> => {
10
- return new Promise((resolve, reject) => {
11
- const img = new Image();
12
- img.crossOrigin = "anonymous";
13
-
14
- img.onload = () => {
15
- try {
16
- const canvas = document.createElement("canvas");
17
- const ctx = canvas.getContext("2d");
18
-
19
- if (!ctx) {
20
- reject(new Error("无法获取 canvas 上下文"));
21
- return;
22
- }
23
-
24
- // 设置画布尺寸(可以根据需要限制最大尺寸)
25
- const maxWidth = 850;
26
- const maxHeight = 850;
27
- let width = img.width;
28
- let height = img.height;
29
-
30
- // 计算压缩后的尺寸
31
- if (width > maxWidth || height > maxHeight) {
32
- const ratio = Math.min(maxWidth / width, maxHeight / height);
33
- width = width * ratio;
34
- height = height * ratio;
35
- }
36
-
37
- canvas.width = width;
38
- canvas.height = height;
39
-
40
- // 绘制图片到 canvas
41
- ctx.drawImage(img, 0, 0, width, height);
42
-
43
- // 转换为 blob
44
- canvas.toBlob(
45
- (blob) => {
46
- if (!blob) {
47
- reject(new Error("图片压缩失败"));
48
- return;
49
- }
50
- // 创建 blob URL
51
- const compressedUrl = URL.createObjectURL(blob);
52
- resolve(compressedUrl);
53
- },
54
- "image/jpeg",
55
- quality / 100
56
- );
57
- } catch (error) {
58
- reject(error);
59
- }
60
- };
61
-
62
- img.onerror = () => {
63
- reject(new Error("图片加载失败"));
64
- };
65
-
66
- img.src = src;
67
- });
68
- };
69
-
70
- // 压缩图片
71
- export async function compressImage(src: string, quality = 80) {
72
- if (Taro.getEnv() === "WEB") {
73
- try {
74
- const compressedUrl = await compressImageWithCanvas(src, quality);
75
- // 返回格式与小程序端一致,包含 tempFilePath 属性
76
- return { tempFilePath: compressedUrl };
77
- } catch (error) {
78
- console.error("图片压缩失败:", error);
79
- // 压缩失败时返回原图
80
- return { tempFilePath: src };
81
- }
82
- } else {
83
- return new Promise((resolve, reject) => {
84
- Taro.compressImage({
85
- src: src,
86
- quality: quality,
87
- success: (res) => {
88
- resolve(res);
89
- },
90
- fail: (res) => {
91
- reject(res);
92
- },
93
- });
94
- });
95
- }
96
- }
97
-
98
- // 获取压缩质量
99
- export function getCompressQuality(size: number) {
100
- let quality = 100;
101
- const curSize = size / (1024 * 1024);
102
- if (curSize > 6) {
103
- quality = quality - ((curSize - 6) / curSize) * 100;
104
- }
105
- return quality;
106
- }
1
+ import Taro from "@tarojs/taro";
2
+
3
+ /**
4
+ * 使用 canvas 压缩图片(Web 端)
5
+ */
6
+ export const compressImageWithCanvas = (
7
+ src: string,
8
+ quality: number
9
+ ): Promise<string> => {
10
+ return new Promise((resolve, reject) => {
11
+ const img = new Image();
12
+ img.crossOrigin = "anonymous";
13
+
14
+ img.onload = () => {
15
+ try {
16
+ const canvas = document.createElement("canvas");
17
+ const ctx = canvas.getContext("2d");
18
+
19
+ if (!ctx) {
20
+ reject(new Error("无法获取 canvas 上下文"));
21
+ return;
22
+ }
23
+
24
+ // 设置画布尺寸(可以根据需要限制最大尺寸)
25
+ const maxWidth = 850;
26
+ const maxHeight = 850;
27
+ let width = img.width;
28
+ let height = img.height;
29
+
30
+ // 计算压缩后的尺寸
31
+ if (width > maxWidth || height > maxHeight) {
32
+ const ratio = Math.min(maxWidth / width, maxHeight / height);
33
+ width = width * ratio;
34
+ height = height * ratio;
35
+ }
36
+
37
+ canvas.width = width;
38
+ canvas.height = height;
39
+
40
+ // 绘制图片到 canvas
41
+ ctx.drawImage(img, 0, 0, width, height);
42
+
43
+ // 转换为 blob
44
+ canvas.toBlob(
45
+ (blob) => {
46
+ if (!blob) {
47
+ reject(new Error("图片压缩失败"));
48
+ return;
49
+ }
50
+ // 创建 blob URL
51
+ const compressedUrl = URL.createObjectURL(blob);
52
+ resolve(compressedUrl);
53
+ },
54
+ "image/jpeg",
55
+ quality / 100
56
+ );
57
+ } catch (error) {
58
+ reject(error);
59
+ }
60
+ };
61
+
62
+ img.onerror = () => {
63
+ reject(new Error("图片加载失败"));
64
+ };
65
+
66
+ img.src = src;
67
+ });
68
+ };
69
+
70
+ // 压缩图片
71
+ export async function compressImage(src: string, quality = 80) {
72
+ if (Taro.getEnv() === "WEB") {
73
+ try {
74
+ const compressedUrl = await compressImageWithCanvas(src, quality);
75
+ // 返回格式与小程序端一致,包含 tempFilePath 属性
76
+ return { tempFilePath: compressedUrl };
77
+ } catch (error) {
78
+ console.error("图片压缩失败:", error);
79
+ // 压缩失败时返回原图
80
+ return { tempFilePath: src };
81
+ }
82
+ } else {
83
+ return new Promise((resolve, reject) => {
84
+ Taro.compressImage({
85
+ src: src,
86
+ quality: quality,
87
+ success: (res) => {
88
+ resolve(res);
89
+ },
90
+ fail: (res) => {
91
+ reject(res);
92
+ },
93
+ });
94
+ });
95
+ }
96
+ }
97
+
98
+ // 获取压缩质量
99
+ export function getCompressQuality(size: number) {
100
+ let quality = 100;
101
+ const curSize = size / (1024 * 1024);
102
+ if (curSize > 6) {
103
+ quality = quality - ((curSize - 6) / curSize) * 100;
104
+ }
105
+ return quality;
106
+ }