如何将调整后的图像从 sharp 发送回用户？

Question

我正在尝试通过 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);

我真正想知道的是如何 return 将调整后的图像发送给客户端而不实际将其保存在服务器磁盘中？ data是buffer的形式，如下图，请问如何将其转换回文件，以便用户获取图片并自动下载。

// 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>

我的 React 代码

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;

Answer 1

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

我发现，为了将调整后的图像发送回用户而不使用 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 and 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);
            });

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

Answer 2

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

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

已测试。似乎工作正常。

如何将调整后的图像从 sharp 发送回用户？

How to send the resized image from sharp back to user?

node.js

reactjs

axios

fs

sharp