Hooke / fxPark

Go to a project
Toggle navigation Toggle navigation pinning
You need to sign in or sign up before continuing.
hookehuyr
6e31fe17 1 parent 5063c70d

fix 处理图片上传问题

Inline Side-by-side
Showing 4 changed files with 174 additions and 10 deletions
......@@ -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",
......
......@@ -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",
......
......@@ -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) => { // 图片压缩
return shrinkImage(file, {
quality: 15
});
}
const beforeRead = (file) => {
const beforeRead = async (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) => {
......
......@@ -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"
......