fix 处理图片上传问题

hookehuyr
Commit 6e31fe1715608e8a0e9893dcf4c072c247feba38 6e31fe17 1 parent 5063c70d
Showing 4 changed files with 174 additions and 10 deletions
package-lock.json
package.json
src/views/fxPark/poster.vue
yarn.lock
--- a/package-lock.json
View file @6e31fe1
+++ b/package-lock.json
View file @6e31fe1
@@ -11,6 +11,8 @@
         "@vitejs/plugin-legacy": "^1.8.2",
         "@vueuse/core": "^8.5.0",
         "animate.css": "^4.1.1",
+        "compress-imgs": "^1.0.1",
+        "compressorjs": "^1.2.1",
         "dayjs": "^1.11.3",
         "default-passive-events": "^2.0.0",
         "global": "^4.4.0",
@@ -20,9 +22,11 @@
         "lodash": "^4.17.21",
         "moment": "^2.29.3",
         "mui-player": "^1.6.0",
+        "picture-compressor-plus": "^1.2.4",
         "recorder-core": "^1.3.23122400",
         "shrinkpng": "^1.2.0-beta.1",
         "typescript": "^4.7.3",
+        "upng-js": "^2.1.0",
         "uuid": "^8.3.2",
         "vant": "^4.8.10",
         "vconsole": "^3.14.6",
@@ -1167,6 +1171,11 @@
       "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
       "dev": true
     },
+    "node_modules/blueimp-canvas-to-blob": {
+      "version": "3.29.0",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/blueimp-canvas-to-blob/-/blueimp-canvas-to-blob-3.29.0.tgz",
+      "integrity": "sha512-0pcSSGxC0QxT+yVkivxIqW0Y4VlO2XSDPofBAqoJ1qJxgH9eiUDLv50Rixij2cDuEfx4M6DpD9UGZpRhT5Q8qg=="
+    },
     "node_modules/boolbase": {
       "version": "1.0.0",
       "resolved": "https://mirrors.cloud.tencent.com/npm/boolbase/-/boolbase-1.0.0.tgz",
@@ -1561,6 +1570,20 @@
         "node": ">=4.0.0"
       }
     },
+    "node_modules/compress-imgs": {
+      "version": "1.0.1",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/compress-imgs/-/compress-imgs-1.0.1.tgz",
+      "integrity": "sha512-k61fyqMIlzvl8N2l3Dcoudkxk0QYknU6xcGgRapF2LgcbCjlrpr+L54mS2pQf1miqogEU4YMIqTS9dqdEN5g1w=="
+    },
+    "node_modules/compressorjs": {
+      "version": "1.2.1",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/compressorjs/-/compressorjs-1.2.1.tgz",
+      "integrity": "sha512-+geIjeRnPhQ+LLvvA7wxBQE5ddeLU7pJ3FsKFWirDw6veY3s9iLxAQEw7lXGHnhCJvBujEQWuNnGzZcvCvdkLQ==",
+      "dependencies": {
+        "blueimp-canvas-to-blob": "^3.29.0",
+        "is-blob": "^2.1.0"
+      }
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -3142,6 +3165,17 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-blob": {
+      "version": "2.1.0",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/is-blob/-/is-blob-2.1.0.tgz",
+      "integrity": "sha512-SZ/fTft5eUhQM6oF/ZaASFDEdbFVe89Imltn9uZr03wdKMcWNVYSMjQPFtg05QuNkt5l5c135ElvXEQG0rk4tw==",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/is-ci": {
       "version": "3.0.1",
       "resolved": "https://mirrors.cloud.tencent.com/npm/is-ci/-/is-ci-3.0.1.tgz",
@@ -4399,6 +4433,11 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/picture-compressor-plus": {
+      "version": "1.2.4",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/picture-compressor-plus/-/picture-compressor-plus-1.2.4.tgz",
+      "integrity": "sha512-Nqh1eVAgw2mcq8SBxAUbtIQdGlFGkV5KpvUefy8KoTBG1GW/rENXAy7mF+QQe3CiYPfsV3C79bxE4hCLbPnmLA=="
+    },
     "node_modules/pify": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
@@ -5657,6 +5696,19 @@
         "node": ">=8"
       }
     },
