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标头。）

JS |将arrayBuffer转换为Uint8ClampedArray的问题

1 个答案: