@hzab/utils 0.0.1

package/src/file/fileType.ts

@@ -0,0 +1,152 @@
+export const TYPE_VIDEO = "video";
+export const TYPE_IMG = "image";
+export const TYPE_AUDIO = "audio";
+
+/**
+ * 检查 url 是否带有指定后缀
+ * @param {string} url url 地址
+ * @param {Array} types 后缀数组
+ * @returns
+ */
+export function checkUrlSuffix(url, types = [], caseSensitive = false) {
+  if (!url) {
+    return false;
+  }
+  let _url = url?.replace(/\?.+/, "");
+  const reg = new RegExp(`\.(${types.join("|")})$`, caseSensitive ? undefined : "i");
+  if (reg.test(_url)) {
+    return true;
+  }
+}
+
+/**
+ * 获取文件类型（文件自身类型，如：video/mp4、image/jpeg）
+ * @param file
+ * @returns
+ */
+export function getFileType(file) {
+  if (typeof file === "object" && file?.type) {
+    return file?.type;
+  }
+  if (typeof file === "string") {
+    let type = null;
+    if (checkVideoUrl(file)) {
+      type = "video/mp4";
+    } else if (checkImageUrl(file)) {
+      type = "image/jpeg";
+    } else if (checkAudioUrl(file)) {
+      type = "audio/3gpp";
+    } else if (checkUrlSuffix(file, ["pdf"])) {
+      type = "application/pdf";
+    } else if (checkUrlSuffix(file, ["pdf"])) {
+      type = "application/pdf";
+    } else if (checkUrlSuffix(file, ["xlsx", "xls", "csv", "xlsm", "xlsb"])) {
+      type = "application/vnd.ms-excel";
+    } else if (checkUrlSuffix(file, ["doc", "docx"])) {
+      type = "application/msword";
+    } else if (checkUrlSuffix(file, ["ppt", "pptx"])) {
+      type = "application/vnd.ms-powerpoint";
+    }
+    return type;
+  }
+}
+
+/**
+ * 判断 url 是否带有指定图片后缀
+ * @param {string} url
+ * @returns
+ */
+export function checkImageUrl(url) {
+  // base64
+  if (/^data:image\/\w+;base64/i.test(url)) {
+    return true;
+  }
+  const imgTypes = [
+    "apng",
+    "avif",
+    "bmp",
+    "gif",
+    "ico",
+    "cur",
+    "jpg",
+    "jpeg",
+    "jfif",
+    "pjpeg",
+    "pjp",
+    "png",
+    "svg",
+    "tif",
+    "tiff",
+    "webp",
+  ];
+  return checkUrlSuffix(url, imgTypes);
+}
+
+/**
+ * 判断是否是合法的媒体类型
+ * @param {String} input
+ * @returns
+ */
+export function isValidMediaType(input) {
+  const validPrefixes = ["image/", "video/", "audio/"];
+  return validPrefixes.some((prefix) => input?.startsWith(prefix));
+}
+
+/**
+ * 判断 url 是否带有指定视频后缀
+ * @param {string} url
+ * @returns
+ */
+export function checkVideoUrl(url) {
+  const imgTypes = ["3gp", "mpg", "mpeg", "mp4", "m4v", "m4p", "ogv", "ogg", "mov", "webm"];
+  return checkUrlSuffix(url, imgTypes);
+}
+
+/**
+ * 判断 url 是否带有指定音频后缀
+ * @param {string} url
+ * @returns
+ */
+export function checkAudioUrl(url) {
+  const imgTypes = ["3gp", "adts", "mpeg", "mp3", "mp4", "ogg", "mov", "webm", "rtp", "amr", "wav"];
+  return checkUrlSuffix(url, imgTypes);
+}
+
+/**
+ * 获取文件类型（项目内部枚举，如：图片-image、视频-video）
+ * @param file
+ * @returns
+ */
+export function getFileTypeStr(file) {
+  const { type, url = file?.ossUrl } = file || {};
+  let fileType = "";
+  // 判断文件类型，获取对应展示的数据
+  if (url) {
+    // 图片
+    if (url.startsWith("data:image/") || checkImageUrl(url)) {
+      fileType = TYPE_IMG;
+    } else if (checkVideoUrl(url)) {
+      // 视频
+      fileType = TYPE_VIDEO;
+    } else if (checkAudioUrl(url)) {
+      // 音频
+      fileType = TYPE_AUDIO;
+    }
+  } else if (type) {
+    // 图片
+    if (type?.startsWith("image/")) {
+      fileType = TYPE_IMG;
+    }
+
+    // 视频
+    if (type?.startsWith("video/")) {
+      fileType = TYPE_VIDEO;
+    }
+
+    // 音频
+    if (type?.startsWith("audio/")) {
+      fileType = TYPE_AUDIO;
+    }
+  }
+  return fileType || type;
+}