+    "node_modules/upng-js": {
+      "version": "2.1.0",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/upng-js/-/upng-js-2.1.0.tgz",
+      "integrity": "sha512-d3xzZzpMP64YkjP5pr8gNyvBt7dLk/uGI67EctzDuVp4lCZyVMo0aJO6l/VDlgbInJYDY6cnClLoBp29eKWI6g==",
+      "dependencies": {
+        "pako": "^1.0.5"
+      }
+    },
+    "node_modules/upng-js/node_modules/pako": {
+      "version": "1.0.11",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/pako/-/pako-1.0.11.tgz",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw=="
+    },
     "node_modules/upper-case": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/upper-case/-/upper-case-2.0.2.tgz",
@@ -7003,6 +7055,11 @@
       "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
       "dev": true
     },
+    "blueimp-canvas-to-blob": {
+      "version": "3.29.0",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/blueimp-canvas-to-blob/-/blueimp-canvas-to-blob-3.29.0.tgz",
+      "integrity": "sha512-0pcSSGxC0QxT+yVkivxIqW0Y4VlO2XSDPofBAqoJ1qJxgH9eiUDLv50Rixij2cDuEfx4M6DpD9UGZpRhT5Q8qg=="
+    },
     "boolbase": {
       "version": "1.0.0",
       "resolved": "https://mirrors.cloud.tencent.com/npm/boolbase/-/boolbase-1.0.0.tgz",
@@ -7293,6 +7350,20 @@
       "integrity": "sha512-gk/Z852D2Wtb//0I+kRFNKKE9dIIVirjoqPoA1wJU+XePVXZfGeBpk45+A1rKO4Q43prqWBNY/MiIeRLbPWUaA==",
       "dev": true
     },
+    "compress-imgs": {
+      "version": "1.0.1",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/compress-imgs/-/compress-imgs-1.0.1.tgz",
+      "integrity": "sha512-k61fyqMIlzvl8N2l3Dcoudkxk0QYknU6xcGgRapF2LgcbCjlrpr+L54mS2pQf1miqogEU4YMIqTS9dqdEN5g1w=="
+    },
+    "compressorjs": {
+      "version": "1.2.1",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/compressorjs/-/compressorjs-1.2.1.tgz",
+      "integrity": "sha512-+geIjeRnPhQ+LLvvA7wxBQE5ddeLU7pJ3FsKFWirDw6veY3s9iLxAQEw7lXGHnhCJvBujEQWuNnGzZcvCvdkLQ==",
+      "requires": {
+        "blueimp-canvas-to-blob": "^3.29.0",
+        "is-blob": "^2.1.0"
+      }
+    },
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -8439,6 +8510,11 @@
         "binary-extensions": "^2.0.0"
       }
     },
+    "is-blob": {
+      "version": "2.1.0",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/is-blob/-/is-blob-2.1.0.tgz",
+      "integrity": "sha512-SZ/fTft5eUhQM6oF/ZaASFDEdbFVe89Imltn9uZr03wdKMcWNVYSMjQPFtg05QuNkt5l5c135ElvXEQG0rk4tw=="
+    },
     "is-ci": {
       "version": "3.0.1",
       "resolved": "https://mirrors.cloud.tencent.com/npm/is-ci/-/is-ci-3.0.1.tgz",
@@ -9380,6 +9456,11 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="
     },
+    "picture-compressor-plus": {
+      "version": "1.2.4",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/picture-compressor-plus/-/picture-compressor-plus-1.2.4.tgz",
+      "integrity": "sha512-Nqh1eVAgw2mcq8SBxAUbtIQdGlFGkV5KpvUefy8KoTBG1GW/rENXAy7mF+QQe3CiYPfsV3C79bxE4hCLbPnmLA=="
+    },
     "pify": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
@@ -10252,6 +10333,21 @@
       "integrity": "sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==",
       "dev": true
     },
+    "upng-js": {
+      "version": "2.1.0",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/upng-js/-/upng-js-2.1.0.tgz",
+      "integrity": "sha512-d3xzZzpMP64YkjP5pr8gNyvBt7dLk/uGI67EctzDuVp4lCZyVMo0aJO6l/VDlgbInJYDY6cnClLoBp29eKWI6g==",
+      "requires": {
+        "pako": "^1.0.5"
+      },
+      "dependencies": {
+        "pako": {
+          "version": "1.0.11",
+          "resolved": "https://mirrors.cloud.tencent.com/npm/pako/-/pako-1.0.11.tgz",
+          "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw=="
+        }
+      }
+    },
     "upper-case": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/upper-case/-/upper-case-2.0.2.tgz",
