How to convert data to same format as native ImageData.data format?

[velara3]

I'm working in an environment where Canvas and ImageData types are not available. This class looks like it does what I need but the library I'm using is expecting pixel data in the same format as the ImageData data property.

ImageData.data Read only Is a Uint8ClampedArray representing a one-dimensional array containing the data in the RGBA order, with integer values between 0 and 255 (inclusive).

Here is my related question: https://stackoverflow.com/questions/58465010/how-to-supply-the-correct-data-when-imagedata-is-not-available?noredirect=1#comment103265587_58465010

I'm having issues converting it to the correct format.

[photopea]

Hi, you can turn an ArrayBuffer into Uint8Clamped array by calling the constructor. You can create all ArrayBuffer views this way.

var ab = ... // ArrayBuffer
var arr = new Uint8ClampedArray(ab);

You should learn about typed arrays e.g. here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays

[velara3]

I'm using UPNG to decode an array buffer like so:

 var imageData = UPNG.decode(buffer);

But the imageData.data property is not Uint8ClampedArray. It is a plain object with indexed values:

imageData.data { '0': 0,
  '1': 0,
  '2': 0,
  '3': 0,
}

I need to convert the imageData.data object into ImageData.data

[photopea]

Please, read the documentation to learn how to use UPNG.js . You should call toRGBA8, too