Browse Source

图片压缩和下载

master
congzc 1 year ago
parent
commit
0593edb972
5 changed files with 109 additions and 20 deletions
  1. +2
    -1
      package.json
  2. +31
    -4
      src/pages/home/index.vue
  3. +38
    -6
      src/pages/lookPhoto/index.vue
  4. +26
    -9
      src/pages/uploadPhoto/uploadPhoto.vue
  5. +12
    -0
      yarn.lock

+ 2
- 1
package.json View File

@@ -51,6 +51,7 @@
"@dcloudio/uni-mp-toutiao": "3.0.0-3080720230703001", "@dcloudio/uni-mp-toutiao": "3.0.0-3080720230703001",
"@dcloudio/uni-mp-weixin": "3.0.0-3080720230703001", "@dcloudio/uni-mp-weixin": "3.0.0-3080720230703001",
"@dcloudio/uni-quickapp-webview": "3.0.0-3080720230703001", "@dcloudio/uni-quickapp-webview": "3.0.0-3080720230703001",
"browser-image-compression": "^2.0.2",
"clipboard": "^2.0.11", "clipboard": "^2.0.11",
"dayjs": "^1.11.9", "dayjs": "^1.11.9",
"pinia": "2.0.33", "pinia": "2.0.33",
@@ -69,4 +70,4 @@
"sass-loader": "13.2.2", "sass-loader": "13.2.2",
"vite": "4.1.4" "vite": "4.1.4"
} }
}
}

+ 31
- 4
src/pages/home/index.vue View File