--- a/package.json
View file @6e31fe1
+++ b/package.json
View file @6e31fe1
@@ -21,6 +21,7 @@
     "@vitejs/plugin-legacy": "^1.8.2",
     "@vueuse/core": "^8.5.0",
     "animate.css": "^4.1.1",
+    "compressorjs": "^1.2.1",
     "dayjs": "^1.11.3",
     "default-passive-events": "^2.0.0",
     "global": "^4.4.0",
@@ -31,7 +32,6 @@
     "moment": "^2.29.3",
     "mui-player": "^1.6.0",
     "recorder-core": "^1.3.23122400",
-    "shrinkpng": "^1.2.0-beta.1",
     "typescript": "^4.7.3",
     "uuid": "^8.3.2",
     "vant": "^4.8.10",
--- a/src/views/fxPark/poster.vue
View file @6e31fe1
+++ b/src/views/fxPark/poster.vue
View file @6e31fe1
@@ -63,7 +63,28 @@ import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@
 //import { } from '@/utils/generateModules.js'
 //import { } from '@/utils/generateIcons.js'
 //import { } from '@/composables'
-import { shrinkImage } from "shrinkpng"
+import Compressor from 'compressorjs';
+
+// 创建图片压缩函数
+function compressImage(inputFile, outputFormat, maxSize, quality) {
+  return new Promise((resolve, reject) => {
+    // 使用 Compressor 类来处理图片压缩
+    new Compressor(inputFile, {
+      quality: quality, // 图片质量
+      maxWidth: maxSize, // 图片最大宽度
+      maxHeight: maxSize, // 图片最大高度
+      convertSize: maxSize * 1024, // 转换大小，单位为字节
+      success(result) {
+        // 压缩成功后的处理
+        resolve(result);
+      },
+      error(err) {
+        // 压缩失败后的处理
+        reject(err);
+      },
+    });
+  });
+}
 const $route = useRoute();
 const $router = useRouter();
