@cloudcome/utils-browser 1.2.16 → 1.2.18

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 (47) hide show
  1. package/README.md +72 -73
  2. package/dist/base64.cjs +21 -8
  3. package/dist/base64.cjs.map +1 -1
  4. package/dist/base64.mjs +22 -11
  5. package/dist/base64.mjs.map +1 -1
  6. package/dist/cache.cjs +91 -79
  7. package/dist/cache.cjs.map +1 -1
  8. package/dist/cache.d.ts +1 -1
  9. package/dist/cache.mjs +91 -82
  10. package/dist/cache.mjs.map +1 -1
  11. package/dist/canvas.cjs +64 -48
  12. package/dist/canvas.cjs.map +1 -1
  13. package/dist/canvas.mjs +64 -51
  14. package/dist/canvas.mjs.map +1 -1
  15. package/dist/clipboard.cjs +34 -15
  16. package/dist/clipboard.cjs.map +1 -1
  17. package/dist/clipboard.mjs +35 -17
  18. package/dist/clipboard.mjs.map +1 -1
  19. package/dist/cookie.cjs +42 -41
  20. package/dist/cookie.cjs.map +1 -1
  21. package/dist/cookie.mjs +42 -44
  22. package/dist/cookie.mjs.map +1 -1
  23. package/dist/dom.cjs +30 -11
  24. package/dist/dom.cjs.map +1 -1
  25. package/dist/dom.mjs +30 -13
  26. package/dist/dom.mjs.map +1 -1
  27. package/dist/download.cjs +24 -12
  28. package/dist/download.cjs.map +1 -1
  29. package/dist/download.mjs +25 -15
  30. package/dist/download.mjs.map +1 -1
  31. package/dist/image.cjs +45 -34
  32. package/dist/image.cjs.map +1 -1
  33. package/dist/image.mjs +45 -35
  34. package/dist/image.mjs.map +1 -1
  35. package/dist/index.cjs +8 -3
  36. package/dist/index.cjs.map +1 -1
  37. package/dist/index.mjs +9 -5
  38. package/dist/index.mjs.map +1 -1
  39. package/dist/timer.cjs +40 -37
  40. package/dist/timer.cjs.map +1 -1
  41. package/dist/timer.mjs +40 -38
  42. package/dist/timer.mjs.map +1 -1
  43. package/dist/video.cjs +25 -14
  44. package/dist/video.cjs.map +1 -1
  45. package/dist/video.mjs +26 -16
  46. package/dist/video.mjs.map +1 -1
  47. package/package.json +51 -52
package/dist/cache.mjs CHANGED
@@ -1,87 +1,96 @@
1
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?.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
- }
2
+ //#region src/cache.ts
3
+ /**
4
+ * 使用浏览器存储(localStorage sessionStorage)实现的缓存类
5
+ * @template T - 缓存数据的类型
6
+ */
7
+ var StorageCache = class extends AbstractCache {
8
+ /**
9
+ * 创建一个新的 StorageCache 实例
10
+ * @param storage - 使用的存储实现(localStorage 或 sessionStorage)
11
+ * @param namespace - 可选,用于为缓存键添加前缀的命名空间
12
+ */
13
+ constructor(storage, namespace = "") {
14
+ super();
15
+ this.storage = storage;
16
+ this.namespace = namespace;
17
+ }
18
+ /**
19
+ * 通过ID获取缓存数据
20
+ * @param id - 要获取的缓存键
21
+ * @returns 如果找到且未过期则返回缓存数据,否则返回null
22
+ */
23
+ get(id) {
24
+ const { storage, namespace } = this;
25
+ const fullId = namespace ? `${namespace}:${id}` : id;
26
+ try {
27
+ const cachedString = storage.getItem(fullId);
28
+ if (!cachedString) return null;
29
+ const cached = JSON.parse(cachedString);
30
+ if (cached.createdAt + cached.maxAge < Date.now()) {
31
+ this.del(id);
32
+ return null;
33
+ }
34
+ return cached;
35
+ } catch {
36
+ return null;
37
+ }
38
+ }
39
+ /**
40
+ * 将数据存储到缓存中
41
+ * @param id - 存储数据使用的缓存键
42
+ * @param data - 要缓存的数据
43
+ * @param options - 可选的缓存配置
44
+ * @returns 成功返回true,存储失败返回false
45
+ */
46
+ set(id, data, options) {
47
+ const { storage, namespace } = this;
48
+ const fullId = namespace ? `${namespace}:${id}` : id;
49
+ try {
50
+ storage.setItem(fullId, JSON.stringify({
51
+ id,
52
+ data,
53
+ createdAt: Date.now(),
54
+ maxAge: options?.maxAge || 0
55
+ }));
56
+ } catch {}
57
+ }
58
+ /**
59
+ * 通过ID删除缓存数据
60
+ * @param id - 要删除的缓存键
61
+ */
62
+ del(id) {
63
+ const { storage, namespace } = this;
64
+ const fullId = namespace ? `${namespace}:${id}` : id;
65
+ try {
66
+ storage.removeItem(fullId);
67
+ } catch {}
68
+ }
69
+ clear() {
70
+ try {
71
+ this.storage.clear();
72
+ } catch {}
73
+ }
74
+ };
75
+ /**
76
+ * 创建一个使用 localStorage 的缓存实例
77
+ * @template T - 缓存数据的类型
78
+ * @param namespace - 可选,用于为缓存键添加前缀的命名空间
79
+ * @returns 使用 localStorage 的新 StorageCache 实例
80
+ */
76
81
  function createLocalCache(namespace) {
77
- return new StorageCache(localStorage, namespace);
82
+ return new StorageCache(localStorage, namespace);
78
83
  }
