@hzab/utils 1.0.13 → 1.0.14

package/changelog.md

@@ -1,3 +1,7 @@
+# @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.14",
   "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();
+    };
+  });
+}
+
+
+
+