html实现可以发送图片的聊天室,在消息中图片会被缩放到合适的大小,点击图片会弹出弹窗,里面有图片原来的大小,包含下载变大变小等功能,可以关闭弹窗源码
时间: 2024-05-06 10:16:22 浏览: 6
以下是一个简单的实现可发送图片的聊天室的HTML代码,其中包含了图片缩放和弹窗功能:
```
<!DOCTYPE html>
<html>
<head>
<title>Image Chat Room</title>
<style>
#chatbox {
width: 70%;
height: 400px;
border: 1px solid black;
overflow-y: scroll;
margin-bottom: 10px;
}
#chatbox img {
max-width: 100%;
height: auto;
cursor: pointer;
}
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.9);
}
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
height: auto;
}
.modal-content img {
width: 100%;
height: auto;
margin-bottom: 10px;
}
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<div id="chatbox"></div>
<input type="file" id="fileInput">
<button onclick="sendImage()">Send</button>
<div id="myModal" class="modal">
<span class="close" onclick="closeModal()">×</span>
<div class="modal-content">
<img id="modalImg">
<div>
<button onclick="downloadImage()">Download</button>
<button onclick="zoomIn()">+</button>
<button onclick="zoomOut()">-</button>
</div>
</div>
</div>
<script>
var chatbox = document.getElementById("chatbox");
var fileInput = document.getElementById("fileInput");
var modal = document.getElementById("myModal");
var modalImg = document.getElementById("modalImg");
var currentImg;
function sendImage() {
var file = fileInput.files[0];
var reader = new FileReader();
reader.onload = function(event) {
var img = document.createElement("img");
img.src = event.target.result;
img.onclick = function() {
openModal(this);
}
chatbox.appendChild(img);
}
reader.readAsDataURL(file);
}
function openModal(img) {
currentImg = img;
modalImg.src = img.src;
modal.style.display = "block";
}
function closeModal() {
modal.style.display = "none";
}
function downloadImage() {
if (currentImg) {
var link = document.createElement("a");
link.href = currentImg.src;
link.download = "image.jpg";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
}
function zoomIn() {
if (currentImg) {
currentImg.style.width = currentImg.offsetWidth * 1.2 + "px";
}
}
function zoomOut() {
if (currentImg) {
currentImg.style.width = currentImg.offsetWidth / 1.2 + "px";
}
}
</script>
</body>
</html>
```
以上代码实现了以下功能:
- 用户可以选择本地图片文件并发送到聊天室中;
- 聊天室中的图片会自动缩放到适当的大小;
- 用户可以点击图片弹出弹窗;
- 弹窗中包含了原始大小的图片以及下载、缩放等功能;
- 用户可以关闭弹窗。
你可以将以上代码保存为一个HTML文件,然后在浏览器中打开该文件查看效果。