La123123.
/
im-backed
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

优化: 图片高度宽度显示优化

master
xsx 9 months ago
parent
43078dfc90
commit
53bd7024a8
7 changed files with 124 additions and 42 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 7
      im-platform/src/main/java/com/bx/implatform/service/impl/FileServiceImpl.java
  2. 6
      im-platform/src/main/java/com/bx/implatform/vo/UploadImageVO.java
  3. 42
      im-uniapp/components/chat-message-item/chat-message-item.vue
  4. 23
      im-uniapp/pages/chat/chat-box.vue
  5. 28
      im-web/src/components/chat/ChatBox.vue
  6. 54
      im-web/src/components/chat/ChatMessageItem.vue
  7. 2
      im-web/src/store/chatStore.js

7
im-platform/src/main/java/com/bx/implatform/service/impl/FileServiceImpl.java
View File

@ -25,6 +25,9 @@ import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import org.springframework.util.DigestUtils;
import org.springframework.web.multipart.MultipartFile;
import javax.imageio.ImageIO;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Date;
import java.util.Objects;
@ -101,6 +104,10 @@ public class FileServiceImpl extends ServiceImpl<FileInfoMapper, FileInfo> imple
throw new GlobalException(ResultCode.PROGRAM_ERROR, "图片格式不合法");
}
UploadImageVO vo = new UploadImageVO();
// 获取图片长度和宽度
BufferedImage bufferedImage = ImageIO.read(file.getInputStream());
vo.setWidth(bufferedImage.getWidth());
vo.setHeight(bufferedImage.getHeight());
// 如果文件已存在，直接复用
String md5 = DigestUtils.md5DigestAsHex(file.getInputStream());
FileInfo fileInfo = findByMd5(md5, FileType.IMAGE.code());

6
im-platform/src/main/java/com/bx/implatform/vo/UploadImageVO.java
View File

@ -12,4 +12,10 @@ public class UploadImageVO {
@Schema(description = "缩略图")
private String thumbUrl;
@Schema(description = "图片宽度")
private int width;
@Schema(description = "图片高度")
private int height;
}

42
im-uniapp/components/chat-message-item/chat-message-item.vue
View File

