Merge pull request #79 from MichealWayne/feat-utils-npm

feat update web utils & regex.json

Author: MichealWayne

CHANGELOG.md

@@ -1,5 +1,6 @@
 ### 更新信息
 
+- 2024.10.13：utils 更新（增加web utils方法）；更新regex.json；
 - 2024.08.25：utils 优化（增加方法参数注释）；
 - 2024.07.21：utils 更新（canvas-utils、env）；
 - 2024.06.16：主页链接调整

docs/datas/README.md datas/README.md

@@ -7,13 +7,13 @@
   },
   {
     "id": "phone",
-    "name": "手机号",
-    "description": "",
+    "name": "(中国大陆)手机号",
+    "description": "11位数字的手机号",
     "regexStr": "^1(3|4|5|6|7|8|9)\\d{9}$"
   },
   {
     "id": "tel",
-    "name": "电话",
+    "name": "(中国大陆)电话",
     "description": "固定电话",
     "regexStr": "(\\(\\d{3,4}\\)|\\d{3,4}-|\\s)?\\d{8}"
   },
@@ -157,13 +157,13 @@
   },
   {
     "id": "english2",
-    "name": "英文",
+    "name": "大写英文",
     "description": "由26个大写英文字母组成的字符串",
     "regexStr": "^[A-Z]+$"
   },
   {
     "id": "english3",
-    "name": "英文",
+    "name": "小写英文",
     "description": "由26个小写英文字母组成的字符串",
     "regexStr": "^[a-z]+$"
   },
@@ -364,5 +364,11 @@
     "name": "中文姓名",
     "description": "仅包含中文字符",
     "regexStr": "^[\u4e00-\u9fa5·]{2,}$"
+  },
+  {
+    "id": "emptyLine",
+    "name": "空白行",
+    "description": "是否包含空白行",
+    "regexStr": "^[\\s\\S]*\\n"
   }
 ]

docs/datas/moo-css.json datas/moo-css.json

@@ -1,4 +1,4 @@
-# webAPI
+# web utils
 
 浏览器相关封装。
 
@@ -10,6 +10,8 @@
   - getPrefix：获取浏览器前缀
   - getStyle：获取元素样式
   - getElementSize：获取元素的尺寸数据、如 width/height
+- [clipboard.ts](./src/clipboard.ts)
+  - copyToClipboard：拷贝文案到剪贴板
 - [dom.ts](./src/dom.ts)
   - isBrowser：是否浏览器环境
   - isBrowserTab：当前页面是否为显示状态
@@ -31,6 +33,12 @@
   - animateScrollTo：平滑滚动（dom 动画）
   - smoothScroll：平滑滚动（依赖 webapi）
   - disableCopy：禁止复制
+- [file.ts](./src/file.ts)
+  - readFile：读取文件内容，返回字符串
+  - readFileAsDataURL：读取文件内容为 Data URL
+  - downloadFile：保存/下载文件
+  - downloadImageFileByUrl：根据 URL 下载图片文件
+  - getFileExtension：根据文件名获取文件扩展名
 - [image.ts](./src/image.ts)
   - isImageLoaded：加载图片（通常用于预加载）
   - getImageSize：获取图片的原始尺寸大小
@@ -63,3 +71,5 @@
   - uniqueSlash：将路径中重复的正斜杆替换成单个斜杆隔开的字符串
 - [keyboard.ts](./src/keyboard.ts)
   - getKeyName：获取 pc 按键值
+- [others.ts](./src/others.ts)
+  - isBase64：判断字符串是否是 base64

docs/datas/regex.json datas/regex.json

@@ -0,0 +1,24 @@
+/**
+ * @author Wayne
+ * @Date 2024-10-13 13:39:56
+ * @LastEditTime 2024-10-13 13:40:36
+ */
+
+/**
+ * @function copyToClipboard
+ * @description 拷贝文案到剪贴板
+ * @param {string} text 文案
+ * @return {Promise<boolean>} 是否拷贝成功
+ */
+export function copyToClipboard(text: string) {
+  return new Promise(resolve => {
+    // 创建一个input框获取需要复制的文本内容
+    const copyInput = document.createElement('input');
+    copyInput.value = text;
+    document.body.appendChild(copyInput);
+    copyInput.select();
+    document.execCommand('copy');
+    copyInput.remove();
+    resolve(true);
+  });
+}

docs/datas/tools.json datas/tools.json

@@ -1,11 +1,11 @@
 /**
  * @author Wayne
  * @Date 2024-07-07 13:42:13
- * @LastEditTime 2024-08-25 10:14:32
+ * @LastEditTime 2024-10-13 13:31:20
  */
 /**
  * @function readFile
- * @description 读取文件内容
+ * @description 读取文件内容，返回字符串
  * @param {File} file 文件对象
  * @returns {Promise<string>} 文件内容
  * @example
@@ -63,6 +63,43 @@ export function downloadFile(content: string, filename: string, contentType: str
   }, 0);
 }
 
+/**
+ * @function downloadImageFileByUrl
+ * @description 根据URL下载图片文件
+ * @param {string} url 图片URL
+ * @param {string} filename 文件名
+ * @param {string} imageType 图片类型
+ * @returns {Promise<boolean>} 是否下载成功
+ * @example
+ * downloadImageFileByUrl('https://example.com/image.jpg', 'image.jpg');
+ * downloadImageFileByUrl('https://example.com/image.png', 'image.png', 'image/png');
+ */
+export function downloadImageFileByUrl(url: string, filename: string, imageType = 'image/jpeg') {
+  return new Promise((resolve, reject) => {
+    const canvas = document.createElement('canvas');
+    const img = document.createElement('img');
+    img.setAttribute('crossOrigin', 'Anonymous');
+    img.src = url;
+    img.onload = _ => {
+      canvas.width = img.width;
+      canvas.height = img.height;
+
+      const context = canvas.getContext('2d')!;
+      context.drawImage(img, 0, 0, img.width, img.height);
+
+      canvas.toBlob(blob => {
+        const link = document.createElement('a');
+        link.href = window.URL.createObjectURL(blob!);
+        link.download = filename;
+        link.click();
+        URL.revokeObjectURL(link.href);
+        resolve(true);
+      }, imageType);
+    };
+    img.onerror = e => reject(e);
+  });
+}
+
 /**
  * @function getFileExtension
  * @description 根据文件名获取文件扩展名

utils/packages/web-utils/README.md

@@ -1,11 +1,12 @@
 /**
  * @author Wayne
  * @Date 2022-07-05 13:34:44
- * @LastEditTime 2024-07-07 13:58:25
+ * @LastEditTime 2024-10-13 13:41:19
  */
 
 export * from './cookies';
 export * from './css';
+export * from './clipboard';
 export * from './dom';
 export * from './file';
 export * from './image';
@@ -16,3 +17,5 @@ export * from './rem';
 export * from './screen';
 export * from './storage';
 export * from './url';
+
+export * from './others';

utils/packages/web-utils/src/clipboard.ts

@@ -0,0 +1,22 @@
+/**
+ * @author Wayne
+ * @Date 2024-10-13 13:34:58
+ * @LastEditTime 2024-10-13 13:35:16
+ */
+
+/**
+ * @function isBase64
+ * @description 判断字符串是否是base64
+ * @param {string} str 字符串
+ * @return {boolean} 是否是base64
+ */
+export const isBase64 = (str: string): boolean => {
+  if (str === '' || str.trim() === '') {
+    return false;
+  }
+  try {
+    return btoa(atob(str)) === str;
+  } catch (err) {
+    return false;
+  }
+};