84
+ /**
85
+ * 创建一个使用 sessionStorage 的缓存实例
86
+ * @template T - 缓存数据的类型
87
+ * @param namespace - 可选,用于为缓存键添加前缀的命名空间
88
+ * @returns 使用 sessionStorage 的新 StorageCache 实例
89
+ */
79
90
  function createSessionCache(namespace) {
80
- return new StorageCache(sessionStorage, namespace);
91
+ return new StorageCache(sessionStorage, namespace);
81
92
  }
82
- export {
83
- StorageCache,
84
- createLocalCache,
85
- createSessionCache
86
- };
87
- //# sourceMappingURL=cache.mjs.map
93
+ //#endregion
94
+ export { StorageCache, createLocalCache, createSessionCache };
95
+
96
+ //# sourceMappingURL=cache.mjs.map
@@ -1 +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,QAAQ,SAAS,UAAU;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;"}
1
+ {"version":3,"file":"cache.mjs","names":[],"sources":["../src/cache.ts"],"sourcesContent":["import { AbstractCache, type Cached, type CacheOptions } from '@cloudcome/utils-core/cache';\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 {\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 {\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 {\n //\n }\n }\n\n clear() {\n try {\n this.storage.clear();\n } catch {\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"],"mappings":";;;;;;AAMA,IAAa,eAAb,cAAqC,cAAiB;;;;;;CAMpD,YACE,SACA,YAAqB,IACrB;EACA,OAAO;EAHE,KAAA,UAAA;EACA,KAAA,YAAA;;;;;;;CAUX,IAAI,IAA8B;EAChC,MAAM,EAAE,SAAS,cAAc;EAC/B,MAAM,SAAS,YAAY,GAAG,UAAU,GAAG,OAAO;EAElD,IAAI;GACF,MAAM,eAAe,QAAQ,QAAQ,OAAO;GAC5C,IAAI,CAAC,cAAc,OAAO;GAE1B,MAAM,SAAS,KAAK,MAAM,aAAa;GAEvC,IAAI,OAAO,YAAY,OAAO,SAAS,KAAK,KAAK,EAAE;IACjD,KAAK,IAAI,GAAG;IACZ,OAAO;;GAGT,OAAO;UACD;GACN,OAAO;;;;;;;;;;CAWX,IAAI,IAAY,MAAS,SAAwB;EAC/C,MAAM,EAAE,SAAS,cAAc;EAC/B,MAAM,SAAS,YAAY,GAAG,UAAU,GAAG,OAAO;EAElD,IAAI;GACF,QAAQ,QACN,QACA,KAAK,UAAU;IACb;IACA;IACA,WAAW,KAAK,KAAK;IACrB,QAAQ,SAAS,UAAU;IAC5B,CAAC,CACH;UACK;;;;;;CASV,IAAI,IAAY;EACd,MAAM,EAAE,SAAS,cAAc;EAC/B,MAAM,SAAS,YAAY,GAAG,UAAU,GAAG,OAAO;EAElD,IAAI;GACF,QAAQ,WAAW,OAAO;UACpB;;CAKV,QAAQ;EACN,IAAI;GACF,KAAK,QAAQ,OAAO;UACd;;;;;;;;;AAYZ,SAAgB,iBAAoB,WAAsC;CACxE,OAAO,IAAI,aAAgB,cAAc,UAAU;;;;;;;;AASrD,SAAgB,mBAAsB,WAAsC;CAC1E,OAAO,IAAI,aAAgB,gBAAgB,UAAU"}
package/dist/canvas.cjs CHANGED
@@ -1,58 +1,74 @@
1
- "use strict";
2
1
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const object = require("@cloudcome/utils-core/object");
4
- const image = require("./image.cjs");
2
+ const require_image = require("./image.cjs");
3
+ let _cloudcome_utils_core_object = require("@cloudcome/utils-core/object");
4
+ //#region src/canvas.ts
5
+ /**
6
+ * 将 Canvas 转换为 Base64 编码的字符串
7
+ * @param {HTMLCanvasElement} canvas - 需要转换的 Canvas 元素
8
+ * @param {string} [type] - 图片格式,默认为 'image/png'
9
+ * @param {number} [quality] - 图片质量,范围 0 到 1,仅适用于 'image/jpeg' 或 'image/webp'
10
+ * @returns {string} Base64 编码的图片数据
11
+ * @example
12
+ * const base64 = canvasToBase64(canvas, 'image/jpeg', 0.8);
13
+ */
5
14
  function canvasToBase64(canvas, type, quality) {
6
- return canvas.toDataURL(type, quality);
15
+ return canvas.toDataURL(type, quality);
7
16
  }
