Question

基本上，我正在尝试捕获网站的屏幕截图，同时尝试将它们存储到浏览器的本地存储中。所以我正在接受webshot的帮助（这是一个npm包和一个围绕phantomjs的光包装）。但不幸的是，res.send（）无法将整个数据发送到客户端。这就是为什么我的图像只显示原始图像的25％，因为它只发送一些base64编码的字符串。 specificData是webshot提取的实际缓冲区数据的base64编码字符串，不会全部发送到客户端。 以下是我的服务器端代码

const express = require("express");
const app = express();


let webshot = require('webshot');
let specificData;

app.get('/',(req,res)=>{
    res.send("let's get started");
});

app.get('/imageViewer',(req,res)=>{
    res.sendFile(__dirname+'/index.html');
});

app.get('/storeImageToLocalStorage',(req,res,next)=>{
    let renderStream = webshot('stackoverflow.com');
    renderStream.on('data', function(data) {
        specificData=data.toString('base64');
        next();
    });
},(req,res)=>{
    res.send(specificData);
});

app.listen(5676,()=>{
console.log("listening at http://localhost:5676");});

以下是我从客户端收到请求时发送的索引文件。然后，由于res.send（）的缺点，从服务器获取specificData，该服务器实际上是从服务器端接收的块。我已经在网上搜索了如何解决这个问题，但我找不到任何相关的解决方案。这就是为什么我转向stackoverflow来回答我的问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script
            src="https://code.jquery.com/jquery-3.2.1.js"
            integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
            crossorigin="anonymous">
    </script>
</head>
<body>
<img id="tableBanner" style="height: 40vh;width: 40vw">
<script>
    $(()=>{
        let bannerImg = document.getElementById('tableBanner');
        $.get('/storeImageToLocalStorage',(specificData)=>{
            localStorage.setItem('specificData',specificData);
            bannerImg.src = 'data:image/png;base64,'+localStorage.getItem('specificData');
        });

    });
</script>
</body>
</html>

Answer 1

这是因为您每次收到数据时都会覆盖并在第一块数据接收时传递给下一个中间件：

renderStream.on('data', function(data) {
        specificData += data.toString('base64');  //append
});

//calling next() when data has stopped listening
renderStream.on('end', function() {
       next();
})

res.send（）无法将整个base64字符串发送到客户端

1 个答案: