@cloudcome/utils-browser 1.1.1 → 1.1.3
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 +18 -0
- package/dist/base64.cjs +15 -0
- package/dist/base64.cjs.map +1 -0
- package/dist/base64.d.ts +14 -0
- package/dist/base64.mjs +15 -0
- package/dist/base64.mjs.map +1 -0
- package/{src/cache.ts → dist/cache.cjs} +20 -48
- package/dist/cache.cjs.map +1 -0
- package/dist/cache.d.ts +49 -0
- package/dist/cache.mjs +87 -0
- package/dist/cache.mjs.map +1 -0
- package/dist/canvas.cjs +58 -0
- package/dist/canvas.cjs.map +1 -0
- package/dist/canvas.d.ts +92 -0
- package/dist/canvas.mjs +58 -0
- package/dist/canvas.mjs.map +1 -0
- package/dist/clipboard.cjs +16 -0
- package/dist/clipboard.cjs.map +1 -0
- package/{src/clipboard.ts → dist/clipboard.d.ts} +1 -12
- package/dist/clipboard.mjs +16 -0
- package/dist/clipboard.mjs.map +1 -0
- package/dist/cookie.cjs +50 -0
- package/dist/cookie.cjs.map +1 -0
- package/dist/cookie.d.ts +55 -0
- package/dist/cookie.mjs +50 -0
- package/dist/cookie.mjs.map +1 -0
- package/dist/dom.cjs +18 -0
- package/dist/dom.cjs.map +1 -0
- package/dist/dom.d.ts +30 -0
- package/dist/dom.mjs +18 -0
- package/dist/dom.mjs.map +1 -0
- package/dist/download.cjs +16 -0
- package/dist/download.cjs.map +1 -0
- package/dist/download.d.ts +12 -0
- package/dist/download.mjs +16 -0
- package/dist/download.mjs.map +1 -0
- package/dist/image.cjs +35 -0
- package/dist/image.cjs.map +1 -0
- package/dist/image.d.ts +9 -0
- package/dist/image.mjs +35 -0
- package/dist/image.mjs.map +1 -0
- package/dist/index.cjs +5 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.mjs +5 -0
- package/dist/index.mjs.map +1 -0
- package/dist/timer.cjs +41 -0
- package/dist/timer.cjs.map +1 -0
- package/dist/timer.d.ts +9 -0
- package/dist/timer.mjs +41 -0
- package/dist/timer.mjs.map +1 -0
- package/dist/video.cjs +14 -0
- package/dist/video.cjs.map +1 -0
- package/dist/video.d.ts +9 -0
- package/dist/video.mjs +14 -0
- package/dist/video.mjs.map +1 -0
- package/package.json +9 -3
- package/CHANGELOG.md +0 -27
- package/src/base64.ts +0 -25
- package/src/canvas.ts +0 -147
- package/src/cookie.ts +0 -118
- package/src/dom.ts +0 -48
- package/src/download.ts +0 -22
- package/src/dts/global.d.ts +0 -27
- package/src/image.ts +0 -45
- package/src/index.ts +0 -1
- package/src/timer.ts +0 -56
- package/src/video.ts +0 -19
- package/test/base64.test.ts +0 -47
- package/test/cache.test.ts +0 -199
- package/test/canvas.test.ts +0 -124
- package/test/clipboard.test.ts +0 -18
- package/test/cookie.test.ts +0 -52
- package/test/dom.test.ts +0 -67
- package/test/download.test.ts +0 -15
- package/test/image.test.ts +0 -75
- package/test/index.test.ts +0 -6
- package/test/timer.test.ts +0 -109
- package/test/video.test.ts +0 -36
- package/tsconfig.json +0 -31
- package/vite.config.mts +0 -100
package/README.md
ADDED
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
# 我的个人工具函数库
|
|
2
|
+
|
|
3
|
+
[](https://github.com/cloudcome/utils/actions/workflows/code-review.yml)
|
|
4
|
+
[](https://github.com/cloudcome/utils/actions/workflows/dependency-review.yml)
|
|
5
|
+
[](https://app.codacy.com/gh/cloudcome/utils/dashboard?utm_source=gh&utm_medium=referral&utm_content=&utm_campaign=Badge_grade)
|
|
6
|
+
[](https://app.codacy.com/gh/cloudcome/utils/dashboard?utm_source=gh&utm_medium=referral&utm_content=&utm_campaign=Badge_coverage)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
| 名称 | 版本 | 描述 |
|
|
10
|
+
| --- | --- | --- |
|
|
11
|
+
| @cloudcome/utils-core | [](https://npmjs.com/package/@cloudcome/utils-core) | 核心工具库 |
|
|
12
|
+
| @cloudcome/utils-browser | [](https://npmjs.com/package/@cloudcome/utils-browser) | 浏览器工具库 |
|
|
13
|
+
| @cloudcome/utils-node| [](https://npmjs.com/package/@cloudcome/utils-node) | Node.js 工具库 |
|
|
14
|
+
| @cloudcome/utils-vue| [](https://npmjs.com/package/@cloudcome/utils-vue) | Vue 工具库 |
|
|
15
|
+
| @cloudcome/utils-react| [](https://npmjs.com/package/@cloudcome/utils-react) | React 工具库 |
|
|
16
|
+
| @cloudcome/utils-uni| [](https://npmjs.com/package/@cloudcome/utils-uni) | UniApp 工具库 |
|
|
17
|
+
|
|
18
|
+
|
package/dist/base64.cjs
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
function encodeBase64(input) {
|
|
4
|
+
const encoder = new TextEncoder();
|
|
5
|
+
const unit8Array = encoder.encode(input);
|
|
6
|
+
return btoa(String.fromCharCode(...unit8Array));
|
|
7
|
+
}
|
|
8
|
+
function decodeBase64(input) {
|
|
9
|
+
const decoder = new TextDecoder();
|
|
10
|
+
const unit8Array = Uint8Array.from(atob(input), (c) => c.charCodeAt(0));
|
|
11
|
+
return decoder.decode(unit8Array);
|
|
12
|
+
}
|
|
13
|
+
exports.decodeBase64 = decodeBase64;
|
|
14
|
+
exports.encodeBase64 = encodeBase64;
|
|
15
|
+
//# sourceMappingURL=base64.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"base64.cjs","sources":["../src/base64.ts"],"sourcesContent":["// @ref https://blog.csdn.net/m0_72642319/article/details/139743196\n\n/**\n * 【浏览器环境】将字符串编码为 Base64 格式\n * @param input 要编码的字符串\n * @returns 编码后的 Base64 字符串\n * @remarks\n * 在 Node.js 环境中使用 Buffer 实现,在浏览器环境中使用 TextEncoder 和 btoa 实现\n */\nexport function encodeBase64(input: string) {\n const encoder = new TextEncoder();\n const unit8Array = encoder.encode(input);\n return btoa(String.fromCharCode(...unit8Array));\n}\n\n/**\n * 【浏览器环境】 将 Base64 字符串解码为原始字符串\n * @param input 要解码的 Base64 字符串\n * @returns 解码后的原始字符串\n */\nexport function decodeBase64(input: string) {\n const decoder = new TextDecoder();\n const unit8Array = Uint8Array.from(atob(input), (c) => c.charCodeAt(0));\n return decoder.decode(unit8Array);\n}\n"],"names":[],"mappings":";;AASO,SAAS,aAAa,OAAe;AACpC,QAAA,UAAU,IAAI,YAAY;AAC1B,QAAA,aAAa,QAAQ,OAAO,KAAK;AACvC,SAAO,KAAK,OAAO,aAAa,GAAG,UAAU,CAAC;AAChD;AAOO,SAAS,aAAa,OAAe;AACpC,QAAA,UAAU,IAAI,YAAY;AAC1B,QAAA,aAAa,WAAW,KAAK,KAAK,KAAK,GAAG,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;AAC/D,SAAA,QAAQ,OAAO,UAAU;AAClC;;;"}
|
package/dist/base64.d.ts
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* 【浏览器环境】将字符串编码为 Base64 格式
|
|
3
|
+
* @param input 要编码的字符串
|
|
4
|
+
* @returns 编码后的 Base64 字符串
|
|
5
|
+
* @remarks
|
|
6
|
+
* 在 Node.js 环境中使用 Buffer 实现,在浏览器环境中使用 TextEncoder 和 btoa 实现
|
|
7
|
+
*/
|
|
8
|
+
export declare function encodeBase64(input: string): string;
|
|
9
|
+
/**
|
|
10
|
+
* 【浏览器环境】 将 Base64 字符串解码为原始字符串
|
|
11
|
+
* @param input 要解码的 Base64 字符串
|
|
12
|
+
* @returns 解码后的原始字符串
|
|
13
|
+
*/
|
|
14
|
+
export declare function decodeBase64(input: string): string;
|
package/dist/base64.mjs
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
function encodeBase64(input) {
|
|
2
|
+
const encoder = new TextEncoder();
|
|
3
|
+
const unit8Array = encoder.encode(input);
|
|
4
|
+
return btoa(String.fromCharCode(...unit8Array));
|
|
5
|
+
}
|
|
6
|
+
function decodeBase64(input) {
|
|
7
|
+
const decoder = new TextDecoder();
|
|
8
|
+
const unit8Array = Uint8Array.from(atob(input), (c) => c.charCodeAt(0));
|
|
9
|
+
return decoder.decode(unit8Array);
|
|
10
|
+
}
|
|
11
|
+
export {
|
|
12
|
+
decodeBase64,
|
|
13
|
+
encodeBase64
|
|
14
|
+
};
|
|
15
|
+
//# sourceMappingURL=base64.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"base64.mjs","sources":["../src/base64.ts"],"sourcesContent":["// @ref https://blog.csdn.net/m0_72642319/article/details/139743196\n\n/**\n * 【浏览器环境】将字符串编码为 Base64 格式\n * @param input 要编码的字符串\n * @returns 编码后的 Base64 字符串\n * @remarks\n * 在 Node.js 环境中使用 Buffer 实现,在浏览器环境中使用 TextEncoder 和 btoa 实现\n */\nexport function encodeBase64(input: string) {\n const encoder = new TextEncoder();\n const unit8Array = encoder.encode(input);\n return btoa(String.fromCharCode(...unit8Array));\n}\n\n/**\n * 【浏览器环境】 将 Base64 字符串解码为原始字符串\n * @param input 要解码的 Base64 字符串\n * @returns 解码后的原始字符串\n */\nexport function decodeBase64(input: string) {\n const decoder = new TextDecoder();\n const unit8Array = Uint8Array.from(atob(input), (c) => c.charCodeAt(0));\n return decoder.decode(unit8Array);\n}\n"],"names":[],"mappings":"AASO,SAAS,aAAa,OAAe;AACpC,QAAA,UAAU,IAAI,YAAY;AAC1B,QAAA,aAAa,QAAQ,OAAO,KAAK;AACvC,SAAO,KAAK,OAAO,aAAa,GAAG,UAAU,CAAC;AAChD;AAOO,SAAS,aAAa,OAAe;AACpC,QAAA,UAAU,IAAI,YAAY;AAC1B,QAAA,aAAa,WAAW,KAAK,KAAK,KAAK,GAAG,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;AAC/D,SAAA,QAAQ,OAAO,UAAU;AAClC;"}
|
|
@@ -1,49 +1,38 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
* 使用浏览器存储(localStorage 或 sessionStorage)实现的缓存类
|
|
6
|
-
* @template T - 缓存数据的类型
|
|
7
|
-
*/
|
|
8
|
-
export class StorageCache<T> extends AbstractCache<T> {
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const cache = require("@cloudcome/utils-core/cache");
|
|
4
|
+
class StorageCache extends cache.AbstractCache {
|
|
9
5
|
/**
|
|
10
6
|
* 创建一个新的 StorageCache 实例
|
|
11
7
|
* @param storage - 使用的存储实现(localStorage 或 sessionStorage)
|
|
12
8
|
* @param namespace - 可选,用于为缓存键添加前缀的命名空间
|
|
13
9
|
*/
|
|
14
|
-
constructor(
|
|
15
|
-
readonly storage: Storage,
|
|
16
|
-
readonly namespace = '',
|
|
17
|
-
) {
|
|
10
|
+
constructor(storage, namespace = "") {
|
|
18
11
|
super();
|
|
12
|
+
this.storage = storage;
|
|
13
|
+
this.namespace = namespace;
|
|
19
14
|
}
|
|
20
|
-
|
|
21
15
|
/**
|
|
22
16
|
* 通过ID获取缓存数据
|
|
23
17
|
* @param id - 要获取的缓存键
|
|
24
18
|
* @returns 如果找到且未过期则返回缓存数据,否则返回null
|
|
25
19
|
*/
|
|
26
|
-
get(id
|
|
20
|
+
get(id) {
|
|
27
21
|
const { storage, namespace } = this;
|
|
28
22
|
const fullId = namespace ? `${namespace}:${id}` : id;
|
|
29
|
-
|
|
30
23
|
try {
|
|
31
24
|
const cachedString = storage.getItem(fullId);
|
|
32
25
|
if (!cachedString) return null;
|
|
33
|
-
|
|
34
26
|
const cached = JSON.parse(cachedString);
|
|
35
|
-
|
|
36
27
|
if (cached.createdAt + cached.maxAge < Date.now()) {
|
|
37
28
|
this.del(id);
|
|
38
29
|
return null;
|
|
39
30
|
}
|
|
40
|
-
|
|
41
31
|
return cached;
|
|
42
32
|
} catch (e) {
|
|
43
33
|
return null;
|
|
44
34
|
}
|
|
45
35
|
}
|
|
46
|
-
|
|
47
36
|
/**
|
|
48
37
|
* 将数据存储到缓存中
|
|
49
38
|
* @param id - 存储数据使用的缓存键
|
|
@@ -51,10 +40,9 @@ export class StorageCache<T> extends AbstractCache<T> {
|
|
|
51
40
|
* @param options - 可选的缓存配置
|
|
52
41
|
* @returns 成功返回true,存储失败返回false
|
|
53
42
|
*/
|
|
54
|
-
set(id
|
|
43
|
+
set(id, data, options) {
|
|
55
44
|
const { storage, namespace } = this;
|
|
56
45
|
const fullId = namespace ? `${namespace}:${id}` : id;
|
|
57
|
-
|
|
58
46
|
try {
|
|
59
47
|
storage.setItem(
|
|
60
48
|
fullId,
|
|
@@ -62,54 +50,38 @@ export class StorageCache<T> extends AbstractCache<T> {
|
|
|
62
50
|
id,
|
|
63
51
|
data,
|
|
64
52
|
createdAt: Date.now(),
|
|
65
|
-
maxAge: options
|
|
66
|
-
})
|
|
53
|
+
maxAge: (options == null ? void 0 : options.maxAge) || 0
|
|
54
|
+
})
|
|
67
55
|
);
|
|
68
56
|
} catch (cause) {
|
|
69
|
-
//
|
|
70
57
|
}
|
|
71
58
|
}
|
|
72
|
-
|
|
73
59
|
/**
|
|
74
60
|
* 通过ID删除缓存数据
|
|
75
61
|
* @param id - 要删除的缓存键
|
|
76
62
|
*/
|
|
77
|
-
del(id
|
|
63
|
+
del(id) {
|
|
78
64
|
const { storage, namespace } = this;
|
|
79
65
|
const fullId = namespace ? `${namespace}:${id}` : id;
|
|
80
|
-
|
|
81
66
|
try {
|
|
82
67
|
storage.removeItem(fullId);
|
|
83
68
|
} catch (cause) {
|
|
84
|
-
//
|
|
85
69
|
}
|
|
86
70
|
}
|
|
87
|
-
|
|
88
71
|
clear() {
|
|
89
72
|
try {
|
|
90
73
|
this.storage.clear();
|
|
91
74
|
} catch (err) {
|
|
92
|
-
//
|
|
93
75
|
}
|
|
94
76
|
}
|
|
95
77
|
}
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
* 创建一个使用 localStorage 的缓存实例
|
|
99
|
-
* @template T - 缓存数据的类型
|
|
100
|
-
* @param namespace - 可选,用于为缓存键添加前缀的命名空间
|
|
101
|
-
* @returns 使用 localStorage 的新 StorageCache 实例
|
|
102
|
-
*/
|
|
103
|
-
export function createLocalCache<T>(namespace?: string): AbstractCache<T> {
|
|
104
|
-
return new StorageCache<T>(localStorage, namespace);
|
|
78
|
+
function createLocalCache(namespace) {
|
|
79
|
+
return new StorageCache(localStorage, namespace);
|
|
105
80
|
}
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
* 创建一个使用 sessionStorage 的缓存实例
|
|
109
|
-
* @template T - 缓存数据的类型
|
|
110
|
-
* @param namespace - 可选,用于为缓存键添加前缀的命名空间
|
|
111
|
-
* @returns 使用 sessionStorage 的新 StorageCache 实例
|
|
112
|
-
*/
|
|
113
|
-
export function createSessionCache<T>(namespace?: string): AbstractCache<T> {
|
|
114
|
-
return new StorageCache<T>(sessionStorage, namespace);
|
|
81
|
+
function createSessionCache(namespace) {
|
|
82
|
+
return new StorageCache(sessionStorage, namespace);
|
|
115
83
|
}
|
|
84
|
+
exports.StorageCache = StorageCache;
|
|
85
|
+
exports.createLocalCache = createLocalCache;
|
|
86
|
+
exports.createSessionCache = createSessionCache;
|
|
87
|
+
//# sourceMappingURL=cache.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"cache.cjs","sources":["../src/cache.ts"],"sourcesContent":["import { AbstractCache, type CacheOptions, type Cached } from '@cloudcome/utils-core/cache';\nimport type { MaybePromise } from '@cloudcome/utils-core/types';\n\n/**\n * 使用浏览器存储(localStorage 或 sessionStorage)实现的缓存类\n * @template T - 缓存数据的类型\n */\nexport class StorageCache<T> extends AbstractCache<T> {\n /**\n * 创建一个新的 StorageCache 实例\n * @param storage - 使用的存储实现(localStorage 或 sessionStorage)\n * @param namespace - 可选,用于为缓存键添加前缀的命名空间\n */\n constructor(\n readonly storage: Storage,\n readonly namespace = '',\n ) {\n super();\n }\n\n /**\n * 通过ID获取缓存数据\n * @param id - 要获取的缓存键\n * @returns 如果找到且未过期则返回缓存数据,否则返回null\n */\n get(id: string): Cached<T> | null {\n const { storage, namespace } = this;\n const fullId = namespace ? `${namespace}:${id}` : id;\n\n try {\n const cachedString = storage.getItem(fullId);\n if (!cachedString) return null;\n\n const cached = JSON.parse(cachedString);\n\n if (cached.createdAt + cached.maxAge < Date.now()) {\n this.del(id);\n return null;\n }\n\n return cached;\n } catch (e) {\n return null;\n }\n }\n\n /**\n * 将数据存储到缓存中\n * @param id - 存储数据使用的缓存键\n * @param data - 要缓存的数据\n * @param options - 可选的缓存配置\n * @returns 成功返回true,存储失败返回false\n */\n set(id: string, data: T, options?: CacheOptions) {\n const { storage, namespace } = this;\n const fullId = namespace ? `${namespace}:${id}` : id;\n\n try {\n storage.setItem(\n fullId,\n JSON.stringify({\n id,\n data,\n createdAt: Date.now(),\n maxAge: options?.maxAge || 0,\n }),\n );\n } catch (cause) {\n //\n }\n }\n\n /**\n * 通过ID删除缓存数据\n * @param id - 要删除的缓存键\n */\n del(id: string) {\n const { storage, namespace } = this;\n const fullId = namespace ? `${namespace}:${id}` : id;\n\n try {\n storage.removeItem(fullId);\n } catch (cause) {\n //\n }\n }\n\n clear() {\n try {\n this.storage.clear();\n } catch (err) {\n //\n }\n }\n}\n\n/**\n * 创建一个使用 localStorage 的缓存实例\n * @template T - 缓存数据的类型\n * @param namespace - 可选,用于为缓存键添加前缀的命名空间\n * @returns 使用 localStorage 的新 StorageCache 实例\n */\nexport function createLocalCache<T>(namespace?: string): AbstractCache<T> {\n return new StorageCache<T>(localStorage, namespace);\n}\n\n/**\n * 创建一个使用 sessionStorage 的缓存实例\n * @template T - 缓存数据的类型\n * @param namespace - 可选,用于为缓存键添加前缀的命名空间\n * @returns 使用 sessionStorage 的新 StorageCache 实例\n */\nexport function createSessionCache<T>(namespace?: string): AbstractCache<T> {\n return new StorageCache<T>(sessionStorage, namespace);\n}\n"],"names":["AbstractCache"],"mappings":";;;AAOO,MAAM,qBAAwBA,MAAAA,cAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMpD,YACW,SACA,YAAY,IACrB;AACM,UAAA;AAHG,SAAA,UAAA;AACA,SAAA,YAAA;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUX,IAAI,IAA8B;AAC1B,UAAA,EAAE,SAAS,UAAA,IAAc;AAC/B,UAAM,SAAS,YAAY,GAAG,SAAS,IAAI,EAAE,KAAK;AAE9C,QAAA;AACI,YAAA,eAAe,QAAQ,QAAQ,MAAM;AACvC,UAAA,CAAC,aAAqB,QAAA;AAEpB,YAAA,SAAS,KAAK,MAAM,YAAY;AAEtC,UAAI,OAAO,YAAY,OAAO,SAAS,KAAK,OAAO;AACjD,aAAK,IAAI,EAAE;AACJ,eAAA;AAAA,MAAA;AAGF,aAAA;AAAA,aACA,GAAG;AACH,aAAA;AAAA,IAAA;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUF,IAAI,IAAY,MAAS,SAAwB;AACzC,UAAA,EAAE,SAAS,UAAA,IAAc;AAC/B,UAAM,SAAS,YAAY,GAAG,SAAS,IAAI,EAAE,KAAK;AAE9C,QAAA;AACM,cAAA;AAAA,QACN;AAAA,QACA,KAAK,UAAU;AAAA,UACb;AAAA,UACA;AAAA,UACA,WAAW,KAAK,IAAI;AAAA,UACpB,SAAQ,mCAAS,WAAU;AAAA,QAC5B,CAAA;AAAA,MACH;AAAA,aACO,OAAO;AAAA,IAAA;AAAA,EAEhB;AAAA;AAAA;AAAA;AAAA;AAAA,EAOF,IAAI,IAAY;AACR,UAAA,EAAE,SAAS,UAAA,IAAc;AAC/B,UAAM,SAAS,YAAY,GAAG,SAAS,IAAI,EAAE,KAAK;AAE9C,QAAA;AACF,cAAQ,WAAW,MAAM;AAAA,aAClB,OAAO;AAAA,IAAA;AAAA,EAEhB;AAAA,EAGF,QAAQ;AACF,QAAA;AACF,WAAK,QAAQ,MAAM;AAAA,aACZ,KAAK;AAAA,IAAA;AAAA,EAEd;AAEJ;AAQO,SAAS,iBAAoB,WAAsC;AACjE,SAAA,IAAI,aAAgB,cAAc,SAAS;AACpD;AAQO,SAAS,mBAAsB,WAAsC;AACnE,SAAA,IAAI,aAAgB,gBAAgB,SAAS;AACtD;;;;"}
|
package/dist/cache.d.ts
ADDED
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import { AbstractCache, CacheOptions, Cached } from '@cloudcome/utils-core/cache';
|
|
2
|
+
/**
|
|
3
|
+
* 使用浏览器存储(localStorage 或 sessionStorage)实现的缓存类
|
|
4
|
+
* @template T - 缓存数据的类型
|
|
5
|
+
*/
|
|
6
|
+
export declare class StorageCache<T> extends AbstractCache<T> {
|
|
7
|
+
readonly storage: Storage;
|
|
8
|
+
readonly namespace: string;
|
|
9
|
+
/**
|
|
10
|
+
* 创建一个新的 StorageCache 实例
|
|
11
|
+
* @param storage - 使用的存储实现(localStorage 或 sessionStorage)
|
|
12
|
+
* @param namespace - 可选,用于为缓存键添加前缀的命名空间
|
|
13
|
+
*/
|
|
14
|
+
constructor(storage: Storage, namespace?: string);
|
|
15
|
+
/**
|
|
16
|
+
* 通过ID获取缓存数据
|
|
17
|
+
* @param id - 要获取的缓存键
|
|
18
|
+
* @returns 如果找到且未过期则返回缓存数据,否则返回null
|
|
19
|
+
*/
|
|
20
|
+
get(id: string): Cached<T> | null;
|
|
21
|
+
/**
|
|
22
|
+
* 将数据存储到缓存中
|
|
23
|
+
* @param id - 存储数据使用的缓存键
|
|
24
|
+
* @param data - 要缓存的数据
|
|
25
|
+
* @param options - 可选的缓存配置
|
|
26
|
+
* @returns 成功返回true,存储失败返回false
|
|
27
|
+
*/
|
|
28
|
+
set(id: string, data: T, options?: CacheOptions): void;
|
|
29
|
+
/**
|
|
30
|
+
* 通过ID删除缓存数据
|
|
31
|
+
* @param id - 要删除的缓存键
|
|
32
|
+
*/
|
|
33
|
+
del(id: string): void;
|
|
34
|
+
clear(): void;
|
|
35
|
+
}
|
|
36
|
+
/**
|
|
37
|
+
* 创建一个使用 localStorage 的缓存实例
|
|
38
|
+
* @template T - 缓存数据的类型
|
|
39
|
+
* @param namespace - 可选,用于为缓存键添加前缀的命名空间
|
|
40
|
+
* @returns 使用 localStorage 的新 StorageCache 实例
|
|
41
|
+
*/
|
|
42
|
+
export declare function createLocalCache<T>(namespace?: string): AbstractCache<T>;
|
|
43
|
+
/**
|
|
44
|
+
* 创建一个使用 sessionStorage 的缓存实例
|
|
45
|
+
* @template T - 缓存数据的类型
|
|
46
|
+
* @param namespace - 可选,用于为缓存键添加前缀的命名空间
|
|
47
|
+
* @returns 使用 sessionStorage 的新 StorageCache 实例
|
|
48
|
+
*/
|
|
49
|
+
export declare function createSessionCache<T>(namespace?: string): AbstractCache<T>;
|
package/dist/cache.mjs
ADDED
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
import { AbstractCache } from "@cloudcome/utils-core/cache";
|
|
2
|
+
class StorageCache extends AbstractCache {
|
|
3
|
+
/**
|
|
4
|
+
* 创建一个新的 StorageCache 实例
|
|
5
|
+
* @param storage - 使用的存储实现(localStorage 或 sessionStorage)
|
|
6
|
+
* @param namespace - 可选,用于为缓存键添加前缀的命名空间
|
|
7
|
+
*/
|
|
8
|
+
constructor(storage, namespace = "") {
|
|
9
|
+
super();
|
|
10
|
+
this.storage = storage;
|
|
11
|
+
this.namespace = namespace;
|
|
12
|
+
}
|
|
13
|
+
/**
|
|
14
|
+
* 通过ID获取缓存数据
|
|
15
|
+
* @param id - 要获取的缓存键
|
|
16
|
+
* @returns 如果找到且未过期则返回缓存数据,否则返回null
|
|
17
|
+
*/
|
|
18
|
+
get(id) {
|
|
19
|
+
const { storage, namespace } = this;
|
|
20
|
+
const fullId = namespace ? `${namespace}:${id}` : id;
|
|
21
|
+
try {
|
|
22
|
+
const cachedString = storage.getItem(fullId);
|
|
23
|
+
if (!cachedString) return null;
|
|
24
|
+
const cached = JSON.parse(cachedString);
|
|
25
|
+
if (cached.createdAt + cached.maxAge < Date.now()) {
|
|
26
|
+
this.del(id);
|
|
27
|
+
return null;
|
|
28
|
+
}
|
|
29
|
+
return cached;
|
|
30
|
+
} catch (e) {
|
|
31
|
+
return null;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
/**
|
|
35
|
+
* 将数据存储到缓存中
|
|
36
|
+
* @param id - 存储数据使用的缓存键
|
|
37
|
+
* @param data - 要缓存的数据
|
|
38
|
+
* @param options - 可选的缓存配置
|
|
39
|
+
* @returns 成功返回true,存储失败返回false
|
|
40
|
+
*/
|
|
41
|
+
set(id, data, options) {
|
|
42
|
+
const { storage, namespace } = this;
|
|
43
|
+
const fullId = namespace ? `${namespace}:${id}` : id;
|
|
44
|
+
try {
|
|
45
|
+
storage.setItem(
|
|
46
|
+
fullId,
|
|
47
|
+
JSON.stringify({
|
|
48
|
+
id,
|
|
49
|
+
data,
|
|
50
|
+
createdAt: Date.now(),
|
|
51
|
+
maxAge: (options == null ? void 0 : options.maxAge) || 0
|
|
52
|
+
})
|
|
53
|
+
);
|
|
54
|
+
} catch (cause) {
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
/**
|
|
58
|
+
* 通过ID删除缓存数据
|
|
59
|
+
* @param id - 要删除的缓存键
|
|
60
|
+
*/
|
|
61
|
+
del(id) {
|
|
62
|
+
const { storage, namespace } = this;
|
|
63
|
+
const fullId = namespace ? `${namespace}:${id}` : id;
|
|
64
|
+
try {
|
|
65
|
+
storage.removeItem(fullId);
|
|
66
|
+
} catch (cause) {
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
clear() {
|
|
70
|
+
try {
|
|
71
|
+
this.storage.clear();
|
|
72
|
+
} catch (err) {
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
function createLocalCache(namespace) {
|
|
77
|
+
return new StorageCache(localStorage, namespace);
|
|
78
|
+
}
|
|
79
|
+
function createSessionCache(namespace) {
|
|
80
|
+
return new StorageCache(sessionStorage, namespace);
|
|
81
|
+
}
|
|
82
|
+
export {
|
|
83
|
+
StorageCache,
|
|
84
|
+
createLocalCache,
|
|
85
|
+
createSessionCache
|
|
86
|
+
};
|
|
87
|
+
//# sourceMappingURL=cache.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"cache.mjs","sources":["../src/cache.ts"],"sourcesContent":["import { AbstractCache, type CacheOptions, type Cached } from '@cloudcome/utils-core/cache';\nimport type { MaybePromise } from '@cloudcome/utils-core/types';\n\n/**\n * 使用浏览器存储(localStorage 或 sessionStorage)实现的缓存类\n * @template T - 缓存数据的类型\n */\nexport class StorageCache<T> extends AbstractCache<T> {\n /**\n * 创建一个新的 StorageCache 实例\n * @param storage - 使用的存储实现(localStorage 或 sessionStorage)\n * @param namespace - 可选,用于为缓存键添加前缀的命名空间\n */\n constructor(\n readonly storage: Storage,\n readonly namespace = '',\n ) {\n super();\n }\n\n /**\n * 通过ID获取缓存数据\n * @param id - 要获取的缓存键\n * @returns 如果找到且未过期则返回缓存数据,否则返回null\n */\n get(id: string): Cached<T> | null {\n const { storage, namespace } = this;\n const fullId = namespace ? `${namespace}:${id}` : id;\n\n try {\n const cachedString = storage.getItem(fullId);\n if (!cachedString) return null;\n\n const cached = JSON.parse(cachedString);\n\n if (cached.createdAt + cached.maxAge < Date.now()) {\n this.del(id);\n return null;\n }\n\n return cached;\n } catch (e) {\n return null;\n }\n }\n\n /**\n * 将数据存储到缓存中\n * @param id - 存储数据使用的缓存键\n * @param data - 要缓存的数据\n * @param options - 可选的缓存配置\n * @returns 成功返回true,存储失败返回false\n */\n set(id: string, data: T, options?: CacheOptions) {\n const { storage, namespace } = this;\n const fullId = namespace ? `${namespace}:${id}` : id;\n\n try {\n storage.setItem(\n fullId,\n JSON.stringify({\n id,\n data,\n createdAt: Date.now(),\n maxAge: options?.maxAge || 0,\n }),\n );\n } catch (cause) {\n //\n }\n }\n\n /**\n * 通过ID删除缓存数据\n * @param id - 要删除的缓存键\n */\n del(id: string) {\n const { storage, namespace } = this;\n const fullId = namespace ? `${namespace}:${id}` : id;\n\n try {\n storage.removeItem(fullId);\n } catch (cause) {\n //\n }\n }\n\n clear() {\n try {\n this.storage.clear();\n } catch (err) {\n //\n }\n }\n}\n\n/**\n * 创建一个使用 localStorage 的缓存实例\n * @template T - 缓存数据的类型\n * @param namespace - 可选,用于为缓存键添加前缀的命名空间\n * @returns 使用 localStorage 的新 StorageCache 实例\n */\nexport function createLocalCache<T>(namespace?: string): AbstractCache<T> {\n return new StorageCache<T>(localStorage, namespace);\n}\n\n/**\n * 创建一个使用 sessionStorage 的缓存实例\n * @template T - 缓存数据的类型\n * @param namespace - 可选,用于为缓存键添加前缀的命名空间\n * @returns 使用 sessionStorage 的新 StorageCache 实例\n */\nexport function createSessionCache<T>(namespace?: string): AbstractCache<T> {\n return new StorageCache<T>(sessionStorage, namespace);\n}\n"],"names":[],"mappings":";AAOO,MAAM,qBAAwB,cAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMpD,YACW,SACA,YAAY,IACrB;AACM,UAAA;AAHG,SAAA,UAAA;AACA,SAAA,YAAA;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUX,IAAI,IAA8B;AAC1B,UAAA,EAAE,SAAS,UAAA,IAAc;AAC/B,UAAM,SAAS,YAAY,GAAG,SAAS,IAAI,EAAE,KAAK;AAE9C,QAAA;AACI,YAAA,eAAe,QAAQ,QAAQ,MAAM;AACvC,UAAA,CAAC,aAAqB,QAAA;AAEpB,YAAA,SAAS,KAAK,MAAM,YAAY;AAEtC,UAAI,OAAO,YAAY,OAAO,SAAS,KAAK,OAAO;AACjD,aAAK,IAAI,EAAE;AACJ,eAAA;AAAA,MAAA;AAGF,aAAA;AAAA,aACA,GAAG;AACH,aAAA;AAAA,IAAA;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUF,IAAI,IAAY,MAAS,SAAwB;AACzC,UAAA,EAAE,SAAS,UAAA,IAAc;AAC/B,UAAM,SAAS,YAAY,GAAG,SAAS,IAAI,EAAE,KAAK;AAE9C,QAAA;AACM,cAAA;AAAA,QACN;AAAA,QACA,KAAK,UAAU;AAAA,UACb;AAAA,UACA;AAAA,UACA,WAAW,KAAK,IAAI;AAAA,UACpB,SAAQ,mCAAS,WAAU;AAAA,QAC5B,CAAA;AAAA,MACH;AAAA,aACO,OAAO;AAAA,IAAA;AAAA,EAEhB;AAAA;AAAA;AAAA;AAAA;AAAA,EAOF,IAAI,IAAY;AACR,UAAA,EAAE,SAAS,UAAA,IAAc;AAC/B,UAAM,SAAS,YAAY,GAAG,SAAS,IAAI,EAAE,KAAK;AAE9C,QAAA;AACF,cAAQ,WAAW,MAAM;AAAA,aAClB,OAAO;AAAA,IAAA;AAAA,EAEhB;AAAA,EAGF,QAAQ;AACF,QAAA;AACF,WAAK,QAAQ,MAAM;AAAA,aACZ,KAAK;AAAA,IAAA;AAAA,EAEd;AAEJ;AAQO,SAAS,iBAAoB,WAAsC;AACjE,SAAA,IAAI,aAAgB,cAAc,SAAS;AACpD;AAQO,SAAS,mBAAsB,WAAsC;AACnE,SAAA,IAAI,aAAgB,gBAAgB,SAAS;AACtD;"}
|
package/dist/canvas.cjs
ADDED
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const object = require("@cloudcome/utils-core/object");
|
|
4
|
+
const image = require("./image.cjs");
|
|
5
|
+
function canvasToBase64(canvas, type, quality) {
|
|
6
|
+
return canvas.toDataURL(type, quality);
|
|
7
|
+
}
|
|
8
|
+
async function canvasToBlob(canvas, type, quality) {
|
|
9
|
+
return new Promise((resolve, reject) => {
|
|
10
|
+
canvas.toBlob(
|
|
11
|
+
(blob) => {
|
|
12
|
+
if (blob) {
|
|
13
|
+
resolve(blob);
|
|
14
|
+
} else {
|
|
15
|
+
reject(new Error("canvas 导出二进制对象失败"));
|
|
16
|
+
}
|
|
17
|
+
},
|
|
18
|
+
type,
|
|
19
|
+
quality
|
|
20
|
+
);
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
async function canvasDrawImage(canvas, url, options) {
|
|
24
|
+
const ctx = canvas.getContext("2d");
|
|
25
|
+
if (!ctx) throw new Error("canvas context is null");
|
|
26
|
+
const img = await image.imageLoad(url);
|
|
27
|
+
const defaults = {
|
|
28
|
+
srcLeft: 0,
|
|
29
|
+
srcTop: 0,
|
|
30
|
+
srcWidth: img.width,
|
|
31
|
+
srcHeight: img.height,
|
|
32
|
+
destLeft: 0,
|
|
33
|
+
destTop: 0,
|
|
34
|
+
destWidth: canvas.width,
|
|
35
|
+
destHeight: canvas.height
|
|
36
|
+
};
|
|
37
|
+
const { srcLeft, srcTop, srcWidth, srcHeight, destLeft, destTop, destWidth, destHeight } = object.objectDefaults(
|
|
38
|
+
options || {},
|
|
39
|
+
defaults
|
|
40
|
+
);
|
|
41
|
+
ctx.drawImage(
|
|
42
|
+
img,
|
|
43
|
+
// source
|
|
44
|
+
srcLeft,
|
|
45
|
+
srcTop,
|
|
46
|
+
srcWidth,
|
|
47
|
+
srcHeight,
|
|
48
|
+
// dest
|
|
49
|
+
destLeft,
|
|
50
|
+
destTop,
|
|
51
|
+
destWidth,
|
|
52
|
+
destHeight
|
|
53
|
+
);
|
|
54
|
+
}
|
|
55
|
+
exports.canvasDrawImage = canvasDrawImage;
|
|
56
|
+
exports.canvasToBase64 = canvasToBase64;
|
|
57
|
+
exports.canvasToBlob = canvasToBlob;
|
|
58
|
+
//# sourceMappingURL=canvas.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"canvas.cjs","sources":["../src/canvas.ts"],"sourcesContent":["import { objectDefaults } from '@cloudcome/utils-core/object';\nimport { imageLoad } from './image';\n\n/**\n * 将 Canvas 转换为 Base64 编码的字符串\n * @param {HTMLCanvasElement} canvas - 需要转换的 Canvas 元素\n * @param {string} [type] - 图片格式,默认为 'image/png'\n * @param {number} [quality] - 图片质量,范围 0 到 1,仅适用于 'image/jpeg' 或 'image/webp'\n * @returns {string} Base64 编码的图片数据\n * @example\n * const base64 = canvasToBase64(canvas, 'image/jpeg', 0.8);\n */\nexport function canvasToBase64(canvas: HTMLCanvasElement, type?: string, quality?: number) {\n return canvas.toDataURL(type, quality);\n}\n\n/**\n * 将 Canvas 转换为 Blob 对象\n * @param {HTMLCanvasElement} canvas - 需要转换的 Canvas 元素\n * @param {string} [type] - 图片格式,默认为 'image/png'\n * @param {number} [quality] - 图片质量,范围 0 到 1,仅适用于 'image/jpeg' 或 'image/webp'\n * @returns {Promise<Blob>} 返回一个包含 Blob 对象的 Promise\n * @example\n * const blob = await canvasToBlob(canvas, 'image/jpeg', 0.8);\n */\nexport async function canvasToBlob(canvas: HTMLCanvasElement, type?: string, quality?: number) {\n return new Promise<Blob>((resolve, reject) => {\n canvas.toBlob(\n (blob) => {\n if (blob) {\n resolve(blob);\n } else {\n reject(new Error('canvas 导出二进制对象失败'));\n }\n },\n type,\n quality,\n );\n });\n}\n\n/**\n * Canvas 绘制图片的配置选项\n */\nexport type CanvasDrawImageOptions = {\n /**\n * 源图片的左上角 x 坐标\n * @type {number}\n * @default 0\n */\n srcLeft?: number;\n /**\n * 源图片的左上角 y 坐标\n * @type {number}\n * @default 0\n */\n srcTop?: number;\n /**\n * 源图片的宽度\n * @type {number}\n * @default 图片的原始宽度\n */\n srcWidth?: number;\n /**\n * 源图片的高度\n * @type {number}\n * @default 图片的原始高度\n */\n srcHeight?: number;\n\n /**\n * 目标 Canvas 的左上角 x 坐标\n * @type {number}\n * @default 0\n */\n destLeft?: number;\n /**\n * 目标 Canvas 的左上角 y 坐标\n * @type {number}\n * @default 0\n */\n destTop?: number;\n /**\n * 目标 Canvas 的宽度\n * @type {number}\n * @default Canvas 的宽度\n */\n destWidth?: number;\n /**\n * 目标 Canvas 的高度\n * @type {number}\n * @default Canvas 的高度\n */\n destHeight?: number;\n};\n\n/**\n * 在 Canvas 上绘制图片\n * @param {HTMLCanvasElement} canvas - 目标 Canvas 元素\n * @param {string} url - 图片的 URL\n * @param {CanvasDrawImageOptions} [options] - 绘制图片的配置选项\n * @returns {Promise<void>} 返回一个 Promise,表示绘制完成\n * @example\n * await canvasDrawImage(canvas, 'https://example.com/image.png', {\n * srcLeft: 10,\n * srcTop: 10,\n * srcWidth: 100,\n * srcHeight: 100,\n * destLeft: 0,\n * destTop: 0,\n * destWidth: 200,\n * destHeight: 200\n * });\n */\nexport async function canvasDrawImage(canvas: HTMLCanvasElement, url: string, options?: CanvasDrawImageOptions) {\n const ctx = canvas.getContext('2d');\n if (!ctx) throw new Error('canvas context is null');\n\n const img = await imageLoad(url);\n const defaults: CanvasDrawImageOptions = {\n srcLeft: 0,\n srcTop: 0,\n srcWidth: img.width,\n srcHeight: img.height,\n destLeft: 0,\n destTop: 0,\n destWidth: canvas.width,\n destHeight: canvas.height,\n };\n const { srcLeft, srcTop, srcWidth, srcHeight, destLeft, destTop, destWidth, destHeight } = objectDefaults(\n options || {},\n defaults,\n ) as Required<CanvasDrawImageOptions>;\n ctx.drawImage(\n img,\n // source\n srcLeft,\n srcTop,\n srcWidth,\n srcHeight,\n // dest\n destLeft,\n destTop,\n destWidth,\n destHeight,\n );\n}\n"],"names":["imageLoad","objectDefaults"],"mappings":";;;;AAYgB,SAAA,eAAe,QAA2B,MAAe,SAAkB;AAClF,SAAA,OAAO,UAAU,MAAM,OAAO;AACvC;AAWsB,eAAA,aAAa,QAA2B,MAAe,SAAkB;AAC7F,SAAO,IAAI,QAAc,CAAC,SAAS,WAAW;AACrC,WAAA;AAAA,MACL,CAAC,SAAS;AACR,YAAI,MAAM;AACR,kBAAQ,IAAI;AAAA,QAAA,OACP;AACE,iBAAA,IAAI,MAAM,kBAAkB,CAAC;AAAA,QAAA;AAAA,MAExC;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EAAA,CACD;AACH;AA2EsB,eAAA,gBAAgB,QAA2B,KAAa,SAAkC;AACxG,QAAA,MAAM,OAAO,WAAW,IAAI;AAClC,MAAI,CAAC,IAAW,OAAA,IAAI,MAAM,wBAAwB;AAE5C,QAAA,MAAM,MAAMA,MAAA,UAAU,GAAG;AAC/B,QAAM,WAAmC;AAAA,IACvC,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,UAAU,IAAI;AAAA,IACd,WAAW,IAAI;AAAA,IACf,UAAU;AAAA,IACV,SAAS;AAAA,IACT,WAAW,OAAO;AAAA,IAClB,YAAY,OAAO;AAAA,EACrB;AACM,QAAA,EAAE,SAAS,QAAQ,UAAU,WAAW,UAAU,SAAS,WAAW,WAAA,IAAeC,OAAA;AAAA,IACzF,WAAW,CAAC;AAAA,IACZ;AAAA,EACF;AACI,MAAA;AAAA,IACF;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;;;;"}
|
package/dist/canvas.d.ts
ADDED
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* 将 Canvas 转换为 Base64 编码的字符串
|
|
3
|
+
* @param {HTMLCanvasElement} canvas - 需要转换的 Canvas 元素
|
|
4
|
+
* @param {string} [type] - 图片格式,默认为 'image/png'
|
|
5
|
+
* @param {number} [quality] - 图片质量,范围 0 到 1,仅适用于 'image/jpeg' 或 'image/webp'
|
|
6
|
+
* @returns {string} Base64 编码的图片数据
|
|
7
|
+
* @example
|
|
8
|
+
* const base64 = canvasToBase64(canvas, 'image/jpeg', 0.8);
|
|
9
|
+
*/
|
|
10
|
+
export declare function canvasToBase64(canvas: HTMLCanvasElement, type?: string, quality?: number): string;
|
|
11
|
+
/**
|
|
12
|
+
* 将 Canvas 转换为 Blob 对象
|
|
13
|
+
* @param {HTMLCanvasElement} canvas - 需要转换的 Canvas 元素
|
|
14
|
+
* @param {string} [type] - 图片格式,默认为 'image/png'
|
|
15
|
+
* @param {number} [quality] - 图片质量,范围 0 到 1,仅适用于 'image/jpeg' 或 'image/webp'
|
|
16
|
+
* @returns {Promise<Blob>} 返回一个包含 Blob 对象的 Promise
|
|
17
|
+
* @example
|
|
18
|
+
* const blob = await canvasToBlob(canvas, 'image/jpeg', 0.8);
|
|
19
|
+
*/
|
|
20
|
+
export declare function canvasToBlob(canvas: HTMLCanvasElement, type?: string, quality?: number): Promise<Blob>;
|
|
21
|
+
/**
|
|
22
|
+
* Canvas 绘制图片的配置选项
|
|
23
|
+
*/
|
|
24
|
+
export type CanvasDrawImageOptions = {
|
|
25
|
+
/**
|
|
26
|
+
* 源图片的左上角 x 坐标
|
|
27
|
+
* @type {number}
|
|
28
|
+
* @default 0
|
|
29
|
+
*/
|
|
30
|
+
srcLeft?: number;
|
|
31
|
+
/**
|
|
32
|
+
* 源图片的左上角 y 坐标
|
|
33
|
+
* @type {number}
|
|
34
|
+
* @default 0
|
|
35
|
+
*/
|
|
36
|
+
srcTop?: number;
|
|
37
|
+
/**
|
|
38
|
+
* 源图片的宽度
|
|
39
|
+
* @type {number}
|
|
40
|
+
* @default 图片的原始宽度
|
|
41
|
+
*/
|
|
42
|
+
srcWidth?: number;
|
|
43
|
+
/**
|
|
44
|
+
* 源图片的高度
|
|
45
|
+
* @type {number}
|
|
46
|
+
* @default 图片的原始高度
|
|
47
|
+
*/
|
|
48
|
+
srcHeight?: number;
|
|
49
|
+
/**
|
|
50
|
+
* 目标 Canvas 的左上角 x 坐标
|
|
51
|
+
* @type {number}
|
|
52
|
+
* @default 0
|
|
53
|
+
*/
|
|
54
|
+
destLeft?: number;
|
|
55
|
+
/**
|
|
56
|
+
* 目标 Canvas 的左上角 y 坐标
|
|
57
|
+
* @type {number}
|
|
58
|
+
* @default 0
|
|
59
|
+
*/
|
|
60
|
+
destTop?: number;
|
|
61
|
+
/**
|
|
62
|
+
* 目标 Canvas 的宽度
|
|
63
|
+
* @type {number}
|
|
64
|
+
* @default Canvas 的宽度
|
|
65
|
+
*/
|
|
66
|
+
destWidth?: number;
|
|
67
|
+
/**
|
|
68
|
+
* 目标 Canvas 的高度
|
|
69
|
+
* @type {number}
|
|
70
|
+
* @default Canvas 的高度
|
|
71
|
+
*/
|
|
72
|
+
destHeight?: number;
|
|
73
|
+
};
|
|
74
|
+
/**
|
|
75
|
+
* 在 Canvas 上绘制图片
|
|
76
|
+
* @param {HTMLCanvasElement} canvas - 目标 Canvas 元素
|
|
77
|
+
* @param {string} url - 图片的 URL
|
|
78
|
+
* @param {CanvasDrawImageOptions} [options] - 绘制图片的配置选项
|
|
79
|
+
* @returns {Promise<void>} 返回一个 Promise,表示绘制完成
|
|
80
|
+
* @example
|
|
81
|
+
* await canvasDrawImage(canvas, 'https://example.com/image.png', {
|
|
82
|
+
* srcLeft: 10,
|
|
83
|
+
* srcTop: 10,
|
|
84
|
+
* srcWidth: 100,
|
|
85
|
+
* srcHeight: 100,
|
|
86
|
+
* destLeft: 0,
|
|
87
|
+
* destTop: 0,
|
|
88
|
+
* destWidth: 200,
|
|
89
|
+
* destHeight: 200
|
|
90
|
+
* });
|
|
91
|
+
*/
|
|
92
|
+
export declare function canvasDrawImage(canvas: HTMLCanvasElement, url: string, options?: CanvasDrawImageOptions): Promise<void>;
|
package/dist/canvas.mjs
ADDED
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import { objectDefaults } from "@cloudcome/utils-core/object";
|
|
2
|
+
import { imageLoad } from "./image.mjs";
|
|
3
|
+
function canvasToBase64(canvas, type, quality) {
|
|
4
|
+
return canvas.toDataURL(type, quality);
|
|
5
|
+
}
|
|
6
|
+
async function canvasToBlob(canvas, type, quality) {
|
|
7
|
+
return new Promise((resolve, reject) => {
|
|
8
|
+
canvas.toBlob(
|
|
9
|
+
(blob) => {
|
|
10
|
+
if (blob) {
|
|
11
|
+
resolve(blob);
|
|
12
|
+
} else {
|
|
13
|
+
reject(new Error("canvas 导出二进制对象失败"));
|
|
14
|
+
}
|
|
15
|
+
},
|
|
16
|
+
type,
|
|
17
|
+
quality
|
|
18
|
+
);
|
|
19
|
+
});
|
|
20
|
+
}
|
|
21
|
+
async function canvasDrawImage(canvas, url, options) {
|
|
22
|
+
const ctx = canvas.getContext("2d");
|
|
23
|
+
if (!ctx) throw new Error("canvas context is null");
|
|
24
|
+
const img = await imageLoad(url);
|
|
25
|
+
const defaults = {
|
|
26
|
+
srcLeft: 0,
|
|
27
|
+
srcTop: 0,
|
|
28
|
+
srcWidth: img.width,
|
|
29
|
+
srcHeight: img.height,
|
|
30
|
+
destLeft: 0,
|
|
31
|
+
destTop: 0,
|
|
32
|
+
destWidth: canvas.width,
|
|
33
|
+
destHeight: canvas.height
|
|
34
|
+
};
|
|
35
|
+
const { srcLeft, srcTop, srcWidth, srcHeight, destLeft, destTop, destWidth, destHeight } = objectDefaults(
|
|
36
|
+
options || {},
|
|
37
|
+
defaults
|
|
38
|
+
);
|
|
39
|
+
ctx.drawImage(
|
|
40
|
+
img,
|
|
41
|
+
// source
|
|
42
|
+
srcLeft,
|
|
43
|
+
srcTop,
|
|
44
|
+
srcWidth,
|
|
45
|
+
srcHeight,
|
|
46
|
+
// dest
|
|
47
|
+
destLeft,
|
|
48
|
+
destTop,
|
|
49
|
+
destWidth,
|
|
50
|
+
destHeight
|
|
51
|
+
);
|
|
52
|
+
}
|
|
53
|
+
export {
|
|
54
|
+
canvasDrawImage,
|
|
55
|
+
canvasToBase64,
|
|
56
|
+
canvasToBlob
|
|
57
|
+
};
|
|
58
|
+
//# sourceMappingURL=canvas.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"canvas.mjs","sources":["../src/canvas.ts"],"sourcesContent":["import { objectDefaults } from '@cloudcome/utils-core/object';\nimport { imageLoad } from './image';\n\n/**\n * 将 Canvas 转换为 Base64 编码的字符串\n * @param {HTMLCanvasElement} canvas - 需要转换的 Canvas 元素\n * @param {string} [type] - 图片格式,默认为 'image/png'\n * @param {number} [quality] - 图片质量,范围 0 到 1,仅适用于 'image/jpeg' 或 'image/webp'\n * @returns {string} Base64 编码的图片数据\n * @example\n * const base64 = canvasToBase64(canvas, 'image/jpeg', 0.8);\n */\nexport function canvasToBase64(canvas: HTMLCanvasElement, type?: string, quality?: number) {\n return canvas.toDataURL(type, quality);\n}\n\n/**\n * 将 Canvas 转换为 Blob 对象\n * @param {HTMLCanvasElement} canvas - 需要转换的 Canvas 元素\n * @param {string} [type] - 图片格式,默认为 'image/png'\n * @param {number} [quality] - 图片质量,范围 0 到 1,仅适用于 'image/jpeg' 或 'image/webp'\n * @returns {Promise<Blob>} 返回一个包含 Blob 对象的 Promise\n * @example\n * const blob = await canvasToBlob(canvas, 'image/jpeg', 0.8);\n */\nexport async function canvasToBlob(canvas: HTMLCanvasElement, type?: string, quality?: number) {\n return new Promise<Blob>((resolve, reject) => {\n canvas.toBlob(\n (blob) => {\n if (blob) {\n resolve(blob);\n } else {\n reject(new Error('canvas 导出二进制对象失败'));\n }\n },\n type,\n quality,\n );\n });\n}\n\n/**\n * Canvas 绘制图片的配置选项\n */\nexport type CanvasDrawImageOptions = {\n /**\n * 源图片的左上角 x 坐标\n * @type {number}\n * @default 0\n */\n srcLeft?: number;\n /**\n * 源图片的左上角 y 坐标\n * @type {number}\n * @default 0\n */\n srcTop?: number;\n /**\n * 源图片的宽度\n * @type {number}\n * @default 图片的原始宽度\n */\n srcWidth?: number;\n /**\n * 源图片的高度\n * @type {number}\n * @default 图片的原始高度\n */\n srcHeight?: number;\n\n /**\n * 目标 Canvas 的左上角 x 坐标\n * @type {number}\n * @default 0\n */\n destLeft?: number;\n /**\n * 目标 Canvas 的左上角 y 坐标\n * @type {number}\n * @default 0\n */\n destTop?: number;\n /**\n * 目标 Canvas 的宽度\n * @type {number}\n * @default Canvas 的宽度\n */\n destWidth?: number;\n /**\n * 目标 Canvas 的高度\n * @type {number}\n * @default Canvas 的高度\n */\n destHeight?: number;\n};\n\n/**\n * 在 Canvas 上绘制图片\n * @param {HTMLCanvasElement} canvas - 目标 Canvas 元素\n * @param {string} url - 图片的 URL\n * @param {CanvasDrawImageOptions} [options] - 绘制图片的配置选项\n * @returns {Promise<void>} 返回一个 Promise,表示绘制完成\n * @example\n * await canvasDrawImage(canvas, 'https://example.com/image.png', {\n * srcLeft: 10,\n * srcTop: 10,\n * srcWidth: 100,\n * srcHeight: 100,\n * destLeft: 0,\n * destTop: 0,\n * destWidth: 200,\n * destHeight: 200\n * });\n */\nexport async function canvasDrawImage(canvas: HTMLCanvasElement, url: string, options?: CanvasDrawImageOptions) {\n const ctx = canvas.getContext('2d');\n if (!ctx) throw new Error('canvas context is null');\n\n const img = await imageLoad(url);\n const defaults: CanvasDrawImageOptions = {\n srcLeft: 0,\n srcTop: 0,\n srcWidth: img.width,\n srcHeight: img.height,\n destLeft: 0,\n destTop: 0,\n destWidth: canvas.width,\n destHeight: canvas.height,\n };\n const { srcLeft, srcTop, srcWidth, srcHeight, destLeft, destTop, destWidth, destHeight } = objectDefaults(\n options || {},\n defaults,\n ) as Required<CanvasDrawImageOptions>;\n ctx.drawImage(\n img,\n // source\n srcLeft,\n srcTop,\n srcWidth,\n srcHeight,\n // dest\n destLeft,\n destTop,\n destWidth,\n destHeight,\n );\n}\n"],"names":[],"mappings":";;AAYgB,SAAA,eAAe,QAA2B,MAAe,SAAkB;AAClF,SAAA,OAAO,UAAU,MAAM,OAAO;AACvC;AAWsB,eAAA,aAAa,QAA2B,MAAe,SAAkB;AAC7F,SAAO,IAAI,QAAc,CAAC,SAAS,WAAW;AACrC,WAAA;AAAA,MACL,CAAC,SAAS;AACR,YAAI,MAAM;AACR,kBAAQ,IAAI;AAAA,QAAA,OACP;AACE,iBAAA,IAAI,MAAM,kBAAkB,CAAC;AAAA,QAAA;AAAA,MAExC;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EAAA,CACD;AACH;AA2EsB,eAAA,gBAAgB,QAA2B,KAAa,SAAkC;AACxG,QAAA,MAAM,OAAO,WAAW,IAAI;AAClC,MAAI,CAAC,IAAW,OAAA,IAAI,MAAM,wBAAwB;AAE5C,QAAA,MAAM,MAAM,UAAU,GAAG;AAC/B,QAAM,WAAmC;AAAA,IACvC,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,UAAU,IAAI;AAAA,IACd,WAAW,IAAI;AAAA,IACf,UAAU;AAAA,IACV,SAAS;AAAA,IACT,WAAW,OAAO;AAAA,IAClB,YAAY,OAAO;AAAA,EACrB;AACM,QAAA,EAAE,SAAS,QAAQ,UAAU,WAAW,UAAU,SAAS,WAAW,WAAA,IAAe;AAAA,IACzF,WAAW,CAAC;AAAA,IACZ;AAAA,EACF;AACI,MAAA;AAAA,IACF;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
function copyText(text) {
|
|
4
|
+
const textArea = document.createElement("textarea");
|
|
5
|
+
textArea.value = text;
|
|
6
|
+
textArea.style.position = "fixed";
|
|
7
|
+
textArea.style.left = "-9999px";
|
|
8
|
+
textArea.style.top = "-9999px";
|
|
9
|
+
document.body.appendChild(textArea);
|
|
10
|
+
textArea.focus();
|
|
11
|
+
textArea.select();
|
|
12
|
+
document.execCommand("copy");
|
|
13
|
+
document.body.removeChild(textArea);
|
|
14
|
+
}
|
|
15
|
+
exports.copyText = copyText;
|
|
16
|
+
//# sourceMappingURL=clipboard.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"clipboard.cjs","sources":["../src/clipboard.ts"],"sourcesContent":["/**\n * 将文本复制到剪贴板\n * 该方法使用传统的 execCommand 方法实现文本复制\n *\n * @param text - 要复制到剪贴板的文本内容\n * @returns void\n *\n * @example\n * // 基本用法\n * await copyText('Hello World');\n *\n * @example\n * // 处理复制结果\n * copyText('Hello World')\n * .then(() => console.log('复制成功'))\n * .catch(() => console.error('复制失败'));\n */\nexport function copyText(text: string) {\n const textArea = document.createElement('textarea');\n textArea.value = text;\n textArea.style.position = 'fixed';\n textArea.style.left = '-9999px';\n textArea.style.top = '-9999px';\n document.body.appendChild(textArea);\n textArea.focus();\n textArea.select();\n document.execCommand('copy');\n document.body.removeChild(textArea);\n}\n"],"names":[],"mappings":";;AAiBO,SAAS,SAAS,MAAc;AAC/B,QAAA,WAAW,SAAS,cAAc,UAAU;AAClD,WAAS,QAAQ;AACjB,WAAS,MAAM,WAAW;AAC1B,WAAS,MAAM,OAAO;AACtB,WAAS,MAAM,MAAM;AACZ,WAAA,KAAK,YAAY,QAAQ;AAClC,WAAS,MAAM;AACf,WAAS,OAAO;AAChB,WAAS,YAAY,MAAM;AAClB,WAAA,KAAK,YAAY,QAAQ;AACpC;;"}
|
|
@@ -15,15 +15,4 @@
|
|
|
15
15
|
* .then(() => console.log('复制成功'))
|
|
16
16
|
* .catch(() => console.error('复制失败'));
|
|
17
17
|
*/
|
|
18
|
-
export function copyText(text: string)
|
|
19
|
-
const textArea = document.createElement('textarea');
|
|
20
|
-
textArea.value = text;
|
|
21
|
-
textArea.style.position = 'fixed';
|
|
22
|
-
textArea.style.left = '-9999px';
|
|
23
|
-
textArea.style.top = '-9999px';
|
|
24
|
-
document.body.appendChild(textArea);
|
|
25
|
-
textArea.focus();
|
|
26
|
-
textArea.select();
|
|
27
|
-
document.execCommand('copy');
|
|
28
|
-
document.body.removeChild(textArea);
|
|
29
|
-
}
|
|
18
|
+
export declare function copyText(text: string): void;
|