17
+ /**
18
+ * 将 Canvas 转换为 Blob 对象
19
+ * @param {HTMLCanvasElement} canvas - 需要转换的 Canvas 元素
20
+ * @param {string} [type] - 图片格式,默认为 'image/png'
21
+ * @param {number} [quality] - 图片质量,范围 0 到 1,仅适用于 'image/jpeg' 或 'image/webp'
22
+ * @returns {Promise<Blob>} 返回一个包含 Blob 对象的 Promise
23
+ * @example
24
+ * const blob = await canvasToBlob(canvas, 'image/jpeg', 0.8);
25
+ */
8
26
  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
- });
27
+ return new Promise((resolve, reject) => {
28
+ canvas.toBlob((blob) => {
29
+ if (blob) resolve(blob);
30
+ else reject(/* @__PURE__ */ new Error("canvas 导出二进制对象失败"));
31
+ }, type, quality);
32
+ });
22
33
  }
34
+ /**
35
+ * 在 Canvas 上绘制图片
36
+ * @param {HTMLCanvasElement} canvas - 目标 Canvas 元素
37
+ * @param {string} url - 图片的 URL
38
+ * @param {CanvasDrawImageOptions} [options] - 绘制图片的配置选项
39
+ * @returns {Promise<void>} 返回一个 Promise,表示绘制完成
40
+ * @example
41
+ * await canvasDrawImage(canvas, 'https://example.com/image.png', {
42
+ * srcLeft: 10,
43
+ * srcTop: 10,
44
+ * srcWidth: 100,
45
+ * srcHeight: 100,
46
+ * destLeft: 0,
47
+ * destTop: 0,
48
+ * destWidth: 200,
49
+ * destHeight: 200
50
+ * });
51
+ */
23
52
  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
- );
53
+ const ctx = canvas.getContext("2d");
54
+ if (!ctx) throw new Error("canvas context is null");
55
+ const img = await require_image.imageLoad(url);
56
+ const defaults = {
57
+ srcLeft: 0,
58
+ srcTop: 0,
59
+ srcWidth: img.width,
60
+ srcHeight: img.height,
61
+ destLeft: 0,
62
+ destTop: 0,
63
+ destWidth: canvas.width,
64
+ destHeight: canvas.height
65
+ };
66
+ const { srcLeft, srcTop, srcWidth, srcHeight, destLeft, destTop, destWidth, destHeight } = (0, _cloudcome_utils_core_object.objectDefaults)(options || {}, defaults);
67
+ ctx.drawImage(img, srcLeft, srcTop, srcWidth, srcHeight, destLeft, destTop, destWidth, destHeight);
54
68
  }
69
+ //#endregion
55
70
  exports.canvasDrawImage = canvasDrawImage;
56
71
  exports.canvasToBase64 = canvasToBase64;
57
72
  exports.canvasToBlob = canvasToBlob;
