From 2794927ea5a697a1e514a7c9cc204273db7f32c1 Mon Sep 17 00:00:00 2001
From: Tevin <tingquanren@163.com>
Date: Mon, 21 Jun 2021 09:47:03 +0800
Subject: [PATCH] 优化图片压缩细节，优惠图片上传组件预览
---
forms/imagePicker/CImageCompressor.vue | 13 +++++-
forms/imagePicker/cImagePicker.scss | 9 +++-
forms/imagePicker/CImagePicker.vue | 41 +++++++-------------
3 files changed, 32 insertions(+), 31 deletions(-)
diff --git a/forms/imagePicker/CImageCompressor.vue b/forms/imagePicker/CImageCompressor.vue
index 4bd1862..a0106dd 100644
--- a/forms/imagePicker/CImageCompressor.vue
+++ b/forms/imagePicker/CImageCompressor.vue
@@ -20,6 +20,12 @@
export default {
name: 'CImageCompressor',
+ props: {
+ maxSize: {
+ type: Number,
+ default: 1600,
+ },
+ },
data() {
return {
// canvas id
@@ -33,6 +39,7 @@
},
methods: {
$compress(tempPaths, callback) {
+ this.imgBlobs = []; // 重置已转图片
if (typeof this.canvasContext === 'undefined') {
this.canvasContext = Taro.createCanvasContext(this.cavId, this);
}
@@ -46,7 +53,7 @@
}
// 完成图片压缩
else {
- console.log(this.imgBlobs);
+ callback(this.imgBlobs);
}
});
};
@@ -73,12 +80,12 @@
let width, height;
// 宽大于高，按宽算
if (res.width >= res.height) {
- width = Math.min(res.width, 1600);
+ width = Math.min(res.width, this.maxSize);
height = Math.round(width / rate);
}
// 按高算
else {
- height = Math.min(res.height, 1600);
+ height = Math.min(res.height, this.maxSize);
width = Math.round(height * rate);
}
return [width, height];
diff --git a/forms/imagePicker/CImagePicker.vue b/forms/imagePicker/CImagePicker.vue
index d69f25c..7312a7f 100644
--- a/forms/imagePicker/CImagePicker.vue
+++ b/forms/imagePicker/CImagePicker.vue
@@ -23,18 +23,6 @@
:onFail="evt=>handleFail(evt)"
:onImageClick="(index, file)=>handleImgView(index,file)"
/>
- <AtCurtain
- class="c-image-picker-view"
- closeBtnPosition="top-right"
- :isOpened="showImg"
- :onClose="evt=>handleImgClose()"
- >
- <image
- class="img"
- mode="aspectFit"
- :src="curtainImg"
- />
- </AtCurtain>
<CImageCompressor ref="compressor" />
</view>
</template>
@@ -60,10 +48,7 @@
itemRes: Object,
},
data() {
- return {
- showImg: false,
- curtainImg: '',
- };
+ return {};
},
computed: {
files() {
@@ -93,7 +78,7 @@
// 添加图片
if (operationType === 'add') {
const needs = files
- .map((file, index) => {
+ .map((file, needIndex) => {
const fileInfo = file.file;
// 没有 file 信息对象，或者不是 blob 类型
if (!fileInfo || fileInfo.path.indexOf('blob') < 0) {
@@ -103,19 +88,18 @@
if (fileInfo.size < 1 * 1024 * 1024) {
return false;
}
- return [fileInfo, index];
+ return [fileInfo, needIndex];
})
.filter(Boolean);
// 存在需要压缩的图片，一次性压缩
if (needs.length > 0) {
const files2 = [...files];
- const needPath = needs.map(need => need[0].path);
- this.$refs.compressor.$compress(needPath, compressedFiles => {
- compressedFiles.forEach((cpFile, index) => {
- const filesIndex = needs[index][1];
+ const needPaths = needs.map(need => need[0].path);
+ this.$refs.compressor.$compress(needPaths, compressedFiles => {
+ compressedFiles.forEach((cpPath, cpIndex) => {
+ const filesIndex = needs[cpIndex][1];
files2[filesIndex] = {
- url: cpFile.path,
- file: cpFile,
+ url: cpPath.compress,
};
});
this.triggerChange(files2);
@@ -132,8 +116,13 @@
}
},
handleImgView(index, file) {
- this.curtainImg = file.url;
- this.showImg = true;
+ const urls = this.files
+ .map(file => (file.type === 'btn' ? false : file.url))
+ .filter(Boolean);
+ Taro.previewImage({
+ current: file.url, // 当前显示图片的http链接
+ urls, // 需要预览的图片http链接列表
+ });
},
handleImgClose() {
this.showImg = false;
diff --git a/forms/imagePicker/cImagePicker.scss b/forms/imagePicker/cImagePicker.scss
index 026257a..8ca8315 100644
--- a/forms/imagePicker/cImagePicker.scss
+++ b/forms/imagePicker/cImagePicker.scss
@@ -20,8 +20,13 @@
padding: 18px 18px 0 0;
}
.at-image-picker__preview-img {
- text-align: center;
- background-color: #f8f8f8;
+ position: relative;
+ background-color: #f2f2f2;
+ img {
+ display: block;
+ @include position(absolute, 50% 50% n n);
+ transform: translate(-50%, -50%);
+ }
}
.at-image-picker__choose-btn {
.add-bar {
--
Gitblit v1.9.1