@@ -76,19 +76,46 @@
import { ref, reactive } from "vue"; import { ref, reactive } from "vue";
import { voiceTotalApi } from "../../api/login.js"; import { voiceTotalApi } from "../../api/login.js";
import { userInfoModules } from "@/store/modules/userInfo";
import imageCompression from "browser-image-compression"; //压缩图片插件
//#endregion //#endregion
const userInfoModulesPinia = userInfoModules();
//#region 头像 //#region 头像
const avatarUrl = ref(null); const avatarUrl = ref(null);
function chooseAvatar(params) { function chooseAvatar(params) {
uni.chooseImage({ uni.chooseImage({
count: 1, // 最多可以选择的图片张数,这里设置为1,只选择一张图片 count: 1, // 最多可以选择的图片张数,这里设置为1,只选择一张图片
success: (res) => {
const tempFilePaths = res.tempFilePaths;
avatarUrl.value = tempFilePaths[0];
success: async (res) => {
// avatarUrl.value = res.tempFilePaths[0];
// TODO: 在这里处理图片上传逻辑,你可以调用上传接口将图片上传到服务器 // TODO: 在这里处理图片上传逻辑,你可以调用上传接口将图片上传到服务器
// 示例代码: // 示例代码:
// uploadImageToServer(tempFilePaths[0]); // uploadImageToServer(tempFilePaths[0]);
// 图片压缩
console.log(res.tempFiles[0].size);
if (userInfoModulesPinia.platForm != 1) {
uni.compressImage({
src: res.tempFilePaths[0],
quality: 20,
success: (res2) => {
avatarUrl.value = res2.tempFilePath;
console.log(res2.tempFilePath);
},
});
} else {
const options = {
maxSizeMB: 2, // 最大压缩大小为 4MB
useWebWorker: true, // 使用 Web Worker 进行压缩,提高性能
};
const compressedFile = await imageCompression(
res.tempFiles[0],
options
);
//compressedFile是一个blob对象
avatarUrl.value = URL.createObjectURL(compressedFile);
console.log(compressedFile);
// avatarUrl.value = compressedFile;
console.log("压缩图片h5");
}
}, },
fail: (err) => { fail: (err) => {
console.error("选择图片失败", err); console.error("选择图片失败", err);


+ 38
- 6
src/pages/lookPhoto/index.vue View File

@@ -2,7 +2,9 @@
<view class="page"> <view class="page">
<!-- 轮播图 --> <!-- 轮播图 -->
<u-swiper <u-swiper
indicatorMode="line"
indicator
indicatorMode="dot"
:autoplay="false"
:list="swiperList" :list="swiperList"
@change="" @change=""
@click="click" @click="click"
@@ -15,7 +17,7 @@
type="primary" type="primary"
text="下载照片" text="下载照片"
color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))" color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
@click=""
@click="downloadImg"
></up-button> ></up-button>
</view> </view>
<view class="btnBox"> <view class="btnBox">
@@ -53,18 +55,38 @@
<script setup> <script setup>
//#region 导入 //#region 导入
import { ref, reactive } from "vue"; import { ref, reactive } from "vue";
import { userInfoModules } from "@/store/modules/userInfo";
//#endregion //#endregion
const userInfoModulesPinia = userInfoModules();
//#region 轮播图 //#region 轮播图
const swiperList = ref([ const swiperList = ref([
"https://uiadmin.net/uview-plus/common/logo.png", "https://uiadmin.net/uview-plus/common/logo.png",
"../../assets/img/img1.jpg",
"https://uiadmin.net/uview-plus/common/logo.png", "https://uiadmin.net/uview-plus/common/logo.png",
"../../assets/img/img1.jpg",
"https://uiadmin.net/uview-plus/common/logo.png",
"https://uiadmin.net/uview-plus/common/logo.png",
]); ]);
//#endregion --------------------- //#endregion ---------------------
//#region 下载
function downloadImg() {
if (userInfoModulesPinia.platForm != 1) {
uni.saveImageToPhotosAlbum({
filePath: "https://uiadmin.net/uview-plus/common/logo.png",
success: function () {
console.log("save success");
},
});
} else {
const link = document.createElement("a");
link.href = "https://uiadmin.net/uview-plus/common/logo.png";
link.download = "image.jpg";
// document.body.appendChild(link);
link.click();
// document.body.removeChild(link);
}
}
//#endregion ---------------------
//#region 分享 //#region 分享
function share() { function share() {
uni.share({ uni.share({
@@ -139,6 +161,16 @@ function bueCoin() {
height: 700rpx !important; height: 700rpx !important;
} }
} }
// h5
:deep(.u-swiper__wrapper) {
width: 100%;
height: 700rpx !important;
image {
width: 100%;
height: 700rpx !important;
}
}
} }
.bottomBox { .bottomBox {
width: 100%; width: 100%;


+ 26
- 9
src/pages/uploadPhoto/uploadPhoto.vue View File

@@ -54,6 +54,7 @@
import { ref, reactive } from "vue"; import { ref, reactive } from "vue";
import { voiceTotalApi } from "../../api/login.js"; import { voiceTotalApi } from "../../api/login.js";
import { userInfoModules } from "@/store/modules/userInfo"; import { userInfoModules } from "@/store/modules/userInfo";
import imageCompression from "browser-image-compression"; //压缩图片插件
//#endregion //#endregion
const userInfoModulesPinia = userInfoModules(); const userInfoModulesPinia = userInfoModules();
@@ -64,14 +65,30 @@ function chooseImage() {
// 调用uni.chooseImage方法选择图片 // 调用uni.chooseImage方法选择图片
uni.chooseImage({ uni.chooseImage({
count: 1, // 最多可以选择的图片张数,这里设置为1,只选择一张图片 count: 1, // 最多可以选择的图片张数,这里设置为1,只选择一张图片
success: (res) => {
// 选择成功,返回的res.tempFilePaths是一个数组,包含选择的图片的临时文件路径
const tempFilePaths = res.tempFilePaths;
console.log(tempFilePaths);
showImgUrl.value = tempFilePaths[0];
// TODO: 在这里处理图片上传逻辑,你可以调用上传接口将图片上传到服务器
// 示例代码:
// uploadImageToServer(tempFilePaths[0]);
success: async (res) => {
// 图片压缩
console.log(res.tempFiles[0].size);
if (userInfoModulesPinia.platForm != 1) {
uni.compressImage({
src: res.tempFilePaths[0],
quality: 20,
success: (res2) => {
showImgUrl.value = res2.tempFilePath;
console.log(res2.tempFilePath);
},
});
} else {
const options = {
maxSizeMB: 2, // 最大压缩大小为 4MB
useWebWorker: true, // 使用 Web Worker 进行压缩,提高性能
};
const compressedFile = await imageCompression(
res.tempFiles[0],
options
);
//compressedFile是一个blob对象
showImgUrl.value = URL.createObjectURL(compressedFile);
}
}, },
fail: (err) => { fail: (err) => {
console.error("选择图片失败", err); console.error("选择图片失败", err);
@@ -91,7 +108,7 @@ function toCloseStyle() {
}); });
} }
} }
console.log(userInfoModulesPinia.hostSystem, "System");
//#endregion --------------------- //#endregion ---------------------
//#region //#region


+ 12
- 0
yarn.lock View File

@@ -2439,6 +2439,13 @@ braces@^3.0.2, braces@~3.0.2:
dependencies: dependencies:
fill-range "^7.0.1" fill-range "^7.0.1"
browser-image-compression@^2.0.2:
version "2.0.2"
resolved "https://registry.npmmirror.com/browser-image-compression/-/browser-image-compression-2.0.2.tgz#4d5ef8882e9e471d6d923715ceb9034499d14eaa"
integrity sha512-pBLlQyUf6yB8SmmngrcOw3EoS4RpQ1BcylI3T9Yqn7+4nrQTXJD4sJDe5ODnJdrvNMaio5OicFo75rDyJD2Ucw==
dependencies:
uzip "0.20201231.0"
browserslist@^4.21.5, browserslist@^4.21.9: browserslist@^4.21.5, browserslist@^4.21.9:
version "4.21.10" version "4.21.10"
resolved "https://registry.npmmirror.com/browserslist/-/browserslist-4.21.10.tgz#dbbac576628c13d3b2231332cb2ec5a46e015bb0" resolved "https://registry.npmmirror.com/browserslist/-/browserslist-4.21.10.tgz#dbbac576628c13d3b2231332cb2ec5a46e015bb0"
@@ -4041,6 +4048,11 @@ uview-plus@^3.1.34:
clipboard "^2.0.11" clipboard "^2.0.11"
dayjs "^1.11.3" dayjs "^1.11.3"
uzip@0.20201231.0:
version "0.20201231.0"
resolved "https://registry.npmmirror.com/uzip/-/uzip-0.20201231.0.tgz#9e64b065b9a8ebf26eb7583fe8e77e1d9a15ed14"
integrity sha512-OZeJfZP+R0z9D6TmBgLq2LHzSSptGMGDGigGiEe0pr8UBe/7fdflgHlHBNDASTXB5jnFuxHpNaJywSg8YFeGng==
vary@~1.1.2: vary@~1.1.2:
version "1.1.2" version "1.1.2"
resolved "https://registry.npmmirror.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc" resolved "https://registry.npmmirror.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"


Loading…
Cancel
Save