58
- //# sourceMappingURL=canvas.cjs.map
73
+
74
+ //# sourceMappingURL=canvas.cjs.map
@@ -1 +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;;;;"}
1
+ {"version":3,"file":"canvas.cjs","names":[],"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"],"mappings":";;;;;;;;;;;;;AAYA,SAAgB,eAAe,QAA2B,MAAe,SAAkB;CACzF,OAAO,OAAO,UAAU,MAAM,QAAQ;;;;;;;;;;;AAYxC,eAAsB,aAAa,QAA2B,MAAe,SAAkB;CAC7F,OAAO,IAAI,SAAe,SAAS,WAAW;EAC5C,OAAO,QACJ,SAAS;GACR,IAAI,MACF,QAAQ,KAAK;QAEb,uBAAO,IAAI,MAAM,mBAAmB,CAAC;KAGzC,MACA,QACD;GACD;;;;;;;;;;;;;;;;;;;;AA4EJ,eAAsB,gBAAgB,QAA2B,KAAa,SAAkC;CAC9G,MAAM,MAAM,OAAO,WAAW,KAAK;CACnC,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,yBAAyB;CAEnD,MAAM,MAAM,MAAM,cAAA,UAAU,IAAI;CAChC,MAAM,WAAmC;EACvC,SAAS;EACT,QAAQ;EACR,UAAU,IAAI;EACd,WAAW,IAAI;EACf,UAAU;EACV,SAAS;EACT,WAAW,OAAO;EAClB,YAAY,OAAO;EACpB;CACD,MAAM,EAAE,SAAS,QAAQ,UAAU,WAAW,UAAU,SAAS,WAAW,gBAAA,GAAA,6BAAA,gBAC1E,WAAW,EAAE,EACb,SACD;CACD,IAAI,UACF,KAEA,SACA,QACA,UACA,WAEA,UACA,SACA,WACA,WACD"}
package/dist/canvas.mjs CHANGED
@@ -1,58 +1,71 @@
1
- import { objectDefaults } from "@cloudcome/utils-core/object";
2
1
  import { imageLoad } from "./image.mjs";
2
+ import { objectDefaults } from "@cloudcome/utils-core/object";
3
+ //#region src/canvas.ts
4
+ /**
5
+ * 将 Canvas 转换为 Base64 编码的字符串
6
+ * @param {HTMLCanvasElement} canvas - 需要转换的 Canvas 元素
7
+ * @param {string} [type] - 图片格式,默认为 'image/png'
8
+ * @param {number} [quality] - 图片质量,范围 0 到 1,仅适用于 'image/jpeg' 或 'image/webp'
9
+ * @returns {string} Base64 编码的图片数据
10
+ * @example
11
+ * const base64 = canvasToBase64(canvas, 'image/jpeg', 0.8);
12
+ */
3
13
  function canvasToBase64(canvas, type, quality) {
4
- return canvas.toDataURL(type, quality);
14
+ return canvas.toDataURL(type, quality);
5
15
  }
16
+ /**
17
+ * 将 Canvas 转换为 Blob 对象
18
+ * @param {HTMLCanvasElement} canvas - 需要转换的 Canvas 元素
19
+ * @param {string} [type] - 图片格式,默认为 'image/png'
20
+ * @param {number} [quality] - 图片质量,范围 0 到 1,仅适用于 'image/jpeg' 或 'image/webp'
21
+ * @returns {Promise<Blob>} 返回一个包含 Blob 对象的 Promise
22
+ * @example
23
+ * const blob = await canvasToBlob(canvas, 'image/jpeg', 0.8);
24
+ */
6
25
  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
- });
26
+ return new Promise((resolve, reject) => {
27
+ canvas.toBlob((blob) => {
28
+ if (blob) resolve(blob);
29
+ else reject(/* @__PURE__ */ new Error("canvas 导出二进制对象失败"));
30
+ }, type, quality);
31
+ });
20
32
  }
33
+ /**
34
+ * 在 Canvas 上绘制图片
35
+ * @param {HTMLCanvasElement} canvas - 目标 Canvas 元素
36
+ * @param {string} url - 图片的 URL
37
+ * @param {CanvasDrawImageOptions} [options] - 绘制图片的配置选项
38
+ * @returns {Promise<void>} 返回一个 Promise,表示绘制完成
39
+ * @example
40
+ * await canvasDrawImage(canvas, 'https://example.com/image.png', {
41
+ * srcLeft: 10,
42
+ * srcTop: 10,
43
+ * srcWidth: 100,
44
+ * srcHeight: 100,
45
+ * destLeft: 0,
46
+ * destTop: 0,
47
+ * destWidth: 200,
48
+ * destHeight: 200
49
+ * });
50
+ */
21
51
  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
