将服务器端的图片保存到本地

要使用到的工具有base64转换器base64

服务器端发送数据给前端

后端代码：

...
else if(path === "/getAvatar" && method === "GET"){
    const state=getOption(response,request)
    if(state[1].landed){
      response.setHeader("Content-Type", "binary" );
      var stream = fs.createReadStream( "./assert/avatar.png" );
      var responseData = [];                           
      if (stream) {                                       
          stream.on( 'data', function( chunk ) {
            responseData.push( chunk );
          });
          stream.on( 'end', function() {
             var finalData = Buffer.concat( responseData );
            
             response.write(Base64.encode(finalData) ,"binary");
             response.end();
          });
      }
    }
 ....

图片读取的数据数据可以在后端用base64编码也可以直接发给前端，前端再进行base64编码

前端代码

  request("/getAvatar", "GET").then((res) => {       //获取头像
    const img=document.createElement("img")
    img.src="data:image/png;base64,"+res        //"data:image/png;base64“这个必须加在响应数据后面不然报错
    document.body.appendChild(img)
  })

这样就可以显示图片了

扩展

数据拿到后可以存到window.localStorage作为缓存

1. base64编码简介
   Base64是一种可逆的编码方式，简单来讲就是一种将64个Ascii字符来表示成二进制数据的方法。主要用于将不可打印的字符转换成可打印字符，或者简单的说将二进制数据编码成Ascii字符。Base64是网络上最常用的传输8bit字节数据的编码方式之一。特别适合在http，mine协议下快速传输数据。
2. 图片转换成base64编码的意义
   图片的base64编码就是可以将一幅图片数据编码成一串字符串，使用该字符串代替图片地址。我们所看到的网页上的每个图片都是需要消耗一个http请求下载而来的。也就是说图片的下载始终是要向服务器发出请求的，而base64可以解决的是在HTML下载的同时图片可同时下载到本地。