Me gustaría convertir una respuesta de imagen almacenada en búfer, desde una solicitud de recuperación realizada, a datos de imagen o datos de píxeles, generalmente almacenados en un Unit8ClampedArray como lo demuestra la API de Canvas. Dado que puedo convertir el búfer a base64 y devolver un URI de datos que se puede usar para ver la imagen, creo que debería ser posible lograr mi objetivo; sin embargo, no pude encontrar nada en línea.

Esperaba que la respuesta del búfer estuviera en el orden correcto, 4 elementos de matriz por píxel: rgba; sin embargo, como estoy seguro de que puedes darte cuenta, no es tan fácil.

Estos son los datos de imagen a los que me refiero:

 let imageData = new ImageData(100, 100); console.log(imageData.data); // Uint8ClampedArray[40000] console.log(imageData.data.length); // 40000

Me faltaban innumerables píxeles, o tal vez no estaban en el orden correcto. El resultado no era lo que yo quería ni se parecía en nada a la imagen que se suponía que debía mostrar.

Aquí hay una parte de mi código para ayudarlo a comprender mejor mis problemas:

 async drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) { image = await RequestHandler.ajax(image, { headers: { "content-type": "image/png" } }); const imageData = new Uint8ClampedArray(image); const pixels = []; for (let i = 0; i in imageData; i += 4) { const average = (imageData[i] + imageData[i + 1] + imageData[i + 2]) / 3; if (average < 130) { // black; pixels.push(0); } else if (average < 210) { // gray #aaa pixels.push(170); } else { // white pixels.push(255); } } }