pngjs | Pure JavaScript PNG decoder | Runtime Evironment library

I am trying to create a 16bit heightmap png from a 32bit Rgb encoded height value png.

According to mapbox I can decode their png pixel values to height values in meters with this formula. height = -10000 + ((R * 256 * 256 + G * 256 + B) * 0.1)

I am new to understanding this type of information and have tried to figure it out myself but I need some help.

I found this program called image-js, docs for this program are here . Note I am using this in the browser not with node.

I think it has the abilities that I need. However, I am really not sure how to get the data from the original image and create a new 16bit png with the new height values calculated from the above formula.

If you look in the docs under image I can set many properties such as

bitDepth and set that to 16

getPixelsArray() this function will give me an array of pixels values in the form of r,g,b. I think I can then run each pixel through the above formula to get the height. After that how do I turn this height data back into a 16bit grayscale heightmap png?

Thanks!

Example images. 32bit Rgb encoded height value png

16 bit heightmap png. You have to zoom in to see the image changes

Update:

Thanks to traktor for the suggestion. I wanted to add some information to my question.

I don't necessarily need to use image-js. My main goal is to get a 16 bit heightmap from a 32 bit RGB. So any other browser side javscript method would be fine. I also am using browser side createWritable(); stream to write file to disk.

I have a method used from this nice module https://github.com/colkassad/terrain-rgb-height however I cannot get the browser side version of pngjs to work correctly. I think there is a difference between browser side stream reader/writers and node reader/writers that make it not work.

Thanks!

I have written below code which is fetching 3 documents , from that document i want to display only specific filed excluding the other field

I need to edit 34 000 photos on a pixel scale, so I wrote a program that replaces pixels in an image if they are over a specific RBG value (240, 240, 240), basically I want to isolate only white pixels and set everything else to black. This is my code:

I am writing a project which requires me to load a lot of low resolution PNGs (~10k) to train my neural network. This is my code

NOTE: This project uses 'pngjs' module

I'm new to node.js and this is just a small thing I need as part of a project that I'm writing in a different language.

How would I go about using pureimage to make a line from a start position to an end position and exporting it as a png? I'm interested in using pureimage because to my understanding you can set the line width with a variable

I currently have a working program with pngjs-draw but it's impossible to change line width there.

I am ordering images by a score value calculated by the getImageScore method, which is wrapped in a promise, as it takes quite some time to load the pixels it has to work with. I observed that the promises get blocked, never being finished. This was the initial whole program: