草庐IT

javascript 从缓冲区将图像绘制到 html (nodejs/socket.io)

coder 2025-01-09 原文

(对不起我的英语) 嗨，我有一个用 nodejs 创建的应用程序，用于将图像数据推送到网页中。

使用socket.io将nodejs服务器的数据推送到网页

此数据为完整图像，我尝试写入光盘以查看图像并且很好。 数据被放入缓冲区以 base64 编码然后发送到网页，我尝试使用 'data:image/png;base64,'+数据 但什么也没发生……数据似乎是“完整的”，包括 PNG 图像的标题。

服务器使用 thrift 与另一个客户端(在 C++ 中)通信，该客户端创建图像并发送到 nodejs-thrift 服务器，当接收到图像时，nodejs-socket.io 服务器推送到网页。

一些代码: 服务器端

var http = require('http'),
url = require('url'),
fs  = require('fs'),
sys = require('sys');
var hserver = http.createServer(function(request,response){
var path = url.parse(request.url).pathname;
switch(path){
   case '/':

        fs.readFile(__dirname + '/index.html',function(err,data){
           if(err) return send404(res);
           response.writeHead(200,{'Content-Type':'text/html'});
           response.write(data,'utf8');
           response.end(); 
        });
    break;
    default: send404(response);
}
   }),
send404 = function(res){
 res.writeHead(404);
 res.write('404');
 res.end();
};

hserver.listen(8080);
var io = require('socket.io');
var socket = io.listen(hserver);
//this is the function in the Thrift part to send the image data to webpage using socket.io
var receiveImage = function(image,success){
buff= new Buffer(image.data.toString('base64'),'base64');
socket.broadcast({
    data: buff.toString('base64'),
    width: image.width,
    height: image.height
});
success(true);
}

在网页中，我尝试使用 socket.io 的 on.message 回调加载图像

<script>
var socket = new io.Socket(null,{port:8080});
socket.connect();
socket.on('message',function(obj){
        document.getElementById('imagenes').src='data:image/png;base64,'+obj.data.toString();
});
socket.on('connect',function(){         
    document.getElementById('stream').innerHTML = "Conectado!"
});
</script>

但是我看不到图片.. obj.data.toString('base64') 创建一个像这样的字符串:

 PNGIHDRKIDATxYw5L1LlFMM/migzWUadOadLUd+43PIfPU9VU5AJAg3dIWUmHAMajS8GUuq ............
 .............
 /NIlWDHUDmIPdHIEND

是图片的所有数据..

我怎样才能显示图像？？ (可能使用 img 标签或进入 Canvas )

提前致谢。

编辑:对代码进行了一些更改，但没有任何改变..我的猜测..图像没有显示，因为数据 (PNGIHDRKIDATxYw ......PdHIENDB) 不是正确的数据..我搜索这个和用于显示内联图像的 png 数据是不同的(没有标题 PNGIHDRKIDAT 和尾部 ENDB)，我删除了标题和尾部并且不显示..也许我收到的数据不正确，但如果我尝试使用 nodejs (fs) 写入服务器端的文件系统 我使用二进制获得正确的图像(使用 fs.writeFileSync("imagen.png",image.data.toString('binary'),'binary') )编码，但是使用 base64 编码没有图像。

最佳答案

在 C++ 端(我在其中创建图像并将它们发送到 nodejs 服务器)。我需要在 base64 中对数据进行编码。然后在 Node 中，我将这些数据放入带有 base64 编码的缓冲区中，并将其发送到网页。

关于javascript 从缓冲区将图像绘制到 html (nodejs/socket.io)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6208234/

javascriptnodejs39socketsectionnode.jssocket.io

有关javascript 从缓冲区将图像绘制到 html (nodejs/socket.io)的更多相关文章

  1. ruby-openid:执行发现时未设置@socket - 2

    我在使用omniauth/openid时遇到了一些麻烦。在尝试进行身份验证时，我在日志中发现了这一点:OpenID::FetchingError:Errorfetchinghttps://www.google.com/accounts/o8/.well-known/host-meta?hd=profiles.google.com%2Fmy_username:undefinedmethod`io'fornil:NilClass重要的是undefinedmethodio'fornil:NilClass来自openid/fetchers.rb，在下面的代码片段中:moduleNetclass

  2. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  3. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  4. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2

    所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择

  5. ruby - 如何验证 IO.copy_stream 是否成功 - 2

    这里有一个很好的答案解释了如何在Ruby中下载文件而不将其加载到内存中:https://stackoverflow.com/a/29743394/4852737require'open-uri'download=open('http://example.com/image.png')IO.copy_stream(download,'~/image.png')我如何验证下载文件的IO.copy_stream调用是否真的成功——这意味着下载的文件与我打算下载的文件完全相同，而不是下载一半的损坏文件？documentation说IO.copy_stream返回它复制的字节数，但是当我还没有下

  6. ruby-on-rails - Ruby url 到 html 链接转换 - 2

    我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.

  7. Ruby 文件 IO 定界符？ - 2

    我正在尝试解析一个文本文件，该文件每行包含可变数量的单词和数字，如下所示:foo4.500bar3.001.33foobar如何读取由空格而不是换行符分隔的文件？有什么方法可以设置File("file.txt").foreach方法以使用空格而不是换行符作为分隔符？ 最佳答案 接受的答案将slurp文件，这可能是大文本文件的问题。更好的解决方案是IO.foreach.它是惯用的，将按字符流式传输文件:File.foreach(filename,""){|string|putsstring}包含“thisisanexample”结果的

  8. ruby-on-rails - 添加回形针新样式不影响旧上传的图像 - 2

    我有带有Logo图像的公司模型has_attached_file:logo我用他们的Logo创建了许多公司。现在，我需要添加新样式has_attached_file:logo,:styles=>{:small=>"30x15>",:medium=>"155x85>"}我是否应该重新上传所有旧数据以重新生成新样式？我不这么认为……或者有什么rake任务可以重新生成样式吗？ 最佳答案 参见Thumbnail-Generation.如果rake任务不适合你，你应该能够在控制台中使用一个片段来调用重新处理!关于相关公司

  9. ruby-on-rails - capybara ::ElementNotFound:无法找到 xpath "/html" - 2

    我正在学习http://ruby.railstutorial.org/chapters/static-pages上的RubyonRails教程并遇到以下错误StaticPagesHomepageshouldhavethecontent'SampleApp'Failure/Error:page.shouldhave_content('SampleApp')Capybara::ElementNotFound:Unabletofindxpath"/html"#(eval):2:in`text'#./spec/requests/static_pages_spec.rb:7:in`(root)'

  10. Get https://registry-1.docker.io/v2/: net/http: request canceled while waiting - 2

    1.错误信息：Errorresponsefromdaemon:Gethttps://registry-1.docker.io/v2/:net/http:requestcanceledwhilewaitingforconnection(Client.Timeoutexceededwhileawaitingheaders)或者：Errorresponsefromdaemon:Gethttps://registry-1.docker.io/v2/:net/http:TLShandshaketimeout2.报错原因：docker使用的镜像网址默认为国外，下载容易超时，需要修改成国内镜像地址（首先阿里

随机推荐