在来自客户端的输入图像上使用Jimp

问题描述

我正在尝试通过一个简单的输入文件从React中获取图像，并在Express服务器上使用Jimp调整其大小，然后对其进行其他处理。问题是我无法使用Jimp读取图像，因为它需要String或Buffer或ArrayBuffer，并且输入图像是File类型。我已经尝试将文件转换为缓冲区，但没有成功。我该如何使Jimp毫无问题地阅读它？

我将在此处编写与该问题相关的代码，中间肯定还有其他事情不会妨碍Jimp，因为在调用之前文件是完整的Jimp.read（）。

反应

const onInputFile = (e) => {
  let file = e.target.files[0];
  const formData = new FormData();
  formData.append("signature",signature.file,signature.file.fileName);
  formData.append("id",props.art.id);
  axios
    .post("http://localhost:9000/createpdf",formData,{
      headers: {
        "Content-Type": "multipart/form-data",authorization: props.userData.token,},})
    .then(res => {
      console.log(res);
    })
    .catch(err => {
      console.log(err);
    });
};

return(
  <div>
  <input
    type="file"
    id="inputFileID"
    onChange={onInputFile}
    name="inputFileName"
  />
  </div>
);

快递

app.post("/createpdf",async (req,res) => {
  // I'm using formidable module to get the FormData from the request
  // Just skipping that part,it works,I'll call the file "myImageFile"
  
  res.status(200).json({ status: "ok" });

  await Jimp.read(myImageFile) // Error in this line
    .then(resultImg => {
      resultImg.scale()
        .getBufferAsync(Jimp.MIME_JPEG)
        .then(finalImg => {
          // Upload finalImg to Cloud
        })
        .catch(err => {
          console.log(err);
        });
    })
    .catch(err => {
      console.log(err);
    });
});

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）