+ const ctx = canvas.getContext("2d");
53
+ if (!ctx) throw new Error("canvas context is null");
54
+ const img = await imageLoad(url);
55
+ const defaults = {
56
+ srcLeft: 0,
57
+ srcTop: 0,
58
+ srcWidth: img.width,
59
+ srcHeight: img.height,
60
+ destLeft: 0,
61
+ destTop: 0,
62
+ destWidth: canvas.width,
63
+ destHeight: canvas.height
64
+ };
65
+ const { srcLeft, srcTop, srcWidth, srcHeight, destLeft, destTop, destWidth, destHeight } = objectDefaults(options || {}, defaults);
66
+ ctx.drawImage(img, srcLeft, srcTop, srcWidth, srcHeight, destLeft, destTop, destWidth, destHeight);
52
67
  }
53
- export {
54
- canvasDrawImage,
55
- canvasToBase64,
56
- canvasToBlob
57
- };
58
- //# sourceMappingURL=canvas.mjs.map
68
+ //#endregion
69
+ export { canvasDrawImage, canvasToBase64, canvasToBlob };
70
+
71
+ //# sourceMappingURL=canvas.mjs.map
@@ -1 +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;"}
1
+ {"version":3,"file":"canvas.mjs","names":[],"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"],"mappings":";;;;;;;;;;;;AAYA,SAAgB,eAAe,QAA2B,MAAe,SAAkB;CACzF,OAAO,OAAO,UAAU,MAAM,QAAQ;;;;;;;;;;;AAYxC,eAAsB,aAAa,QAA2B,MAAe,SAAkB;CAC7F,OAAO,IAAI,SAAe,SAAS,WAAW;EAC5C,OAAO,QACJ,SAAS;GACR,IAAI,MACF,QAAQ,KAAK;QAEb,uBAAO,IAAI,MAAM,mBAAmB,CAAC;KAGzC,MACA,QACD;GACD;;;;;;;;;;;;;;;;;;;;AA4EJ,eAAsB,gBAAgB,QAA2B,KAAa,SAAkC;CAC9G,MAAM,MAAM,OAAO,WAAW,KAAK;CACnC,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,yBAAyB;CAEnD,MAAM,MAAM,MAAM,UAAU,IAAI;CAChC,MAAM,WAAmC;EACvC,SAAS;EACT,QAAQ;EACR,UAAU,IAAI;EACd,WAAW,IAAI;EACf,UAAU;EACV,SAAS;EACT,WAAW,OAAO;EAClB,YAAY,OAAO;EACpB;CACD,MAAM,EAAE,SAAS,QAAQ,UAAU,WAAW,UAAU,SAAS,WAAW,eAAe,eACzF,WAAW,EAAE,EACb,SACD;CACD,IAAI,UACF,KAEA,SACA,QACA,UACA,WAEA,UACA,SACA,WACA,WACD"}
@@ -1,19 +1,38 @@
1
- "use strict";
2
1
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
2
+ //#region src/clipboard.ts
3
+ /**
4
+ * 将文本复制到剪贴板
5
+ * 该方法使用传统的 execCommand 方法实现文本复制
6
+ *
7
+ * @param text - 要复制到剪贴板的文本内容
8
+ * @returns void
9
+ *
10
+ * @example
11
+ * // 基本用法
12
+ * await copyText('Hello World');
13
+ *
14
+ * @example
15
+ * // 处理复制结果
16
+ * copyText('Hello World')
17
+ * .then(() => console.log('复制成功'))
18
+ * .catch(() => console.error('复制失败'));
19
+ */
3
20
  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
- try {
13
- document.execCommand("copy");
14
- } finally {
15
- document.body.removeChild(textArea);
16
- }
21
+ const textArea = document.createElement("textarea");
22
+ textArea.value = text;
23
+ textArea.style.position = "fixed";
24
+ textArea.style.left = "-9999px";
25
+ textArea.style.top = "-9999px";
26
+ document.body.appendChild(textArea);
27
+ textArea.focus();
28
+ textArea.select();
29
+ try {
30
+ document.execCommand("copy");
31
+ } finally {
32
+ document.body.removeChild(textArea);
33
+ }
17
34
  }
