diff --git a/im-platform/src/main/java/com/bx/implatform/service/impl/FileServiceImpl.java b/im-platform/src/main/java/com/bx/implatform/service/impl/FileServiceImpl.java index f509e35..171bef7 100644 --- a/im-platform/src/main/java/com/bx/implatform/service/impl/FileServiceImpl.java +++ b/im-platform/src/main/java/com/bx/implatform/service/impl/FileServiceImpl.java @@ -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 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()); diff --git a/im-platform/src/main/java/com/bx/implatform/vo/UploadImageVO.java b/im-platform/src/main/java/com/bx/implatform/vo/UploadImageVO.java index f58114f..671fe9a 100644 --- a/im-platform/src/main/java/com/bx/implatform/vo/UploadImageVO.java +++ b/im-platform/src/main/java/com/bx/implatform/vo/UploadImageVO.java @@ -12,4 +12,10 @@ public class UploadImageVO { @Schema(description = "缩略图") private String thumbUrl; + + @Schema(description = "图片宽度") + private int width; + + @Schema(description = "图片高度") + private int height; } diff --git a/im-uniapp/components/chat-message-item/chat-message-item.vue b/im-uniapp/components/chat-message-item/chat-message-item.vue index 113ae21..1ab6846 100644 --- a/im-uniapp/components/chat-message-item/chat-message-item.vue +++ b/im-uniapp/components/chat-message-item/chat-message-item.vue @@ -27,9 +27,8 @@ - + @@ -39,8 +38,8 @@ - + {{ fileSize }} @@ -52,7 +51,7 @@ @select="onSelectMenu"> - {{ JSON.parse(msgInfo.content).duration + '"' }} + {{ contentData.duration + '"' }} @@ -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; } } diff --git a/im-uniapp/pages/chat/chat-box.vue b/im-uniapp/pages/chat/chat-box.vue index edd21c1..0f1e278 100644 --- a/im-uniapp/pages/chat/chat-box.vue +++ b/im-uniapp/pages/chat/chat-box.vue @@ -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)); diff --git a/im-web/src/components/chat/ChatBox.vue b/im-web/src/components/chat/ChatBox.vue index 3bd0ab6..100e692 100644 --- a/im-web/src/components/chat/ChatBox.vue +++ b/im-web/src/components/chat/ChatBox.vue @@ -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)); diff --git a/im-web/src/components/chat/ChatMessageItem.vue b/im-web/src/components/chat/ChatMessageItem.vue index ec8968a..a59a3d2 100644 --- a/im-web/src/components/chat/ChatMessageItem.vue +++ b/im-web/src/components/chat/ChatMessageItem.vue @@ -21,18 +21,19 @@
-
-
+
- +
{{ data.name }} + :href="contentData.url" :download="contentData.name">{{ contentData.name + }}
{{ fileSize }}
@@ -44,7 +45,7 @@ @click="onPlayVoice()">
-
+
@@ -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 {