@ -27,9 +27,8 @@
<view class="message-image" v-else-if="msgInfo.type == $enums.MESSAGE_TYPE.IMAGE">
<long-press-menu :items="menuItems" @select="onSelectMenu">
<view class="image-box">
<image class="send-image" mode="heightFix"
:src="JSON.parse(msgInfo.content).thumbUrl" lazy-load="true"
@click.stop="onShowFullImage()">
<image class="send-image" :style="imageStyle" mode="aspectFill"
:src="contentData.thumbUrl" lazy-load="true" @click.stop="onShowFullImage()">
</image>
<loading v-if="sending"></loading>
</view>
@ -39,8 +38,8 @@
<long-press-menu :items="menuItems" @select="onSelectMenu">
<view class="file-box">
<view class="file-info">
<uni-link class="file-name" :text="data.name" showUnderLine="true"
color="#007BFF" :href="data.url"></uni-link>
<uni-link class="file-name" :text="contentData.name" showUnderLine="true"
color="#007BFF" :href="contentData.url"></uni-link>
<view class="file-size">{{ fileSize }}</view>
</view>
<view class="file-icon iconfont icon-file"></view>
@ -52,7 +51,7 @@
@select="onSelectMenu">
<view class="message-audio message-text" @click="onPlayAudio()">
<text class="iconfont icon-voice-play"></text>
<text class="chat-audio-text">{{ JSON.parse(msgInfo.content).duration + '"' }}</text>
<text class="chat-audio-text">{{ contentData.duration + '"' }}</text>
<text v-if="audioPlayState == 'PAUSE'" class="iconfont icon-play"></text>
<text v-if="audioPlayState == 'PLAYING'" class="iconfont icon-pause"></text>
</view>
@ -128,7 +127,7 @@ export default {
// 初始化音频播放器
if (!this.innerAudioContext) {
this.innerAudioContext = uni.createInnerAudioContext();
let url = JSON.parse(this.msgInfo.content).url;
let url = this.contentData.url;
this.innerAudioContext.src = url;
this.innerAudioContext.onEnded((e) => {
console.log('停止')
@ -159,7 +158,7 @@ export default {
this.menu.show = false;
},
onShowFullImage() {
let imageUrl = JSON.parse(this.msgInfo.content).originUrl;
let imageUrl = this.contentData.originUrl;
uni.previewImage({
urls: [imageUrl]
})
@ -185,11 +184,11 @@ export default {
sendFail() {
return this.msgInfo.status == this.$enums.MESSAGE_STATUS.FAILED;
},
data() {
contentData() {
return JSON.parse(this.msgInfo.content)
},
fileSize() {
let size = this.data.size;
let size = this.contentData.size;
if (size > 1024 * 1024) {
return Math.round(size / 1024 / 1024) + "M";
}
@ -244,6 +243,22 @@ export default {
let text = this.$str.html2Escape(this.msgInfo.content)
text = this.$url.replaceURLWithHTMLLinks(text, color)
return this.$emo.transform(text, 'emoji-normal')
},
imageStyle() {
console.log(uni.getSystemInfo())
let maxSize = uni.getSystemInfoSync().windowWidth * 0.6;
let minSize = uni.getSystemInfoSync().windowWidth * 0.2;
let width = this.contentData.width;
let height = this.contentData.height;
if (width && height) {
let ratio = Math.min(width, height) / Math.max(width, height);
let w = Math.max(width > height ? maxSize : ratio * maxSize, minSize);
let h = Math.max(width > height ? ratio * maxSize : maxSize, minSize);
return `width: ${w}px;height:${h}px;`
} else {
// 兼容历史版本，历史数据没有记录宽高
return `max-width: ${maxSize}px;min-width:100px;max-height: ${maxSize}px;min-height:100px;`
}
}
}
}
@ -348,11 +363,10 @@ export default {
position: relative;
.send-image {
min-width: 200rpx;
max-width: 420rpx;
height: 350rpx;
cursor: pointer;
border-radius: 4px;
border-radius: 10rpx;
background: $im-bg;
border: 6rpx solid $im-color-primary-light-5;
}
}

23
im-uniapp/pages/chat/chat-box.vue
View File

@ -453,6 +453,16 @@ export default {
file.chat = this.chat;
// 滚到最低部
this.scrollToBottom();
// 更新图片宽高
let chat = this.chat;
this.getImageSize(file).then(size => {
msgInfo = JSON.parse(JSON.stringify(msgInfo))
data.width = size.width;
data.height = size.height;
msgInfo.content = JSON.stringify(data)
this.chatStore.insertMessage(msgInfo, chat);
this.scrollToBottom();
})
return true;
},
onUploadImageSuccess(file, res) {
@ -904,6 +914,19 @@ export default {
}
return message;
},
getImageSize(file) {
return new Promise((resolve) => {
uni.getImageInfo({
src: file.path,
success: (res) => {
resolve(res);
},
fail: (err) => {
console.error('获取图片信息失败', err);
}
});
});
},
generateId() {
// 生成临时id
return String(new Date().getTime()) + String(Math.floor(Math.random() * 1000));

28
im-web/src/components/chat/ChatBox.vue
View File

@ -203,6 +203,15 @@ export default {
// 借助file对象保存
file.msgInfo = msgInfo;
file.chat = this.chat;
// 更新图片尺寸
let chat = this.chat;
this.getImageSize(file).then(size => {
data.width = size.width;
data.height = size.height;
msgInfo.content = JSON.stringify(data)
this.chatStore.insertMessage(msgInfo, chat);
this.scrollToBottom();
})
},
onFileSuccess(url, file) {
let data = {
@ -681,6 +690,25 @@ export default {
}
return message;
},
getImageSize(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = function (event) {
const img = new Image();
img.onload = function () {
resolve({ width: img.width, height: img.height });
};
img.onerror = function () {
reject(new Error('无法加载图片'));
};
img.src = event.target.result;
};
reader.onerror = function () {
reject(new Error('无法读取文件'));
};
reader.readAsDataURL(file);
});
},
generateId() {
// 生成临时id
return String(new Date().getTime()) + String(Math.floor(Math.random() * 1000));

54
im-web/src/components/chat/ChatMessageItem.vue
View File

@ -21,18 +21,19 @@
<div class="message-bottom" @contextmenu.prevent="showRightMenu($event)">
<div ref="chatMsgBox" class="message-content-wrapper">
<span class="message-text" v-if="isTextMessage" v-html="htmlText"></span>
<div class="message-image" v-else-if="msgInfo.type == $enums.MESSAGE_TYPE.IMAGE">
<div class="img-load-box" v-loading="sending" element-loading-text="发送中.."
<div class="message-image" v-else-if="msgInfo.type == $enums.MESSAGE_TYPE.IMAGE"
@click="showFullImageBox()">
<div v-loading="sending" element-loading-text="发送中.."
element-loading-background="rgba(0, 0, 0, 0.4)">
<img class="send-image" :src="JSON.parse(msgInfo.content).thumbUrl"
@click="showFullImageBox()" loading="lazy" />
<img :style="imageStyle" :src="contentData.thumbUrl" loading="lazy" />
</div>
</div>
<div class="message-file" v-else-if="msgInfo.type == $enums.MESSAGE_TYPE.FILE">
<div class="chat-file-box" v-loading="sending">
<div class="chat-file-info">
<el-link class="chat-file-name" :underline="true" target="_blank" type="primary"
:href="data.url" :download="data.name">{{ data.name }}</el-link>
:href="contentData.url" :download="contentData.name">{{ contentData.name
}}</el-link>
<div class="chat-file-size">{{ fileSize }}</div>
</div>
<div class="chat-file-icon">
@ -44,7 +45,7 @@
@click="onPlayVoice()">
<audio controls :src="JSON.parse(msgInfo.content).url"></audio>
</div>
<div title="发送中" v-if="sending && isTextMessage" class="sending" v-loading="'true'"></div>
<div title="发送中" v-if="sending" class="sending" v-loading="'true'"></div>
<div title="发送失败" v-else-if="sendFail" @click="onSendFail" class="send-fail el-icon-warning">
</div>
</div>
@ -152,11 +153,11 @@ export default {
sendFail() {
return this.msgInfo.status == this.$enums.MESSAGE_STATUS.FAILED;
},
data() {
contentData() {
return JSON.parse(this.msgInfo.content)
},
fileSize() {
let size = this.data.size;
let size = this.contentData.size;
if (size > 1024 * 1024) {
return Math.round(size / 1024 / 1024) + "M";
}
@ -199,6 +200,22 @@ export default {
},
isGroupMessage() {
return !!this.msgInfo.groupId;
},
imageStyle() {
// 计算图片的显示宽高，要求：任意边不能高于360px,不能低于60px,不能拉伸图片比例
let maxSize = this.configStore.fullScreen ? 360 : 240;
let minSize = 60;
let width = this.contentData.width;
let height = this.contentData.height;
if (width && height) {
let ratio = Math.min(width, height) / Math.max(width, height);
let w = Math.max(Math.min(width > height ? maxSize : ratio * maxSize, width), minSize);
let h = Math.max(Math.min(width > height ? ratio * maxSize : maxSize, height), minSize);
return `width: ${w}px;height:${h}px;object-fit: cover;`
} else {
// 兼容历史版本，历史数据没有记录宽高
return `max-width: ${maxSize}px;min-width:60px;max-height: ${maxSize}px;min-height:60px;`
}
}
}
}
@ -206,7 +223,7 @@ export default {
<style lang="scss">
.chat-message-item {
padding: 2px 10px;
padding: 3px 10px;
border-radius: 10px;
.message-tip {
@ -254,7 +271,7 @@ export default {
.message-content-wrapper {
position: relative;
display: flex;
align-items: center;
align-items: end;
.sending {
width: 25px;
@ -270,7 +287,7 @@ export default {
color: #e45050;
font-size: 30px;
cursor: pointer;
margin: 0 3px;
margin: 0 5px;
}
}
@ -302,22 +319,12 @@ export default {
}
.message-image {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
align-items: center;
.send-image {
min-width: 200px;
min-height: 150px;
max-width: 400px;
max-height: 300px;
border-radius: 8px;
border: 3px solid var(--im-color-primary-light-8);
overflow: hidden;
cursor: pointer;
}
}
.message-file {
display: flex;
flex-wrap: nowrap;
@ -460,7 +467,6 @@ export default {
}
.message-text {
margin-left: 10px;
background-color: var(--im-color-primary-light-2);
color: #fff;

2
im-web/src/store/chatStore.js
View File

@ -154,7 +154,6 @@ export default defineStore('chatStore', {
}
},
insertMessage(msgInfo, chatInfo) {
let time = new Date().getTime()
let type = chatInfo.type;
// 记录消息的最大id
if (msgInfo.id && type == "PRIVATE" && msgInfo.id > this.privateMsgMaxId) {
@ -230,7 +229,6 @@ export default defineStore('chatStore', {
chat.messages.splice(insertPos, 0, msgInfo);
chat.stored = false;
this.saveToStorage();
console.log("耗时:", new Date().getTime() - time)
},
updateMessage(msgInfo, chatInfo) {
// 获取对方id或群id

Write Preview
Loading…
Cancel
Save