@@ -191,13 +212,7 @@ const createImage = () => {
 const upload_loading = ref(false);
-const compressImg = (file) => { // 图片压缩
+const beforeRead = async (file) => {
-  return shrinkImage(file, {
-    quality: 15
-  });
-}
-
-const beforeRead = (file) => {
   if (file.type.indexOf('image') < 0) {
     showToast('请上传图片格式');
     return false;
@@ -208,7 +223,20 @@ const beforeRead = (file) => {
   //   return false;
   // }
-  return compressImg(file);
+  const inputFile = file; // 获取用户选择的文件
+  const outputFormat = 'image/png'; // 输出格式
+  const maxSize = 800; // 图片最大尺寸
+  const quality = 0.8; // 图片质量
+
+  return await compressImage(inputFile, outputFormat, maxSize, quality)
+    .then((compressedFile) => {
+      // 压缩成功，处理压缩后的文件
+      return compressedFile;
+    })
+    .catch((error) => {
+      // 压缩失败，处理错误
+      console.error('压缩失败', error);
+    });
 };
 const afterRead = async (res) => {
--- a/yarn.lock
View file @6e31fe1
+++ b/yarn.lock
View file @6e31fe1
@@ -640,6 +640,11 @@
   "resolved" "https://mirrors.cloud.tencent.com/npm/bluebird/-/bluebird-3.7.2.tgz"
   "version" "3.7.2"
+"blueimp-canvas-to-blob@^3.29.0":
+  "integrity" "sha512-0pcSSGxC0QxT+yVkivxIqW0Y4VlO2XSDPofBAqoJ1qJxgH9eiUDLv50Rixij2cDuEfx4M6DpD9UGZpRhT5Q8qg=="
+  "resolved" "https://mirrors.cloud.tencent.com/npm/blueimp-canvas-to-blob/-/blueimp-canvas-to-blob-3.29.0.tgz"
+  "version" "3.29.0"
+
 "boolbase@^1.0.0":
   "integrity" "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
   "resolved" "https://mirrors.cloud.tencent.com/npm/boolbase/-/boolbase-1.0.0.tgz"
@@ -912,6 +917,19 @@
   "resolved" "https://mirrors.cloud.tencent.com/npm/common-tags/-/common-tags-1.8.2.tgz"
   "version" "1.8.2"
+"compress-imgs@^1.0.1":
+  "integrity" "sha512-k61fyqMIlzvl8N2l3Dcoudkxk0QYknU6xcGgRapF2LgcbCjlrpr+L54mS2pQf1miqogEU4YMIqTS9dqdEN5g1w=="
+  "resolved" "https://mirrors.cloud.tencent.com/npm/compress-imgs/-/compress-imgs-1.0.1.tgz"
+  "version" "1.0.1"
+
+"compressorjs@^1.2.1":
+  "integrity" "sha512-+geIjeRnPhQ+LLvvA7wxBQE5ddeLU7pJ3FsKFWirDw6veY3s9iLxAQEw7lXGHnhCJvBujEQWuNnGzZcvCvdkLQ=="
+  "resolved" "https://mirrors.cloud.tencent.com/npm/compressorjs/-/compressorjs-1.2.1.tgz"
+  "version" "1.2.1"
+  dependencies:
+    "blueimp-canvas-to-blob" "^3.29.0"
+    "is-blob" "^2.1.0"
+
 "concat-map@0.0.1":
   "integrity" "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
   "resolved" "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz"
@@ -1783,6 +1801,11 @@
   dependencies:
     "binary-extensions" "^2.0.0"
+"is-blob@^2.1.0":
+  "integrity" "sha512-SZ/fTft5eUhQM6oF/ZaASFDEdbFVe89Imltn9uZr03wdKMcWNVYSMjQPFtg05QuNkt5l5c135ElvXEQG0rk4tw=="
+  "resolved" "https://mirrors.cloud.tencent.com/npm/is-blob/-/is-blob-2.1.0.tgz"
+  "version" "2.1.0"
+
 "is-ci@^3.0.0":
   "integrity" "sha512-ZYvCgrefwqoQ6yTyYUbQu64HsITZ3NfKX1lzaEYdkTDcfKzzCI/wthRRYKkdjHKFVgNiXKAKm65Zo1pk2as/QQ=="
   "resolved" "https://mirrors.cloud.tencent.com/npm/is-ci/-/is-ci-3.0.1.tgz"
@@ -2390,6 +2413,11 @@
   dependencies:
     "aggregate-error" "^3.0.0"
+"pako@^1.0.5":
+  "integrity" "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw=="
+  "resolved" "https://mirrors.cloud.tencent.com/npm/pako/-/pako-1.0.11.tgz"
+  "version" "1.0.11"
+
 "pako@^2.0.4":
   "integrity" "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug=="
   "resolved" "https://mirrors.cloud.tencent.com/npm/pako/-/pako-2.1.0.tgz"
@@ -2496,6 +2524,11 @@
   "resolved" "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz"
   "version" "2.3.1"
+"picture-compressor-plus@^1.2.4":
+  "integrity" "sha512-Nqh1eVAgw2mcq8SBxAUbtIQdGlFGkV5KpvUefy8KoTBG1GW/rENXAy7mF+QQe3CiYPfsV3C79bxE4hCLbPnmLA=="
+  "resolved" "https://mirrors.cloud.tencent.com/npm/picture-compressor-plus/-/picture-compressor-plus-1.2.4.tgz"
+  "version" "1.2.4"
+
 "pify@^2.2.0":
   "integrity" "sha1-7RQaasBDqEnqWISY59yosVMw6Qw="
   "resolved" "https://mirrors.cloud.tencent.com/npm/pify/-/pify-2.3.0.tgz"
@@ -3181,6 +3214,13 @@
   "resolved" "https://mirrors.cloud.tencent.com/npm/untildify/-/untildify-4.0.0.tgz"
   "version" "4.0.0"
+"upng-js@^2.1.0":
+  "integrity" "sha512-d3xzZzpMP64YkjP5pr8gNyvBt7dLk/uGI67EctzDuVp4lCZyVMo0aJO6l/VDlgbInJYDY6cnClLoBp29eKWI6g=="
+  "resolved" "https://mirrors.cloud.tencent.com/npm/upng-js/-/upng-js-2.1.0.tgz"
+  "version" "2.1.0"
+  dependencies:
+    "pako" "^1.0.5"
+
 "upper-case-first@^2.0.2":
   "integrity" "sha512-514ppYHBaKwfJRK/pNC6c/OxfGa0obSnAl106u97Ed0I625Nin96KAjttZF6ZL3e1XLtphxnqrOi9iWgm+u+bg=="
   "resolved" "https://registry.npmjs.org/upper-case-first/-/upper-case-first-2.0.2.tgz"