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 天了，我在网上找不到任何可以帮助我的东西，我也尝试了很多东西，但 none 其中有效果。

如有任何帮助，我将不胜感激

编辑：

我的后端：

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; if not you want to make it one. See the Express.js documentation for send。（当你给它一个 Buffer 时，它将处理为你发送 Content-Type: application/octet-stream header。）

JS |将 arrayBuffer 转换为 Uint8ClampedArray 的问题

JS | Issues converting arrayBuffer to Uint8ClampedArray

javascript

canvas

arraybuffer

react-redux