@hzab/utils 1.0.13 → 1.0.15

package/changelog.md

@@ -1,3 +1,11 @@
+# @hzab/utils@1.0.15
+
+feat: 二维码，创建路径，区分前缀
+
+# @hzab/utils@1.0.14
+
+feat: 添加压缩图片函数
+
 # @hzab/utils@1.0.13
 
 feat: upload axios ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/utils",
-  "version": "1.0.13",
+  "version": "1.0.15",
   "description": "utils",
   "main": "src",
   "scripts": {

package/src/img-utils.ts

@@ -1,340 +1,456 @@
-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),
-  };
-}
+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),
+  };
+}
+
+
+
+
+/**
+  * 等比缩放图片尺寸（不裁切、不变形）
+  * @param {HTMLImageElement} img
+  * @param {number} scale 缩放比例 0~1
+  * @returns {Promise<Blob>}
+  */
+export function drawScaleImage(img, scale) {
+  return new Promise((resolve) => {
+    const w = Math.round(img.width * scale);
+    const h = Math.round(img.height * scale);
+
+    const canvas = document.createElement("canvas");
+    canvas.width = w;
+    canvas.height = h;
+    const ctx = canvas.getContext("2d");
+
+    // 整图等比绘制，无裁切
+    ctx.drawImage(img, 0, 0, w, h);
+
+    canvas.toBlob((blob) => resolve(blob), "image/png");
+  });
+}
+
+/**
+ * JPG/WebP 仅动态降画质（不改尺寸）
+ * @param {Blob} blob
+ * @param {HTMLImageElement} img
+ * @returns {Promise<Blob>}
+ */
+export function compressByQuality(blob, img, maxSize) {
+  return new Promise((resolve) => {
+    const canvas = document.createElement("canvas");
+    canvas.width = img.width;
+    canvas.height = img.height;
+    const ctx = canvas.getContext("2d");
+    ctx.drawImage(img, 0, 0);
+
+    let quality = 0.98;
+    const minQ = 0.5;
+
+    function loop() {
+      canvas.toBlob(
+        (newBlob) => {
+          if (newBlob.size <= maxSize || quality <= minQ) {
+            resolve(newBlob);
+            return;
+          }
+          quality -= 0.02;
+          loop();
+        },
+        blob.type,
+        quality,
+      );
+    }
+    loop();
+  });
+}
+
+/**
+ * 智能压缩入口
+ * 1. 小于10M直接返回原图
+ * 2. JPG/WebP：只降画质，不改尺寸
+ * 3. PNG：不转格式、只等比缩分辨率，不裁切
+ * @param {Blob} blob
+ * @returns {Promise<Blob>}
+ */
+export function smartImageCompress(blob, maxSize) {
+  if (blob.size <= maxSize) {
+    return Promise.resolve(blob);
+  }
+
+  return new Promise((resolve) => {
+    const isPng = blob.type === "image/png";
+    const img = new Image();
+
+    img.src = URL.createObjectURL(blob);
+    img.onload = async () => {
+      URL.revokeObjectURL(img.src);
+
+      // 非PNG：只降画质
+      if (!isPng) {
+        const resBlob = await compressByQuality(blob, img, maxSize);
+        return resolve(resBlob);
+      }
+
+      // PNG：只等比缩分辨率，不转格式、不裁切
+      let scale = 0.95; // 每次缩小5%
+      const minScale = 0.5; // 最低缩到原图50%，不再缩
+
+      let currentBlob = blob;
+
+      const loopScale = async () => {
+        currentBlob = await drawScaleImage(img, scale);
+
+        if (currentBlob.size <= maxSize || scale <= minScale) {
+          resolve(currentBlob);
+          return;
+        }
+
+        scale -= 0.05;
+
+        loopScale();
+      };
+
+      loopScale();
+    };
+  });
+}
+
+
+
+

package/src/scan-qr.ts

