szld-libs 0.2.24 → 0.2.26

package/lib/utils/image-compression/image.d.ts

@@ -0,0 +1,8 @@
+export declare const fileToDataURL: (file: Blob | File) => Promise<any>;
+export declare const dataURLToImage: (dataURL: string) => Promise<HTMLImageElement>;
+export declare const canvastoFile: (canvas: HTMLCanvasElement, type: string, quality: number) => Promise<Blob | null>;
+export declare const scaleWidthHeight: (img: HTMLImageElement) => {
+    width: number;
+    height: number;
+};
+export declare const convertQualityToBit: (quality: number) => number;

package/lib/utils/{compression-file.js → image-compression/image.js}

@@ -1,16 +1,18 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const fileToDataURL = (file) => {
-  return new Promise((resolve) => {
+  return new Promise((resolve, reject) => {
     const reader = new FileReader();
     reader.onloadend = (e) => resolve(e.target.result);
+    reader.onerror = (e) => reject(e);
     reader.readAsDataURL(file);
   });
 };
 const dataURLToImage = (dataURL) => {
-  return new Promise((resolve) => {
+  return new Promise((resolve, reject) => {
     const img = new Image();
     img.onload = () => resolve(img);
+    img.onerror = (e) => reject(e);
     img.src = dataURL;
   });
 };
@@ -20,8 +22,8 @@ const canvastoFile = (canvas, type, quality) => {
   );
 };
 const scaleWidthHeight = (img) => {
-  const maxWidth = 1400;
-  const maxHeight = 1400;
+  const maxWidth = 2e3;
+  const maxHeight = 2e3;
   const originWidth = img.width;
   const originHeight = img.height;
   let targetWidth = img.width;
@@ -40,26 +42,17 @@ const scaleWidthHeight = (img) => {
     height: targetHeight
   };
 };
-const compressionFile = async (file, type = "image/jpeg", quality = 0.5, limit = 300) => {
-  const fileName = file.name;
-  if (file.size / 1024 < limit) {
-    return file;
+const convertQualityToBit = (quality) => {
+  let bit = 0;
+  if (quality > 1 || quality < 0) {
+    bit = 0;
+  } else {
+    bit = !quality ? 0 : quality * 256;
   }
-  const canvas = document.createElement("canvas");
-  const context = canvas.getContext("2d");
-  const base64 = await fileToDataURL(file);
-  const img = await dataURLToImage(base64);
-  const target = scaleWidthHeight(img);
-  canvas.width = target.width;
-  canvas.height = target.height;
-  context.clearRect(0, 0, target.width, target.height);
-  context.drawImage(img, 0, 0, target.width, target.height);
-  const blob = await canvastoFile(canvas, type, quality);
-  const newFile = new File([blob], fileName, {
-    type
-  });
-  return newFile;
+  return bit;
 };
-exports.compressionFile = compressionFile;
+exports.canvastoFile = canvastoFile;
+exports.convertQualityToBit = convertQualityToBit;
 exports.dataURLToImage = dataURLToImage;
 exports.fileToDataURL = fileToDataURL;
+exports.scaleWidthHeight = scaleWidthHeight;

package/lib/utils/image-compression/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 图片压缩方法
+ * @param {Object}  file 图片文件
+ * @param {Nubmber} quality 压缩质量参数 0-1
+ * @param {limit} limit 最小限制大小，小于该值时不进行压缩
+ * @returns 压缩后的新图片
+ */
+declare const compressionImage: (file: File, quality?: number, limit?: number) => Promise<File>;
+export default compressionImage;

package/lib/utils/image-compression/index.js

@@ -0,0 +1,38 @@
+"use strict";
+const UPNG = require("./UPNG");
+const image = require("./image");
+const compressionImage = async (file, quality = 0.5, limit = 300) => {
+  const fileName = file.name;
+  if (file.size / 1024 < limit) {
+    return file;
+  }
+  try {
+    const canvas = document.createElement("canvas");
+    const context = canvas.getContext("2d");
+    const base64 = await image.fileToDataURL(file);
+    const img = await image.dataURLToImage(base64);
+    const target = image.scaleWidthHeight(img);
+    canvas.width = target.width;
+    canvas.height = target.height;
+    context.clearRect(0, 0, target.width, target.height);
+    context.drawImage(img, 0, 0, target.width, target.height);
+    if (["image/jpeg", "image/jpg"].includes(file.type)) {
+      const blob = await image.canvastoFile(canvas, file.type, quality);
+      const newFile = new File([blob], fileName, {
+        type: file.type
+      });
+      return newFile;
+    } else {
+      const imageData = context.getImageData(0, 0, target.width, target.height).data;
+      const bit = image.convertQualityToBit(quality);
+      const png = UPNG.encode([imageData.buffer], target.width, target.height, bit);
+      const newFile = new File([png], file.name, {
+        type: file.type
+      });
+      return newFile;
+    }
+  } catch (error) {
+    return file;
+  }
+};
+module.exports = compressionImage;

package/lib/utils/image-compression/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "szld-libs",
   "private": false,
-  "version": "0.2.24",
+  "version": "0.2.26",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -13,6 +13,7 @@
     "antd": "^5.15.1",
     "crypto-js": "^4.2.0",
     "lodash": "^4.17.21",
+    "pako": "^2.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.6.1",

package/es/utils/compression-file.d.ts

@@ -1,11 +0,0 @@
-export declare const fileToDataURL: (file: Blob | File) => Promise<any>;
-export declare const dataURLToImage: (dataURL: string) => Promise<HTMLImageElement>;
-/**
- * 图片压缩方法
- * @param {Object}  file 图片文件
- * @param {String} type 想压缩成的文件类型
- * @param {Nubmber} quality 压缩质量参数
- * @param {limit} limit 最小限制大小，小于该值时不进行压缩
- * @returns 压缩后的新图片
- */
-export declare const compressionFile: (file: File, type?: string, quality?: number, limit?: number) => Promise<File>;

package/lib/utils/compression-file.d.ts

@@ -1,11 +0,0 @@
-export declare const fileToDataURL: (file: Blob | File) => Promise<any>;
-export declare const dataURLToImage: (dataURL: string) => Promise<HTMLImageElement>;
-/**
- * 图片压缩方法
- * @param {Object}  file 图片文件
- * @param {String} type 想压缩成的文件类型
- * @param {Nubmber} quality 压缩质量参数
- * @param {limit} limit 最小限制大小，小于该值时不进行压缩
- * @returns 压缩后的新图片
- */
-export declare const compressionFile: (file: File, type?: string, quality?: number, limit?: number) => Promise<File>;