Сегодня у меня возникла проблема, когда я не могу преобразовать ArrayBuffer в Uint8ClampedArray (imageData) из ответа моего сервера.
Итак, для тестирования я отправляю на свой серверный блоб из изображения 150 * 300, я конвертирую его в буфер на своем бэкэнде, затем обрабатываю его, перед тем как отправлять обратно данные, я регистрирую его и вижу, что все хорошо (данные должны быть такими, какими они должны быть, а длина равна 150 * 300 * 4: 180000), поэтому я отправляю их обратно на фронт, получаю ответ в виде arrayBuffer, и здесь все начинает портиться: в результате я получаю несколько массивов, и когда Я хочу создать новое изображение. Я получаю ошибки, потому что моя длина больше не хороша.
Вот мой код:
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 дня, я застрял на этом, и я не могу найти в Интернете ничего, что могло бы мне помочь, я тоже попробовал кучу вещей, но ни одна из них не работает.
Буду признателен за любую помощь
EDIT:
мой бэкэнд:
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"