Is there a to download image SYNCHRONUSLY from FIREBASE storage? And pass it to PNG.sync.read?

187 Views Asked by At

So developing this app is nodejs that uses firebase firestore and firebase storage.
What I am trying to do is, I already have a couple of images in firebase storage. I would randomly download an image and perform stego on it. For this purpose, I need the image to be downloaded first so that I can perform the stego operations.

Also, my firebase app is initialized as const firebaseApp = firebase.initializeApp(firebaseConfig);

My code to get_image() is as follows:

// This has to be async because I need to use await for firebase accesses. 
async function get_image() {

    const ref = storage.ref('sauce_png_pics');
    const all_images = await ref.listAll();
    // console.log();
    const img_num = Math.floor(Math.random() * all_images.items.length);
    var request; 
    var img_base64;
    var img_data = "";

    const img_url = await all_images.items[img_num].getDownloadURL();
    request =  https.request(img_url, (response) => {
        console.log("Auto Download stared");
        response.on('data', (chunk) => {
            img_data += chunk;
        }).on('end', () => {
            console.log("Auto Image downloaded");
            console.log(img_data);
            return Buffer.from(img_data, 'binary').toString('base64');
        });
    });
}

I have also tried downloading the image using XMLHTTPRequest:

async function get_image() {
    const ref = storage.ref('sauce_png_pics');
    const all_images = await ref.listAll();
    // console.log();
    const img_num = Math.floor(Math.random() * all_images.items.length);

    const img_url = await all_images.items[img_num].getDownloadURL();
    const xhr = new XMLHttpRequest();
    xhr.responseType = 'text';
    console.log(xhr);
    xhr.open('GET', img_url);
    // xhr.send();
    xhr.onreadystatechange = function () {
        if (xhr.readyState == XMLHttpRequest.DONE);
            console.log(xhr.status);
            if (xhr.status === 0 || xhr.status >=200) {
                console.log(xhr.responseText);
                return xhr.responseText;
            }

    };
    xhr.send();
}

Later on in the main function, I do:

var img = await get_image();
var png = PNG.sync.read(Buffer.from(img);

My problem is that when I run this code, I get the error:

Error: There are some read requests waitng on finished stream
    at push../node_modules/pngjs/lib/sync-reader.js.module.exports.push../node_modules/pngjs/lib/sync-reader.js.SyncReader.process (sync-reader.js:39)
    at push../node_modules/pngjs/lib/parser-sync.js.module.exports (parser-sync.js:68)
    at Object.push../node_modules/pngjs/lib/png-sync.js.exports.read (png-sync.js:7)
    at stego (lsbtools.js:59)
    at async onSubmit (SendMail.js:54)
    at :3000/async http:/localhost:3000/static/js/vendors~main.chunk.js:396829

This is because the await get_image() is not really awaiting. (lsbtools.js line:59)
The thing is I call get_image() only once!! but in the console, I can see that img_data is logged 3-4 times!! Which is strange!!. For the async, I am using await but it is not really awaiting!

IDK what is wrong here. Whether my logic is wrong or firebase download works in some different manner that I am not aware of! I have tried removing the get_image() code and directly use it in code w/o any function call still no luck!

My main aim is to make sure that the image is downloaded IN RAW form, pass to PNG.sync.read which is later on passed to a stego function to hide some data. I am unable to download the image in the first place! The image size is around 326KB and I have a decent internet connection.

Any help is appreciated!! Thanks in advance

0

There are 0 best solutions below