package/src/formily/schema-merge.ts

@@ -0,0 +1,68 @@
+import _ from "lodash";
+
+export function mergeSchema(BaseSchema, InsideSchema, title = "") {
+  const _schema = {
+    form: BaseSchema.form,
+    schema: _.cloneDeep(BaseSchema.schema),
+  };
+  let idx = Object.keys(_schema.schema.properties).length;
+
+  if (title) {
+    _schema.schema.properties.insideTitle = {
+      type: "string",
+      "x-component": "Text",
+      "x-component-props": {
+        content: title || "内部情况",
+      },
+      "x-designable-id": "insideTitle" + idx,
+      "x-index": idx,
+    };
+  }
+
+  Object.keys(InsideSchema.schema.properties).forEach((key) => {
+    const obj = InsideSchema.schema.properties[key];
+    idx += 1;
+    obj["x-index"] = idx;
+    _schema.schema.properties[key] = obj;
+  });
+  return _schema;
+}
+
+export function mergeSchemas(schemas) {
+  if (!(Array.isArray(schemas) && schemas.length > 0)) {
+    console.error("请传入 schema");
+    return;
+  }
+  const _schemaList = _.cloneDeep(schemas);
+  const _schema = {
+    form: _schemaList[0].json.form,
+    schema: {
+      type: "object",
+      properties: {},
+      "x-designable-id": _.uniqueId("schema-merge-"),
+    },
+  };
+
+  let idx = 0;
+  _schemaList.forEach((schema, i) => {
+    const titleName = `insideTitle-${i}`;
+    _schema.schema.properties[titleName] = {
+      type: "string",
+      "x-component": "Text",
+      "x-component-props": {
+        content: schema.title,
+      },
+      "x-designable-id": titleName,
+      "x-index": idx,
+    };
+    idx += 1;
+    Object.keys(schema.json.schema.properties).forEach((key) => {
+      const obj = schema.json.schema.properties[key];
+      obj["x-index"] = idx;
+      _schema.schema.properties[key] = obj;
+      idx += 1;
+    });
+  });
+
+  return _schema;
+}

package/src/img-utils.ts

@@ -0,0 +1,340 @@
+export class IMAGE_TYPES {
+  static JPEG = "image/jpeg";
+  static PNG = "image/png";
+}
+
+/**
+ * 检测空图片
+ * @param img
+ * @returns
+ */
+export function checkEmptyImg(img: HTMLImageElement) {
+  // 创建一个 Canvas 元素
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  if (!ctx) {
+    return;
+  }
+
+  // 设置 Canvas 的宽度和高度与图片一致
+  canvas.width = img.width;
+  canvas.height = img.height;
+  // 将图片绘制到Canvas上
+  ctx.drawImage(img, 0, 0);
+  // 获取Canvas中的像素数据
+  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+  const data = imageData.data;
+
+  // 判断从左上角到右下角的像素是否都是黑色
+  let topLeftToBottomRight = true;
+
+  const iUp = 0;
+  const redUp = data[iUp];
+  const greenUp = data[iUp + 1];
+  const blueUp = data[iUp + 2];
+  const alphaUp = data[iUp + 3];
+  for (let i = 0; i < data.length; i += 4) {
+    const red = data[i];
+    const green = data[i + 1];
+    const blue = data[i + 2];
+    const alpha = data[i + 3];
+
+    if (red !== redUp || green !== greenUp || blue !== blueUp || alpha !== alphaUp) {
+      topLeftToBottomRight = false;
+      break;
+    }
+  }
+
+  // 判断从右上角到左下角的像素是否都是黑色
+  let topRightToBottomLeft = true;
+  const jDown = data.length - 4;
+  const redDown = data[jDown];
+  const greenDown = data[jDown + 1];
+  const blueDown = data[jDown + 2];
+  const alphaDown = data[jDown + 3];
+
+  for (let j = jDown; j >= 0; j -= 4) {
+    const red = data[j];
+    const green = data[j + 1];
+    const blue = data[j + 2];
+    const alpha = data[j + 3];
+
+    if (red !== redDown || green !== greenDown || blue !== blueDown || alpha !== alphaDown) {
+      topRightToBottomLeft = false;
+      break;
+    }
+  }
+
+  // 打印结果
+  if (topLeftToBottomRight && topRightToBottomLeft) {
+    return false;
+  } else {
+    return true;
+  }
+}
+
+/**
+ * 获取dom元素宽高
+ * @param d dom元素
+ * @returns {{width: number, height: number}}
+ */
+export function getDomWH(d: HTMLElement | HTMLImageElement | HTMLCanvasElement) {
+  if (d instanceof Image || d instanceof HTMLCanvasElement) {
+    return {
+      width: d.width || d.offsetWidth,
+      height: d.width || d.offsetHeight,
+    };
+  }
+  return {
+    width: d.offsetWidth,
+    height: d.offsetHeight,
+  };
+}
+
+/**
+ * 设置dom元素宽高
+ * @param d dom元素
+ * @param w 宽
+ * @param h 高
+ */
+export function setDomWH(dom: HTMLElement, w: number, h: number) {
+  dom.setAttribute("width", `${w}`);
+  dom.setAttribute("height", `${h}`);
+}
+
+/**
+ * 获取当前 canvas 图片 Blob 对象
+ * @param canvas
+ * @returns {Promise<Blob>}
+ */
+export function getCanvasPic(canvas: HTMLCanvasElement): Blob {
+  var gl = canvas.getContext("2d", { preserveDrawingBuffer: true });
+
+  return dataURItoBlob(canvas.toDataURL(IMAGE_TYPES.PNG, 1));
+}
+
+/**
+ * base64 字符串转 blob
+ * @param base64
+ * @returns
+ */
+export function dataURItoBlob(base64: string): Blob {
+  let arr = base64.split(",");
+  let mime = arr[0]?.match(/:(.*?);/)?.[1];
+  let bstr = atob(arr[1]);
+  let n = bstr.length;
+  let u8arr = new Uint8Array(n);
+  while (n--) {
+    u8arr[n] = bstr.charCodeAt(n);
+  }
+  return new Blob([u8arr], { type: mime });
+}
+
+/**
+ * 获取图片元素
+ * @param imgSrc
+ * @returns
+ */
+export function getImgEle(imgSrc: string): Promise<HTMLImageElement> {
+  return new Promise((resolve) => {
+    const img = new Image();
+    img.onload = function () {
+      resolve(img);
+    };
+    img.src = imgSrc;
+  });
+}
+
+/**
+ * 获取图片 Base64 字符串
+ * @param imgSrc
+ * @returns
+ */
+export function getImgBase64(imgSrc: string): Promise<string> {
+  return getImgEle(imgSrc).then((img) => {
+    const canvas = document.createElement("canvas");
+    let { width, height } = getDomWH(img);
+    setDomWH(canvas, width, height);
+    const ctx = canvas.getContext("2d");
+    ctx && ctx.drawImage(img, 0, 0, width, height, 0, 0, width, height);
+    return canvas.toDataURL(IMAGE_TYPES.PNG, 1);
+  });
+}
+
+/**
+ * 通过图片地址获取对应 canvas
+ * @param imgSrc
+ * @returns
+ */
+export function getCanvas(imgSrc: string): Promise<HTMLCanvasElement> {
+  return getImgEle(imgSrc).then((img) => {
+    const canvas = document.createElement("canvas");
+    let { width, height } = getDomWH(img);
+    setDomWH(canvas, width, height);
+    const ctx = canvas.getContext("2d");
+    ctx && ctx.drawImage(img, 0, 0, width, height, 0, 0, width, height);
+    return canvas;
+  });
+}
+
+/**
+ * 通过图片地址获取对应 canvas
+ * @param img
+ * @returns
+ */
+export function getCanvasByImg(img: HTMLImageElement): HTMLCanvasElement {
+  const canvas = document.createElement("canvas");
+  let { width, height } = getDomWH(img);
+  setDomWH(canvas, width, height);
+  const ctx = canvas.getContext("2d");
+  ctx && ctx.drawImage(img, 0, 0, width, height, 0, 0, width, height);
+  return canvas;
+}
+
+/**
+ * 截取图片
+ * @param img
+ * @param opt
+ * @param opt.startX
+ * @param opt.startY
+ * @param opt.width
+ * @param opt.height
+ * @returns Promise<string>
+ */
+export function cropImage(
+  img: HTMLImageElement | HTMLCanvasElement,
+  opt: { startX: number; startY: number; width: number; height: number },
+) {
+  return cropImageToCanvas(img, opt).toDataURL(IMAGE_TYPES.PNG, 1);
+}
+
+/**
+ * 截取图片
+ * @param img
+ * @param opt
+ * @param opt.startX
+ * @param opt.startY
+ * @param opt.width
+ * @param opt.height
+ * @returns Promise<HTMLCanvasElement>
+ */
+export function cropImageToCanvas(
+  img: HTMLImageElement | HTMLCanvasElement,
+  opt: { startX: number; startY: number; width: number; height: number },
+) {
+  const { startX, startY, width, height } = opt;
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  // 设置 canvas 的宽度和高度为裁剪后的尺寸
+  canvas.width = width; // 裁剪后的宽度
+  canvas.height = height; // 裁剪后的高度
+  // 在 canvas 上绘制裁剪后的图像
+  ctx?.drawImage(img, startX, startY, width, height, 0, 0, width, height);
+  // 可以将裁剪后的图像数据获取出来
+  return canvas;
+}
+
+/**
+ * 绘制图片
+ * @param img
+ * @param opt
+ * @param opt.startX
+ * @param opt.startY
+ * @param opt.width
+ * @param opt.height
+ * @returns Promise<string>
+ */
+export function imgToCanvas(img: HTMLImageElement) {
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  canvas.width = img.width;
+  canvas.height = img.height;
+  ctx?.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height);
+  return canvas;
+}
+
+/**
+ * 缩放图片
+ * @param img
+ * @param opt
+ * @returns base64
+ */
+export function scaleImage(img: HTMLImageElement | HTMLCanvasElement, opt = { scaleFactor: 1 }) {
+  return scaleImageToCanvas(img, opt).toDataURL(IMAGE_TYPES.PNG, 1);
+}
+
+/**
+ * 缩放图片，返回 canvas
+ * @param img
+ * @param opt
+ * @returns canvas
+ */
+export function scaleImageToCanvas(img: HTMLImageElement | HTMLCanvasElement, opt = { scaleFactor: 1 }) {
+  const { scaleFactor = 1 } = opt;
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  canvas.width = img.width * scaleFactor;
+  canvas.height = img.height * scaleFactor;
+  ctx?.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height);
+  return canvas;
+}
+
+/**
+ * 图片转为 base64
+ * @param img
+ * @returns
+ */
+export async function imgToBase64(img: string | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement) {
+  if (!img || img instanceof Blob) {
+    return img;
+  }
+  let _img = img;
+  if (img instanceof Image) {
+    _img = img.src;
+  } else if (img instanceof HTMLVideoElement) {
+    // 从视频中获取图片
+    const canvas = document.createElement("canvas");
+    let { width, height } = getDomWH(img);
+    setDomWH(canvas, width, height);
+    const ctx = canvas.getContext("2d");
+    ctx && ctx.drawImage(img, 0, 0, width, height, 0, 0, width, height);
+    _img = canvas.toDataURL(IMAGE_TYPES.PNG, 1);
+  } else if (img instanceof HTMLCanvasElement) {
+    _img = img.toDataURL(IMAGE_TYPES.PNG, 1);
+  } else if (typeof _img === "string" && !_img.startsWith("data:image/")) {
+    // 加载图片，并获取图片 base64
+    _img = await getImgBase64(_img);
+  }
+  return _img;
+}
+
+/**
+ * 图片转为 Blob
+ * @param img
+ * @returns
+ */
+export async function imgToBlob(img: string | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement): Promise<Blob> {
+  if (!img) {
+    throw new Error("请传入图片数据");
+  }
+  if (img instanceof Blob) {
+    return Promise.resolve(img);
+  }
+  const _img = await imgToBase64(img);
+  if (typeof _img !== "string") {
+    throw new Error("传入的图片数据不正确");
+  }
+  return dataURItoBlob(_img);
+}
+
+/**
+ * 获取图片的 base64、blob 格式
+ * @param img
+ */
+export async function getAllTypeImg(img: string | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement) {
+  const base64 = await imgToBase64(img);
+  return {
+    base64,
+    blob: typeof base64 === "string" && dataURItoBlob(base64),
+  };
+}

package/src/locationUtils.ts

@@ -0,0 +1,26 @@
+export const DEFAULT_POSITION = {
+  lon: 120.168893,
+  lat: 30.225404,
+  addr: "浙江省杭州市上城区南星街道杭州西湖风景名胜区",
+};
+
+/**
+ * 获取当前定位
+ * @param config
+ * @returns
+ */
+export function getCurrentPosition(config?: any): Promise<any> {
+  return new Promise((resolve, reject) => {
+    navigator?.geolocation?.getCurrentPosition(
+      (position) => {
+        resolve(position);
+      },
+      reject,
+      {
+        enableHighAccuracy: true,
+        timeout: 5000,
+        ...config,
+      },
+    );
+  });
+}

package/src/nanoid.ts

@@ -0,0 +1,10 @@
+import { customAlphabet } from "nanoid";
+
+/**
+ * 指定 nanoid 字符集合
+ * 数字和大小写字母
+ */
+export const numALetters = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
+
+/** nanoid 数字和大小写字母 */
+export const nanoidNumALetters = customAlphabet(numALetters, 8);