NodeJS 后端通过Http获取Base64格式数据显示图片 ②〇

                    ⡖⠒⠒⠒⠤⢄⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸   ⠀⠀⠀⡼⠀⠀⠀⠀ ⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢶⣲⡴⣗⣲⡦⢤⡏⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣰⠋⠉⠉⠓⠛⠿⢷⣶⣦⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⠇⠀⠀⠀⠀⠀⠀⠘⡇⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡞⠀⠀⠀⠀⠀⠀⠀⢰⠇⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⡴⠊⠉⠳⡄⠀⢀⣀⣀⡀⠀⣸⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢸⠃⠀⠰⠆⣿⡞⠉⠀⠀⠉⠲⡏⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠈⢧⡀⣀⡴⠛⡇⠀⠈⠃⠀⠀⡗⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣱⠃⡴⠙⠢⠤⣀⠤⡾⠁⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⢀⡇⣇⡼⠁⠀⠀⠀⠀⢰⠃⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⣸⢠⣉⣀⡴⠙⠀⠀⠀⣼⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⡏⠀⠈⠁⠀⠀⠀⠀⢀⡇⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢸⠃⠀⠀⠀⠀⠀⠀⠀⡼⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢸⠀⠀⠀⠀⠀⠀⠀⣰⠃⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⣀⠤⠚⣶⡀⢠⠄⡰⠃⣠⣇⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⢀⣠⠔⣋⣷⣠⡞⠀⠉⠙⠛⠋⢩⡀⠈⠳⣄⠀⠀⠀⠀⠀⠀⠀
⠀⡏⢴⠋⠁⠀⣸⠁⠀⠀⠀⠀⠀ ⠀⣹⢦⣶⡛⠳⣄⠀⠀⠀⠀⠀
⠀⠙⣌⠳⣄⠀⡇   不能   ⡏⠀⠀  ⠈⠳⡌⣦⠀⠀⠀⠀
⠀⠀⠈⢳⣈⣻⡇   白嫖 ⢰⣇⣀⡠⠴⢊⡡⠋⠀⠀⠀⠀
⠀⠀⠀⠀⠳⢿⡇⠀⠀⠀⠀⠀⠀⢸⣻⣶⡶⠊⠁⠀⠀
⠀⠀⠀⠀⠀⢠⠟⠙⠓⠒⠒⠒⠒⢾⡛⠋⠁⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⣠⠏⠀⣸⠏⠉⠉⠳⣄⠀⠙⢆⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⡰⠃⠀⡴⠃⠀⠀⠀⠀⠈⢦⡀⠈⠳⡄⠀⠀⠀⠀⠀⠀⠀
⠀⠀⣸⠳⣤⠎⠀⠀⠀⠀⠀⠀⠀⠀⠙⢄⡤⢯⡀⠀⠀⠀⠀⠀⠀
⠀⠐⡇⠸⡅⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠹⡆⢳⠀⠀⠀⠀⠀⠀
⠀⠀⠹⡄⠹⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣇⠸⡆⠀⠀⠀⠀⠀
⠀⠀⠀⠹⡄⢳⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢹⡀⣧⠀⠀⠀⠀⠀
⠀⠀⠀⠀⢹⡤⠳⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣷⠚⣆⠀⠀⠀⠀
⠀⠀⠀⡠⠊⠉⠉⢹⡀⠀⠀⠀⠀⠀⠀⠀⠀⢸⡎⠉⠀⠙⢦⡀⠀
⠀⠀⠾⠤⠤⠶⠒⠊⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠙⠒⠲⠤⠽   

前言

  1. Node.js是一个javascript运行环境。它让javascript可以开发后端程序,实现几乎其他后端语言实现的所有功能,可以与```PHP、Java、Python、.NET、Ruby等后端语言平起平坐。
  2. Nodejs是基于V8引擎,V8是Google发布的开源JavaScript引擎,本身就是用于Chrome浏览器的JS解释,但是Node之父 Ryan Dahl在这里插入图片描述把这V8搬到了服务器上,用于做服务器的软件。

BASE64

当需要储存图片到数据库时可以把图片转成Base64储存到数据库

前端开发

脚本演示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>前端</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script>

<body>
    <img src="" style="width: 500px;height: 500px;" alt="">
</body>

<script>
    const img = document.querySelector('img')
    axios({
    
    
        method: 'get',
        url: 'http://127.0.0.1:8000/getImg',
    }).then(reason => {
    
    
        img.src = reason.data
    })
</script>

</html>

后端开发

脚本演示

const express = require('express')
const app = express()

var http = require('https');

var url = 'https://img11.360buyimg.com/seckillcms/s280x280_jfs/t1/180903/7/34634/51291/6441090bF20d5d7bf/8b14975d08b54143.jpg'

let images = ''
http.get(url, function (res) {
    
    
    var chunks = [];
    var size = 0;
    res.on('data', function (chunk) {
    
    
        chunks.push(chunk);
        size += chunk.length;  //累加缓冲数据的长度
    });
    res.on('end', function (err) {
    
    
        var data = Buffer.concat(chunks, size);
        var base64Img = data.toString('base64');
        images = `data:image/png;base64,${
      
      base64Img}`
        // console.log(`data:image/png;base64,${base64Img}`);
    });
});

app.get('/getImg', (req, res) => {
    
    
    res.header('Access-Control-Allow-Origin', '*')
    res.send(images)
})
app.listen(8000)

异步代码

脚本演示

const express = require('express')
const app = express()

var http = require('https');

var url = 'https://img11.360buyimg.com/seckillcms/s280x280_jfs/t1/180903/7/34634/51291/6441090bF20d5d7bf/8b14975d08b54143.jpg'

async function imgUrlToBase64(url) {
    
    
    return new Promise(function (resolve, reject) {
    
    
        let req = http.get(url, function (res) {
    
    
            var chunks = [];
            var size = 0;
            res.on('data', function (chunk) {
    
    
                chunks.push(chunk);
                size += chunk.length;  //累加缓冲数据的长度
            });
            res.on('end', function (err) {
    
    
                var data = Buffer.concat(chunks, size);
                let base64Img = `data:image/png;base64,${
      
      data.toString('base64')}`;
                resolve({
    
     success: true, data: base64Img });
            });
        })
        req.on('error', (e) => {
    
    
            resolve({
    
     success: false, errmsg: e.message });
        });
        req.end();
    })
}

app.get('/getImg', async (req, res) => {
    
    
    let imgBaseData = await imgUrlToBase64(url)
    res.header('Access-Control-Allow-Origin', '*')
    res.send(imgBaseData)
})
app.listen(8000)

效果

在这里插入图片描述

总结

以上是个人学习Node的相关知识点,一点一滴的记录了下来,有问题请评论区指正,共同进步,这才是我写文章的原因之,如果这篇文章对您有帮助请三连支持一波

猜你喜欢

转载自blog.csdn.net/m0_61490399/article/details/130376455