35
+ //#endregion
18
36
  exports.copyText = copyText;
19
- //# sourceMappingURL=clipboard.cjs.map
37
+
38
+ //# sourceMappingURL=clipboard.cjs.map
@@ -1 +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 try {\n document.execCommand('copy');\n } finally {\n document.body.removeChild(textArea);\n }\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;AACZ,MAAA;AACF,aAAS,YAAY,MAAM;AAAA,EAAA,UAC3B;AACS,aAAA,KAAK,YAAY,QAAQ;AAAA,EAAA;AAEtC;;"}
1
+ {"version":3,"file":"clipboard.cjs","names":[],"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 try {\n document.execCommand('copy');\n } finally {\n document.body.removeChild(textArea);\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAiBA,SAAgB,SAAS,MAAc;CACrC,MAAM,WAAW,SAAS,cAAc,WAAW;CACnD,SAAS,QAAQ;CACjB,SAAS,MAAM,WAAW;CAC1B,SAAS,MAAM,OAAO;CACtB,SAAS,MAAM,MAAM;CACrB,SAAS,KAAK,YAAY,SAAS;CACnC,SAAS,OAAO;CAChB,SAAS,QAAQ;CACjB,IAAI;EACF,SAAS,YAAY,OAAO;WACpB;EACR,SAAS,KAAK,YAAY,SAAS"}
@@ -1,19 +1,37 @@
1
+ //#region src/clipboard.ts
2
+ /**
3
+ * 将文本复制到剪贴板
4
+ * 该方法使用传统的 execCommand 方法实现文本复制
5
+ *
6
+ * @param text - 要复制到剪贴板的文本内容
7
+ * @returns void
8
+ *
9
+ * @example
10
+ * // 基本用法
11
+ * await copyText('Hello World');
12
+ *
13
+ * @example
14
+ * // 处理复制结果
15
+ * copyText('Hello World')
16
+ * .then(() => console.log('复制成功'))
17
+ * .catch(() => console.error('复制失败'));
18
+ */
1
19
  function copyText(text) {
2
- const textArea = document.createElement("textarea");
3
- textArea.value = text;
4
- textArea.style.position = "fixed";
5
- textArea.style.left = "-9999px";
6
- textArea.style.top = "-9999px";
7
- document.body.appendChild(textArea);
8
- textArea.focus();
9
- textArea.select();
10
- try {
11
- document.execCommand("copy");
12
- } finally {
13
- document.body.removeChild(textArea);
14
- }
20
+ const textArea = document.createElement("textarea");
21
+ textArea.value = text;
22
+ textArea.style.position = "fixed";
23
+ textArea.style.left = "-9999px";
24
+ textArea.style.top = "-9999px";
25
+ document.body.appendChild(textArea);
26
+ textArea.focus();
27
+ textArea.select();
28
+ try {
29
+ document.execCommand("copy");
30
+ } finally {
31
+ document.body.removeChild(textArea);
32
+ }
15
33
  }
16
- export {
17
- copyText
18
- };
19
- //# sourceMappingURL=clipboard.mjs.map
34
+ //#endregion
35
+ export { copyText };
36
+
37
+ //# sourceMappingURL=clipboard.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"clipboard.mjs","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 try {\n document.execCommand('copy');\n } finally {\n document.body.removeChild(textArea);\n }\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;AACZ,MAAA;AACF,aAAS,YAAY,MAAM;AAAA,EAAA,UAC3B;AACS,aAAA,KAAK,YAAY,QAAQ;AAAA,EAAA;AAEtC;"}
1
+ {"version":3,"file":"clipboard.mjs","names":[],"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 try {\n document.execCommand('copy');\n } finally {\n document.body.removeChild(textArea);\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAiBA,SAAgB,SAAS,MAAc;CACrC,MAAM,WAAW,SAAS,cAAc,WAAW;CACnD,SAAS,QAAQ;CACjB,SAAS,MAAM,WAAW;CAC1B,SAAS,MAAM,OAAO;CACtB,SAAS,MAAM,MAAM;CACrB,SAAS,KAAK,YAAY,SAAS;CACnC,SAAS,OAAO;CAChB,SAAS,QAAQ;CACjB,IAAI;EACF,SAAS,YAAY,OAAO;WACpB;EACR,SAAS,KAAK,YAAY,SAAS"}