@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.
- package/README.md +72 -73
- package/dist/base64.cjs +21 -8
- package/dist/base64.cjs.map +1 -1
- package/dist/base64.mjs +22 -11
- package/dist/base64.mjs.map +1 -1
- package/dist/cache.cjs +91 -79
- package/dist/cache.cjs.map +1 -1
- package/dist/cache.d.ts +1 -1
- package/dist/cache.mjs +91 -82
- package/dist/cache.mjs.map +1 -1
- package/dist/canvas.cjs +64 -48
- package/dist/canvas.cjs.map +1 -1
- package/dist/canvas.mjs +64 -51
- package/dist/canvas.mjs.map +1 -1
- package/dist/clipboard.cjs +34 -15
- package/dist/clipboard.cjs.map +1 -1
- package/dist/clipboard.mjs +35 -17
- package/dist/clipboard.mjs.map +1 -1
- package/dist/cookie.cjs +42 -41
- package/dist/cookie.cjs.map +1 -1
- package/dist/cookie.mjs +42 -44
- package/dist/cookie.mjs.map +1 -1
- package/dist/dom.cjs +30 -11
- package/dist/dom.cjs.map +1 -1
- package/dist/dom.mjs +30 -13
- package/dist/dom.mjs.map +1 -1
- package/dist/download.cjs +24 -12
- package/dist/download.cjs.map +1 -1
- package/dist/download.mjs +25 -15
- package/dist/download.mjs.map +1 -1
- package/dist/image.cjs +45 -34
- package/dist/image.cjs.map +1 -1
- package/dist/image.mjs +45 -35
- package/dist/image.mjs.map +1 -1
- package/dist/index.cjs +8 -3
- package/dist/index.cjs.map +1 -1
- package/dist/index.mjs +9 -5
- package/dist/index.mjs.map +1 -1
- package/dist/timer.cjs +40 -37
- package/dist/timer.cjs.map +1 -1
- package/dist/timer.mjs +40 -38
- package/dist/timer.mjs.map +1 -1
- package/dist/video.cjs +25 -14
- package/dist/video.cjs.map +1 -1
- package/dist/video.mjs +26 -16
- package/dist/video.mjs.map +1 -1
- package/package.json +51 -52
package/dist/cache.mjs
CHANGED
|
@@ -1,87 +1,96 @@
|
|
|
1
1
|
import { AbstractCache } from "@cloudcome/utils-core/cache";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
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
|
-
|
|
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
|
-
|
|
91
|
+
return new StorageCache(sessionStorage, namespace);
|
|
81
92
|
}
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
};
|
|
87
|
-
//# sourceMappingURL=cache.mjs.map
|
|
93
|
+
//#endregion
|
|
94
|
+
export { StorageCache, createLocalCache, createSessionCache };
|
|
95
|
+
|
|
96
|
+
//# sourceMappingURL=cache.mjs.map
|
package/dist/cache.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cache.mjs","sources":["../src/cache.ts"],"sourcesContent":["import { AbstractCache, type
|
|
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
|
|
4
|
-
|
|
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
|
-
|
|
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
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
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
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
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
|
-
|
|
73
|
+
|
|
74
|
+
//# sourceMappingURL=canvas.cjs.map
|
package/dist/canvas.cjs.map
CHANGED
|
@@ -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"],"
|
|
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
|
-
|
|
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
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
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
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
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
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
};
|
|
58
|
-
//# sourceMappingURL=canvas.mjs.map
|
|
68
|
+
//#endregion
|
|
69
|
+
export { canvasDrawImage, canvasToBase64, canvasToBlob };
|
|
70
|
+
|
|
71
|
+
//# sourceMappingURL=canvas.mjs.map
|
package/dist/canvas.mjs.map
CHANGED
|
@@ -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"],"
|
|
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"}
|
package/dist/clipboard.cjs
CHANGED
|
@@ -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
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
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
|
-
|
|
37
|
+
|
|
38
|
+
//# sourceMappingURL=clipboard.cjs.map
|
package/dist/clipboard.cjs.map
CHANGED
|
@@ -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"],"
|
|
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"}
|
package/dist/clipboard.mjs
CHANGED
|
@@ -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
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
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
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
//# sourceMappingURL=clipboard.mjs.map
|
|
34
|
+
//#endregion
|
|
35
|
+
export { copyText };
|
|
36
|
+
|
|
37
|
+
//# sourceMappingURL=clipboard.mjs.map
|
package/dist/clipboard.mjs.map
CHANGED
|
@@ -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"],"
|
|
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"}
|