时间戳

首页 > 解决方案 > React/Node 无法将 ImageData 发送到服务器

node.js - React/Node 无法将 ImageData 发送到服务器

问题描述

我有一个问题，我有一些问题将画布的 imageData 发送到我的服务器来处理它。

这是我发送数据的 react/redux 操作：

export const edit = (e) => dispatch => {
  let payload = store.getState().image.imageData
  payload = payload[payload.length-1]
  console.log(payload)
  const id = e.target.id ? e.target.id : e.target.parentElement.id
  fetch(`/api/editing/${id}`, {
    method: 'POST',
    // headers: {
    //   "Content-Type": "application/json"
    // },
    body: JSON.stringify({ imgData: payload })
  })
  .then(res => res.json())
  .then(json => {
    dispatch({ type: UPDATE_IMAGE, payload: json.imgData })
    // handle response display
  })
}

这是我处理请求的方式：

const traitement = require('../../processing/traitement')

router.post('/:type', (req, res) => {
  const { imgData } = req.body
  const method = req.params.type
  const imgDataProcessed = traitement[method](imgData)
  return res.status(200).json({ imgData: imgDataProcessed })
})

这是一个特征方法的示例：

negatif: function(imgData) {
  console.log(imgData)
  var n = imgData.data.length;
  for(i=0; i<n; i+=4){
    imgData.data[i] = 255 - imgData.data[i];
    imgData.data[i+1] = 255 - imgData.data[i+1];
    imgData.data[i+2] = 255 - imgData.data[i+2];
    imgData.data[i+3] = 255;        
  }
  return imgData;
},

就在我发送之前的console.log()（我希望发送的内容）：

ImageData {data: Uint8ClampedArray(180000), width: 300, height: 150}
data: Uint8ClampedArray(180000) [0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 
  255, 255, 0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255, 
  255, 0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255, 255, 0, 
  0, 255, 255, 0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255, 
  255, 0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255, 255, 0, 
  0, 255, 255, 0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255, 
  255, …]
height: 150
width: 300
__proto__: ImageData

我无法粘贴从服务器获取的内容，但我丢失了宽度、高度键，typeof 是 Object 而不是 ImageData，数据键是 typeof Object 而不是 Uint8ClampedArray。

所以我的问题是：我怎样才能让我的路线访问我发送的相同数据，以便我能够处理它？

如您所见，我将它们作为字符串化 json 发送，并且我的服务器上有一个 json bodyparser 中间件，也许它来自那里。我也关于内容类型标题

编辑：感谢 Kaiido，我已经修改了我的代码，这似乎在 1 exeption 工作

我如何修改我的代码，前面：

  let payload = store.getState().image.imageData
  payload = payload[payload.length-1]
  const id = e.target.id ? e.target.id : e.target.parentElement.id;
  console.log(payload)
  const meta = {
    width: payload.width,
    height: payload.height
  }
  const formData = new FormData();
  formData.append("meta", JSON.stringify(meta));
  formData.append("data", new Blob([payload.data.buffer]))
  fetch(`/api/editing/${id}`, {
    method: "POST",
    body: formData
  })
  .then(res => res.arrayBuffer())
  .then(buffer => {
    console.log(buffer)
    const data = new Uint8ClampedArray(buffer)
    console.log(data.length)
    const newImg = new ImageData(data, payload.width, payload.height)
    return newImg
  })

背部：

router.post('/:type', (req, res) => {
  let form = new formidable.IncomingForm()
  form.parse(req, (err, fields, files) => {
    fs.readFile(files.data.path, (err, data) => {
      const imgProcessed = traitement[req.params.type](data)
      console.log(imgProcessed.length)
      return res.status(200).json([imgProcessed])
    })
  })
})

剩下 1 个问题：假设我使用 150*300px 的图像进行测试，我的数据数组应该是 180000 长（300*150*4），直到我发送服务器的响应。当前端收到它调用的响应时，res.arrayBuffer() 它会创建一个新的 Uint8ClampedArray 但在这种情况下我的长度不再是 180000 而是 543810。正如 Kaiido 所说，我可能想对那个数组进行切片，我试过了，但没有用。

我应该怎么切？180000个第一个？180000持续一个？其他方式？

标签： node.jsreactjscanvasreduximagedata

解决方案

做

const { imgData } = JSON.parse(req.body)

JSON.stringify这与您通过 stringify 发送数据但在路由中未将其解析回原始对象时相反并且需要。

推荐阅读