如何将调整大小的图像从锐利发送回用户？答案

【问题标题】：How to send the resized image from sharp back to user?如何将调整大小的图像从锐利发送回用户？
【发布时间】：2021-04-20 17:11:33
【问题描述】：

我正在尝试通过SharpJS 制作图像大小调整 API，我的代码如下所示

require('dotenv').config();

const express = require('express');
const sharp = require('sharp');
const cors = require('cors');
const formidable = require('formidable');

const app = express();
app.use(cors());

app.use(express.json());

app.post('/file', async (req, res) => {
    const form = formidable();
    form.parse(req, (err, fields, files) => {
        if (err) {
            next(err);
            return;
        }
        const imageInput = files.image.path;
        sharp(imageInput)
            .resize(128, 128)
            .toBuffer()
            .then((data) => {
                console.log(data);
                res.end(data)
            })
            .catch((err) => console.log(err));
    });
});
app.listen(4000);

我真正想知道的是如何将调整大小的图像返回给客户端而不将其实际保存在服务器磁盘中？ data 是缓冲区的形式，如下所示，如何将其转换回文件，以便用户可以获取他们的图像并自动下载。

// console.log(data)
<Buffer 89 50 4e 47 0d 0a 1a 0a 00 00 00 0d 49 48 44 52 00 00 00 80 00 00 00 80 08 06 00 00 00 c3 3e 61 cb 00 00 00 09 70 48 59 73 00 00 0b 13 00 00 0b 13 01 ... 12835 more bytes>

我的反应代码

import React, {useState} from 'react'
import axios from 'axios'
function App() {
  const [state, setState] = useState({
    file: null
  })
  const fileHandler = e => {
    console.log(e.target.files[0]);
    setState({...state, file: e.target.files[0]})

  }
  const fileUploader = () => {
    const formData = new FormData()
    formData.append('image', state.file, state.file.name);
    axios.post('http://localhost:4000/file',formData).then((res) => {
      console.log(res.data)
    }).catch((err) => {
      console.error(err)
    })
  }
  return (
    <div className="App">
      <input type="file" onChange={fileHandler} />
      <button onClick={fileUploader}>Send File</button>
    </div>
  );
}
export default App;

【问题讨论】：

标签： node.js reactjs axios fs sharp

【解决方案1】：

您也可以在没有json() 的情况下使用它。分享以防万一。

router.get('/image', async (req, res, next) => {
    sharp(input)
        .resize(512, 512)
        .png()
        .toBuffer()
        .then(data => res.type('png').send(data))
})

经过测试。似乎工作正常。

【讨论】：

【解决方案2】：

好的，我问了这个问题并自己找到了答案。

我发现为了将调整大小的图像发送回用户而不使用fs 模块将图像保存在服务器的磁盘存储中，我所做的是将buffer 转换为base64在浏览器中将其转换回blob，因为我们无法在nodejs 中创建blob

sharp(imageInput)
            .resize(512, 512)
            .png()
            .toBuffer()
            .then((data) => {
                
                const base64Data = data.toString('base64');

                // const blobData = `data:${contentType};base64,${base64Data}`

                res.status(202).json({ b64Data: base64Data, contentType: contentType, extension:'png'});
                // res.send(base64Data)
            })
            .catch((err) => console.log(err));

然后我使用这两个库 b64-to-blob 和 js-file-download 为我完成剩下的工作，如下所示：

// In App.js
import fileDownload from 'js-file-download';
import b64toBlob from 'b64-to-blob'; //importing these two in react

        axios
            .post('http://localhost:4000/file', formData)
            .then((res) => {
                const data = res.data;
                // console.log(data);
                const blob = b64toBlob(data.b64Data, data.contentType);
                // console.log(blob);
                const [ fileName ] = state.file.name.split('.');
                fileDownload(blob, `${fileName}-resized.${data.extension}`);
            })
            .catch((err) => {
                console.error(err);
            });

最后，我得到了我需要的东西：一张调整大小的图片

【讨论】：