JS |将arrayBuffer转换为Uint8ClampedArray的问题

Question

今天我有一个问题，我无法从服务器的响应中将ArrayBuffer转换为Uint8ClampedArray（imageData）。

因此，对于测试，我从150 * 300图像发送到我的服务器blob，我将其转换为我的后端缓冲区然后处理它，就在我发回数据之前，我记录它并看到一切都很好（数据是应该是什么，长度是150 * 300 * 4：180000），所以我将它发送回我的前面，将响应作为arrayBuffer使用，这里事情开始变得混乱：我最终得到了多个数组，当我想要创建一个新的imageData我得到错误，因为我的长度不再好。

这是我的代码：

export const edit = e => dispatch => {
  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]))
  console.log(...formData)
  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)
    console.log(data)
    const newImg = new ImageData(data, payload.width, payload.height)
    return newImg
  })
  .then(img => {
    const ctx = document.getElementById('canvas').getContext('2d')
    console.log(img)
    ctx.putImageData(img, 0, 0)
  })
  .catch(err => console.log(err))

已经4天了，我被困在这上面，我在网上找不到任何可以帮助我的东西，我还尝试了很多东西，但没有一个能正常工作。

我将不胜感激任何帮助

编辑：

我的后端：

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)
    })
  })
})

响应网络选项卡：

{type: "Buffer",…}
data: [255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0,…]
type: "Buffer"

Answer 1

您正在发送JSON：

return res.status(200).json(imgProcessed)

这意味着您要发送文本，而不是二进制数据。

您可能只想发送数据：

return res.status(200).send(imgProcessed)
// --------------------^^^^

我假设imgProcessed是Buffer;如果不是你想成为一个。有关send的信息，请参阅Express.js文档。 （当你给它一个Content-Type: application/octet-stream时，它将处理为你发送Buffer标题。）