0
기본적으로 웹 사이트의 캡쳐 화면을 캡쳐하고 동시에 브라우저의 로컬 저장소에 저장하려고합니다. 그래서 webshot (phpmyjs 주위의 npm 패키지와 light wrapper)의 도움을 받고 있습니다. 그러나 res.send()는 클라이언트에 전체 데이터를 보낼 수 없습니다. 이것이 내 이미지가 기본 이미지의 25 %로 나타나는 이유입니다.이 이미지는 base64로 인코딩 된 문자열 중 일부만 보냅니다. specificData는 webshot에 의해 반입 된 실제 버퍼 데이터의 base64로 인코딩 된 문자열이 전체적으로 클라이언트으로 전송되지 않습니다. 다음은 내 서버 측 코드res.send()는 전체 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");});
다음은 GET 요청이 클라이언트에서 수신 될 때 전송됩니다 내 인덱스 파일이 있습니다. 그런 다음 resident()의 단점으로 인해 서버에서 수신 된 청크 인 실제로 인 서버에서 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>