2

I have 16 bit raw data as base64 string. Want to convert that into png image, based on depth 8,16,24.

// code to process 16bit buffer array
function process16bitBitmap(buffer, options = {}) {
const view = new Uint8ClampedArray(buffer);
const out = new Uint8ClampedArray(buffer.byteLength);
// set alpha channel
view.forEach((a, i) => out[(i * 4) + 3] = a);
const canvas = document.createElement('canvas');
canvas.width = options.width;
canvas.height = options.height;
const imgData = new ImageData(out, options.width, options.height);
canvas.getContext('2d').putImageData(imgData, 0, 0);
// if you want to save a png version
document.body.appendChild(canvas);}

fiddle to reproduce the issue jsfiddle

Facing hard time to correctly create a png file from 16 bit raw data. 16 bit image should looks like this.

enter image description here

Mohd. Shariq
  • 214
  • 3
  • 14
  • Do you know the pixel format of the raw data? If not do you have what the final image is supposed to look like? – Josh Brobst Mar 12 '22 at 02:00
  • Pixel format is RGB and to draw on canvas it should be RGBA of 8bit. Also you can check the jsonData method in jsfiddle, there i have put the raw base64 which I am trying to convert into png. – Mohd. Shariq Mar 13 '22 at 13:17
  • Is the raw data least or most significant byte first? – Torsten Knodt Mar 18 '22 at 11:12

1 Answers1

1

With javaScript Vanilla:

I found this but coundn't find a way to reproduce.

With nodejs:

I found this and it works fine. Also found this but didn't work for me.

const fs = require('fs');
const path = require('path');

const base64ToPNG = (data) => {
    data = data.replace(/^data:image\/png;base64,/, '');

    fs.writeFile(path.resolve(__dirname, 'image.png'), data, 'base64', function (err) {
        if (err) throw err;
    });
}

var img = "YourImageHere...iVBORw0KGgoAAAANSUhEUgAAANwAAADcCAYAAAAbWs+...";

base64ToPNG(img)

If your objective is doing it with vanilla I don't know if I could help you, with node that way works, so probably you'll just need to figure how to adjust the depth.

Luigi Minardi
  • 343
  • 4
  • 13