Image gray after encoding Base64 in flask

I am sending an image from javascript to flask via base64 but the problem is that I lost the color dimension

my javascript code: this is the code send via xmlhttprequest()

    let base64Image;
    let openFile = function(e) {
        let input =;
        let reader = new FileReader();
        reader.onloadend = function(){
        let dataURL = reader.result;
        base64Image = dataURL.replace(/^data:image/(png|jpg|jpeg);base64,/,"");
        selected_image.src = dataURL;
        result.innerText = "";
        probability.innerText = "";

and my flask router code where I recieved this file is

# get the image in base64 via post request and convert it to normal image
message = request.get_json(force=True)
encoded = message['image']
decoded = base64.b64decode(encoded)
dataBytesIO = io.BytesIO(decoded)
image =

The problem here is let suppose I have an image (768,1024,3) when I check the dimension using np.shape(image) it is (768,1024) and 3 is gone.

so if someone knows how to solve this problem it will be very helpful

Source: JavaSript – Stack Overflow

September 8, 2021
Category : News
Tags: base64 | flask | javascript

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.