JS |将 arrayBuffer 转换为 Uint8ClampedArray 的问题答案

【问题标题】：JS | Issues converting arrayBuffer to Uint8ClampedArrayJS |将 arrayBuffer 转换为 Uint8ClampedArray 的问题
【发布时间】：2019-09-04 17:57:27
【问题描述】：

今天我遇到了一个问题，我无法将服务器响应中的 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"

【问题讨论】：

这不是问题，但您在fetch 通话中错过了一步。错过它真的很常见，所以我把它写在my anemic little blog。您需要检查响应是否正常（response.ok）。（同样，这不是问题。只是一个问题。）
如果没有更多信息，包括您如何发送数据的详细信息，我怀疑我们能否为您提供帮助，这很可能是问题所在。我建议使用一个小得多的图像，只有几个字节，然后显示发送它的服务器代码，以及“网络”选项卡中的数据是什么样的，等等。

标签： javascript canvas react-redux arraybuffer

【解决方案1】：

您正在发送 JSON：

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

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

您可能只想发送数据：

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

我假设imgProcessed 是Buffer；如果不是，你想成为一个。请参阅 send 的 Express.js 文档。（当您给它一个Buffer 时，它会为您发送Content-Type: application/octet-stream 标头。）

【讨论】：