如何将图像显示给另一个客户 1 小时并让他选择保存图像

Posted

技术标签:

【中文标题】如何将图像显示给另一个客户 1 小时并让他选择保存图像【英文标题】：How can i display an image to another client for 1 hour and give him the option to save the image 【发布时间】：2022-01-21 11:26:24 【问题描述】：

我是 node.js 的新手，我正在尝试制作一个简单的分享图片应用程序，我的问题是： 对于服务器，我在第 13 行收到一个错误，上面写着“require(...).listen is not a function” 以及当我作为客户端上传图片时，我如何实现这一点，其他客户端可以看到该图片 1 小时，并且在那 1 小时内他们可以保存它，如果他们想要其他客户端可以添加新图片而不是已添加，以便其他客户端可以保存并查看它。 我的主要目标是： 前端：允许客户拍照并在特定时间上传。 时机成熟时，您需要向打开您网站的任何人展示图片。 后端：这允许您的每个客户拍照并保存，直到时间用完并向所有客户展示照片。

我的代码： 服务器在第 13 行出现我无法解决的错误

var express = require("express");
var app = express();
var http = require('http');
var fs = require('fs');

var server = http.createServer(function(req, res) 
fs.readFile('./index.html', 'utf-8', function(error, content) 
res.writeHead(200, "Content-Type": "text/html");
res.end(content);
);
);

var io = require('socket.io').listen(server);

io.sockets.on('connection',function(socket)
    socket.on('user image',function (image)
       io.sockets.emit('addimage', 'src' :image);
    );
 );

app.get('/',function (req,res) 
    res.render('index');
)

server.listen(8080,function () 
    console.log('listen port 8080')
)

html页面：

<!DOCTYPE html>
   <html>
   <head>
      <meta charset=utf-8 />
      <title>Upload your Image</title>
      <style>
       article, aside, figure, footer, header, hgroup, 
       menu, nav, section  display: block; 
      </style>
   </head>
    <body>
        <div><input type='file' onchange="readURL(this);" /></div></b>
        <div><img id="img" src="" /></div> 
        <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
        <script src="/socket.io/socket.io.js"></script>
        <script> 

         var socket = io.connect('http://localhost:8080');

         socket.on('addimage',function(msg)
            //reading src property from msg as per changes
            $('#img')
                .attr('src', msg.src)
                .width(800)
                .height(400);
);

function readURL(input) 
    if (input.files && input.files[0]) 
        var reader = new FileReader();

        reader.onload = function (e) 
            $('#img')
                .attr('src', e.target.result)
                .width(800)
                .height(400);
             socket.emit('user image', e.target.result);
        ;

        reader.readAsDataURL(input.files[0]);
    

  </script>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  </body>
  </html>

【问题讨论】：

【参考方案1】：

在你的 JS 中， 尝试使用：

var server = http.createServer(app);

在第 13 行：

var  Server  = require("socket.io");
var io = new Server(server);

而不是：

io.sockets.on('connection',function(socket)
  socket.on('user image',function (image)
    io.sockets.emit('addimage', 'src' :image);
  );
);

尝试使用：

io.on('connection', function(socket) 
  socket.on('user image', function(image) 
    io.emit('addimage', 'src' :image);
  );
);

编辑：另外，要为客户提供您的主页，请在 app.get("/", function(req, res) ...) 中尝试此操作

app.get('/', function(req, res) 
  res.sendFile(__dirname + '/index.html');
);

在您的 HTML 文件中的内部 JS 中：

var socket = io('http://localhost:8080');

// if above does not work, try the below instead:
var socket = io();

我不知道它是否会帮助你，但希望它会。但是，您可能需要更改一些代码才能使用以下建议。

这些建议基于 Socket.io 文档。此外，您可能希望查看他们关于构建聊天应用程序的示例。可能会对您有所帮助：

参考

    Socket.io Documentation Chat Application

【讨论】：

嘿服务器本身加载，但它不显示任何 html 都希望得到您的帮助来修复它，非常感谢先生 嗨，@dezlight，我已经编辑过了。如果您在app.get("/", ...) 中使用res.sendFile(__dirname + '/index.html');，它应该会显示主页。它对你有用吗？

以上是关于如何将图像显示给另一个客户 1 小时并让他选择保存图像的主要内容，如果未能解决你的问题，请参考以下文章

如何将图像连接到另一个 ViewController 并在 ImageView 中显示它？

如何使用Swift选择图像的一部分，裁剪并保存？

Flutter：如何将值从 streamprovider / listview builder 传递给另一个类

jsoup怎么解析html中的图片并让他在listview中显示

如何将图像保存到自定义相册？

如何将图像保存到自定义相册？