0

我有一个问题，我有一些问题将画布的 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持续一个？其他方式？

4

2 回答 2

1

做

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

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

于 2019-04-10T20:28:55.370 回答
1

JSON 只处理很少的类型：字符串、数字、数组、对象、布尔值和 null。

没有可枚举属性的 ImageData 将JSON.stringified为"{}"一个空对象。

const img = new ImageData(6, 6);
img.data.fill(0xFF);
console.log('JSON', JSON.stringify(img)); // "{}"

const props = Object.getOwnPropertyDescriptors(img);
console.log('own properties', props); // {}

你会丢失所有信息。因此，为了避免这种情况，您必须在请求中手动发送所有这些。
将所需的值简单地移动到另一个对象听起来很容易：

const img = new ImageData(6,6);
const dataholder = (({width, height, data}) => ({width, height, data}))(img);

console.log(JSON.stringify(dataholder));

但是，您会注意到data属性没有以正确的方式进行字符串化。

事实上，当JSON.stringified被转换为一个简单对象时，一个 TypedArray，它的所有索引都设置为键。原本应该只占用 144 字节来表示 6px*6px 图像数据的内容现在占用了 1331 字节。 

const typedArray = new Uint8ClampedArray(6*6*4).fill(0xFF);

console.log(JSON.stringify(typedArray));

const as_string = new Blob([JSON.stringify(typedArray)]);
const as_arraybuffer = new Blob([typedArray]);

console.log('as string', as_string.size, 'bytes');
console.log('as arraybuffer', as_arraybuffer.size, 'bytes');

我会让你为更大的图像做数学，但你可能会考虑另一种方法......

与其发送此 Uint8ClampedArray 的字符串化版本，不如发送其底层 ArrayBuffer。这听起来可能需要您编写更多代码，但您将节省带宽，甚至可能节省树木。

所以要将你的 ImageData 发送到你的服务器，你会做

const img = new ImageData(6, 6);
img.data.fill(0xFF);

const meta = {
  width: img.width,
  height: img.height
  // add more metadata here if needed
};
const formdata = new FormData();
formdata.append("meta", JSON.stringify( meta ))
formdata.append("data", new Blob([img.data.buffer]));

console.log(...formdata); // [key, value], [key, value]
// here data is a File object and weights only 144 bytes

/* // send the formdata to your server
fetch('yoururl', {
  method: 'POST',
  body: formdata
})
.then(response => response.arrayBuffer())
... // we'll come to it later
*/

现在在您的服务器上，为了检索请求的所有部分，您必须获取表单数据内容，并以文件上传的形式访问图像的数据。

然后，您必须读取这个上传的文件（例如，使用fs.readFile(temp_path)并直接从返回的 Buffer 中执行操作（因为节点中的 Buffers 是 Uint8Array）。

完成操作后，您可以直接将此修改后的 Buffer 作为响应发送。

现在在前面，您只需要请求将 Response 作为 ArrayBuffer 使用，并从此 ArrayBuffer 生成新的 ImageData：

//... see above
fetch('yoururl', {
  method: 'POST',
  body: formdata
})
// request as ArrayBuffer
.then(response => response.arrayBuffer())
.then(buffer => {
  // create a new View over our ArrayBuffer
  const data = new Uint8ClampedArray(buffer);
  const new_img = new ImageData(data, img.width, img.height);
  return new_img;
});

这里假设您的前端不需要来自服务器响应的元数据（因为您已经拥有它）。
如果您需要一些元数据，那么您可以在 ArrayBuffer 响应的开头添加它（分配一个插槽以让您知道它的大小，然后slice()您收到的 Array 以便同时获取元数据和实际的图像数据。

于 2019-04-11T01:40:28.310 回答