@@ -64,7 +64,7 @@ const setCodeInfo = async (
   try {
     const id = nanoidUrl();
     const file = objToBlob(value) as File;
-    const ossUploader = new OssUploads();
+    const ossUploader = new OssUploads({signatureParams: {withoutPrefix: true}});
     const uploadResult = await ossUploader.upload(file, {
       fileName: id,
       params: {

package/src/upload/OssUploadUtil.ts

@@ -1,214 +1,218 @@
-import dayjs from "dayjs";
-import { Axios, AxiosResponse, AxiosRequestConfig } from "axios";
-
-import { axios } from "@hzab/data-model";
-import { formatDirStr } from "./uploadUtils";
-import { getGlobalServeConfig } from "../globalConfig";
-const isPublicMap = {
-  0: "&",
-  1: "?",
-};
-/**
- * getSignature 配置
- */
-export interface IGetSignatureOpt {
-  /** 获取配置的接口地址 */
-  serverUrl?: string;
-  /** axios 实例 */
-  axios?: Axios;
-  /** axios 配置参数 */
-  axiosConf?: AxiosRequestConfig;
-  /** 获取配置的接口自定义入参 */
-  params?: {
-    /** 文件路径 */
-    dir?: string;
-    /** 是否是公开库 */
-    isPublic?: number;
-  };
-}
-
-/**
- * OssUpload props 参数
- */
-export interface IOssUploadProps {
-  /** axios 实例 */
-  axios?: Axios;
-  /** axios 配置参数 */
-  axiosConf?: AxiosRequestConfig;
-  /** 获取配置的接口地址 */
-  serverUrl?: string;
-  /** 获取配置的接口自定义入参 */
-  signatureParams?: {
-    /** 文件路径 */
-    dir?: string;
-    /** 是否是公开库 */
-    isPublic?: number;
-  };
-}
-
-export interface IUploadOpt {
-  fileName?: string;
-  /** axios 实例 */
-  axios?: Axios;
-  /** axios 配置参数 */
-  axiosConf?: AxiosRequestConfig;
-  /** 获取配置的接口地址 */
-  serverUrl?: string;
-  /** 获取配置的接口自定义入参 */
-  params?: {
-    /** 文件路径 */
-    dir?: string;
-    /** 是否是公开库 */
-    isPublic?: number;
-  };
-  /**
-   * 获取配置接口请求入参
-   */
-  signatureParams?: {
-    /** 公开还是私有 */
-    isPublic?: number;
-  };
-  /** 文件上传的接口自定义入参 */
-  ossParams?: {};
-  /** 是否使用 hash 文件名 */
-  useHashName?: boolean;
-  /**缩略图参数 */
-  thumbnailParams?: string;
-}
-
-export interface ResponseData extends AxiosResponse {
-  fileUrl: string;
-  thumbnailUrl?: string;
-}
-
-export function getSignature(opt: IGetSignatureOpt = {}) {
-  const { serverUrl = getGlobalServeConfig()?.serverUrl || "/api/v1/user/oss/getWebOssConfig" } = opt;
-  // 减 10 秒，避免发起请求时 刚好过期的情况
-  if (
-    window._$ossSignatureRes &&
-    serverUrl === window._$ossSignatureRes.serverUrl &&
-    dayjs().valueOf() - window._$ossSignatureRes.__saveTime < window._$ossSignatureRes.expireTimeMilles - 10000
-  ) {
-    return Promise.resolve(window._$ossSignatureRes);
-  }
-  const { axios: _ax = axios, params = {}, axiosConf } = opt;
-  // 处理 dir 格式，必须为非 / 开头， /  结尾。如： test/
-  params.dir = formatDirStr(params.dir);
-
-  return _ax
-    .get(serverUrl, {
-      ...axiosConf,
-      params: {
-        isPublic: 1,
-        ...params,
-      },
-    })
-    .then((res) => {
-      window._$ossSignatureRes = res?.data?.data ?? res?.data ?? res;
-      if (window._$ossSignatureRes) {
-        window._$ossSignatureRes.__saveTime = dayjs().valueOf();
-        window._$ossSignatureRes.serverUrl = serverUrl;
-      }
-      return window._$ossSignatureRes;
-    });
-}
-
-/**
- * oss 上传工具类
- */
-class OssUploadUtil {
-  /** axios 实例 */
-  axios: Axios;
-  /** axios 配置参数 */
-  axiosConf: AxiosRequestConfig;
-  /** 获取配置的接口地址 */
-  serverUrl: string;
-  /** 获取配置的接口自定义入参 */
-  signatureParams?: {
-    /** 文件路径 */
-    dir?: string;
-    /** 是否是公开库 */
-    isPublic?: number;
-  };
-
-  constructor(props: IOssUploadProps = {}) {
-    this.axios = props.axios || axios;
-    this.axiosConf = props.axiosConf || {};
-    this.serverUrl = props.serverUrl || getGlobalServeConfig()?.serverUrl || "/api/v1/user/oss/getWebOssConfig";
-    this.signatureParams = props.signatureParams || {};
-  }
-
-  getSignature(serverUrl = this.serverUrl, opt) {
-    return this._getSignature(serverUrl, opt);
-  }
-
-  upload(file, opt: IUploadOpt = {}): Promise<{ fileUrl: string }> {
-    return this._upload(file, { ...opt });
-  }
-
-  _getSignature(serverUrl = this.serverUrl, opt) {
-    return getSignature({
-      ...opt,
-      serverUrl,
-      axios: opt?.axios || this.axios,
-      axiosConf: { ...this.axiosConf, ...opt?.axiosConf },
-    });
-  }
-
-  _upload(file, opt: IUploadOpt = {}): Promise<{ fileUrl: string }> {
-    return new Promise(async (resolve, reject) => {
-      const ossParams = await this._getSignature(opt.serverUrl || this.serverUrl, {
-        ...opt,
-        params: { ...this.signatureParams, ...opt.params },
-      });
-
-      const { ossParams: propOssParams, fileName } = opt || {};
-      const formData = new FormData();
-      // key 表示上传到 Bucket 内的 Object 的完整路径，例如 exampledir/exampleobject.txtObject，完整路径中不能包含 Bucket 名称。
-      // filename 表示待上传的本地文件名称。
-      const filename = fileName || file.name;
-      const key = `${ossParams?.dir}${filename}`;
-      formData.set("key", key);
-      formData.set("OSSAccessKeyId", ossParams.accessid);
-      formData.set("policy", ossParams.policy);
-      formData.set("Signature", ossParams.signature);
-      if (ossParams.callback) {
-        formData.set("callback", ossParams.callback);
-      }
-      // @ts-ignore
-      formData.set("success_action_status", 200);
-      formData.set("file", file);
-
-      if (propOssParams) {
-        for (const key in propOssParams) {
-          if (Object.hasOwnProperty.call(propOssParams, key)) {
-            formData.set(key, propOssParams[key]);
-          }
-        }
-      }
-
-      const _axios = opt?.axios || this.axios;
-
-      return _axios
-        .post(ossParams.host, formData, { ...this.axiosConf, ...opt?.axiosConf })
-        .then((res: ResponseData) => {
-          if (getGlobalServeConfig()?.showThumbnail) {
-            res.data.data.thumbnailUrl = `${res?.data?.data?.fileUrl}${
-              opt?.thumbnailParams ? isPublicMap[opt?.signatureParams?.isPublic] + opt?.thumbnailParams : ""
-            }`;
-          }
-          resolve(res);
-          return res;
-        })
-        .catch((err) => {
-          console.error("oss upload err", err);
-          reject(err);
-          return Promise.reject(err);
-        });
-    });
-  }
-}
-
-export { axios };
-
-export default OssUploadUtil;
+import dayjs from "dayjs";
+import { Axios, AxiosResponse, AxiosRequestConfig } from "axios";
+
+import { axios } from "@hzab/data-model";
+import { formatDirStr } from "./uploadUtils";
+import { getGlobalServeConfig } from "../globalConfig";
+const isPublicMap = {
+  0: "&",
+  1: "?",
+};
+/**
+ * getSignature 配置
+ */
+export interface IGetSignatureOpt {
+  /** 获取配置的接口地址 */
+  serverUrl?: string;
+  /** axios 实例 */
+  axios?: Axios;
+  /** axios 配置参数 */
+  axiosConf?: AxiosRequestConfig;
+  /** 获取配置的接口自定义入参 */
+  params?: {
+    /** 文件路径 */
+    dir?: string;
+    /** 是否是公开库 */
+    isPublic?: number;
+  };
+}
+
+/**
+ * OssUpload props 参数
+ */
+export interface IOssUploadProps {
+  /** axios 实例 */
+  axios?: Axios;
+  /** axios 配置参数 */
+  axiosConf?: AxiosRequestConfig;
+  /** 获取配置的接口地址 */
+  serverUrl?: string;
+  /** 获取配置的接口自定义入参 */
+  signatureParams?: {
+    /** 文件路径 */
+    dir?: string;
+    /** 是否是公开库 */
+    isPublic?: number;
+    /** 是否无前缀 */
+    withoutPrefix?: boolean;
+  };
+}
+
+export interface IUploadOpt {
+  fileName?: string;
+  /** axios 实例 */
+  axios?: Axios;
+  /** axios 配置参数 */
+  axiosConf?: AxiosRequestConfig;
+  /** 获取配置的接口地址 */
+  serverUrl?: string;
+  /** 获取配置的接口自定义入参 */
+  params?: {
+    /** 文件路径 */
+    dir?: string;
+    /** 是否是公开库 */
+    isPublic?: number;
+  };
+  /**
+   * 获取配置接口请求入参
+   */
+  signatureParams?: {
+    /** 公开还是私有 */
+    isPublic?: number;
+  };
+  /** 文件上传的接口自定义入参 */
+  ossParams?: {};
+  /** 是否使用 hash 文件名 */
+  useHashName?: boolean;
+  /**缩略图参数 */
+  thumbnailParams?: string;
+}
+
+export interface ResponseData extends AxiosResponse {
+  fileUrl: string;
+  thumbnailUrl?: string;
+}
+
+export function getSignature(opt: IGetSignatureOpt = {}) {
+  const { serverUrl = getGlobalServeConfig()?.serverUrl || "/api/v1/user/oss/getWebOssConfig" } = opt;
+  // 减 10 秒，避免发起请求时 刚好过期的情况
+  if (
+    window._$ossSignatureRes &&
+    serverUrl === window._$ossSignatureRes.serverUrl &&
+    dayjs().valueOf() - window._$ossSignatureRes.__saveTime < window._$ossSignatureRes.expireTimeMilles - 10000
+  ) {
+    return Promise.resolve(window._$ossSignatureRes);
+  }
+  const { axios: _ax = axios, params = {}, axiosConf } = opt;
+  // 处理 dir 格式，必须为非 / 开头， /  结尾。如： test/
+  params.dir = formatDirStr(params.dir);
+
+  return _ax
+    .get(serverUrl, {
+      ...axiosConf,
+      params: {
+        isPublic: 1,
+        ...params,
+      },
+    })
+    .then((res) => {
+      window._$ossSignatureRes = res?.data?.data ?? res?.data ?? res;
+      if (window._$ossSignatureRes) {
+        window._$ossSignatureRes.__saveTime = dayjs().valueOf();
+        window._$ossSignatureRes.serverUrl = serverUrl;
+      }
+      return window._$ossSignatureRes;
+    });
+}
+
+/**
+ * oss 上传工具类
+ */
+class OssUploadUtil {
+  /** axios 实例 */
+  axios: Axios;
+  /** axios 配置参数 */
+  axiosConf: AxiosRequestConfig;
+  /** 获取配置的接口地址 */
+  serverUrl: string;
+  /** 获取配置的接口自定义入参 */
+  signatureParams?: {
+    /** 文件路径 */
+    dir?: string;
+    /** 是否是公开库 */
+    isPublic?: number;
+    /** 是否无前缀 */
+    withoutPrefix?: boolean;
+  };
+
+  constructor(props: IOssUploadProps = {}) {
+    this.axios = props.axios || axios;
+    this.axiosConf = props.axiosConf || {};
+    this.serverUrl = props.serverUrl || getGlobalServeConfig()?.serverUrl || "/api/v1/user/oss/getWebOssConfig";
+    this.signatureParams = props.signatureParams || {};
+  }
+
+  getSignature(serverUrl = this.serverUrl, opt) {
+    return this._getSignature(serverUrl, opt);
+  }
+
+  upload(file, opt: IUploadOpt = {}): Promise<{ fileUrl: string }> {
+    return this._upload(file, { ...opt });
+  }
+
+  _getSignature(serverUrl = this.serverUrl, opt) {
+    return getSignature({
+      ...opt,
+      serverUrl,
+      axios: opt?.axios || this.axios,
+      axiosConf: { ...this.axiosConf, ...opt?.axiosConf },
+    });
+  }
+
+  _upload(file, opt: IUploadOpt = {}): Promise<{ fileUrl: string }> {
+    return new Promise(async (resolve, reject) => {
+      const ossParams = await this._getSignature(opt.serverUrl || this.serverUrl, {
+        ...opt,
+        params: { ...this.signatureParams, ...opt.params },
+      });
+
+      const { ossParams: propOssParams, fileName } = opt || {};
+      const formData = new FormData();
+      // key 表示上传到 Bucket 内的 Object 的完整路径，例如 exampledir/exampleobject.txtObject，完整路径中不能包含 Bucket 名称。
+      // filename 表示待上传的本地文件名称。
+      const filename = fileName || file.name;
+      const key = `${ossParams?.dir}${filename}`;
+      formData.set("key", key);
+      formData.set("OSSAccessKeyId", ossParams.accessid);
+      formData.set("policy", ossParams.policy);
+      formData.set("Signature", ossParams.signature);
+      if (ossParams.callback) {
+        formData.set("callback", ossParams.callback);
+      }
+      // @ts-ignore
+      formData.set("success_action_status", 200);
+      formData.set("file", file);
+
+      if (propOssParams) {
+        for (const key in propOssParams) {
+          if (Object.hasOwnProperty.call(propOssParams, key)) {
+            formData.set(key, propOssParams[key]);
+          }
+        }
+      }
+
+      const _axios = opt?.axios || this.axios;
+
+      return _axios
+        .post(ossParams.host, formData, { ...this.axiosConf, ...opt?.axiosConf })
+        .then((res: ResponseData) => {
+          if (getGlobalServeConfig()?.showThumbnail) {
+            res.data.data.thumbnailUrl = `${res?.data?.data?.fileUrl}${
+              opt?.thumbnailParams ? isPublicMap[opt?.signatureParams?.isPublic] + opt?.thumbnailParams : ""
+            }`;
+          }
+          resolve(res);
+          return res;
+        })
+        .catch((err) => {
+          console.error("oss upload err", err);
+          reject(err);
+          return Promise.reject(err);
+        });
+    });
+  }
+}
+
+export { axios };
+
+export default OssUploadUtil;